在我的HTML中编写代码块

Question

我想在我的html中存档：

jsfiddle：https://jsfiddle.net/cr9vkc7f/4/

我试着在你的代码左侧插入边框

 border-left: 1px solid #444;

我现在所拥有的是，但是我希望将数字移到左侧，使其与我的第一张图片相同：

有人可以帮助我，我确信我非常接近存档。

Answer 1

你必须渲染空行：

    <ol class="linenums">
      <li></li>
      <li></li>
      <li></li>
      <li class=""><code><span class="tag">&lt;pre&gt;</span><span class="pln">&amp;lt;p&amp;gt;A block of code is wrapped in pre tags&amp;lt;/p&amp;gt;</span><span class="tag">&lt;/pre&gt;</span></code></li>
      <li class=""><code><span class="tag">&lt;p&gt;</span><span class="pln">For example, </span><span class="tag">&lt;code&gt;</span><span class="pln">&amp;lt;section&amp;gt;</span><span class="tag">&lt;/code&gt;</span><span class="pln"> should be wrapped as inline.</span><span class="tag">&lt;/p&gt;</span></code></li>
      <li class=""><code><span class="tag">&lt;p&gt;</span><span class="pln">To switch directories, type </span><span class="tag">&lt;kbd&gt;</span><span class="pln">cd</span><span class="tag">&lt;/kbd&gt;</span><span class="pln"> followed by the name of the directory.</span><span class="tag">&lt;/p&gt;</span></code></li>
    </ol>

Answer 2

https://jsfiddle.net/cr9vkc7f/5/

＆＃13;

＆＃13;

.panel-code.pre {
  border-radius: .5em;
  border: 1px solid #ddd;

  overflow-x: scroll;
  padding: .5em .3em;
}

ol.linenums {
  border-left: 1px solid #444;
  margin: 0 0 0 3.3em;
  background-color: #333;
  /* IE indents via margin-left */
  padding: 0;
}

ol.linenums li {
  line-height: 1.5;
  padding-left: .8em;
  list-style: decimal inside;
  
  display: list-item;
}
.tag {
    
}

＆＃13;

<div class="panel-body panel-code" ng-show="isShow" ng-click="changeValue(false)">

  <code>        <ol class="linenums">
          <li class=""><code><span class="tag">&lt;pre&gt;</span><span class="pln">&amp;lt;p&amp;gt;A block of code is wrapped in pre tags&amp;lt;/p&amp;gt;</span><span class="tag">&lt;/pre&gt;</span></code></li>
          <li class=""><code><span class="tag">&lt;p&gt;</span><span class="pln">For example, </span><span class="tag">&lt;code&gt;</span><span class="pln">&amp;lt;section&amp;gt;</span><span class="tag">&lt;/code&gt;</span><span class="pln"> should be wrapped as inline.</span><span class="tag">&lt;/p&gt;</span></code></li>
          <li class=""><code><span class="tag">&lt;p&gt;</span><span class="pln">To switch directories, type </span><span class="tag">&lt;kbd&gt;</span><span class="pln">cd</span><span class="tag">&lt;/kbd&gt;</span><span class="pln"> followed by the name of the directory.</span><span class="tag">&lt;/p&gt;</span></code></li>
        </ol>
      </code>

  
</div>

＆＃13;

＆＃13;

＆＃13;