使用 Bootstrap 进行 Google Prettify：行号不显示答案

【问题标题】：Google Prettify with Bootstrap: Line Numbers Not Showing使用 Bootstrap 进行 Google Prettify：行号不显示
【发布时间】：2012-07-26 07:58:40
【问题描述】：

我正在使用带有 Twitter Bootstrap 的 Google Prettify。它正在工作，但由于某种原因，行号没有出现。

这里是标记：

<pre class="prettyprint linenums">
    <ol class="linenums">
        <li class="L0">
            <span class="kwd">public</span>
            <span class="pln"> </span>
            <span class="kwd">override</span>
            <span class="pln"> </span>
            <span class="kwd">void</span>
            <span class="pln"> </span>
            <span class="typ">Dispose</span>
            <span class="pun">()</span>
        </li>
        <li class="L1">
            <span class="pln"> </span>
            <span class="pun">{</span>
        </li>
        <li class="L2">
            <span class="pln"> </span>
            <span class="kwd">base</span>
            <span class="pun">.</span>
            <span class="typ">Dispose</span>
            <span class="pun">();</span>
        </li>
            <li class="L3">
            <span class="pln"> </span>
            <span class="pun">}</span>
        </li>
    </ol>
</pre>

我这样称呼它：

<script type="text/javascript">
    $(document).ready(function () {
        prettyPrint();
    });
</script>

我没有任何自定义 CSS.. 仅使用 Bootstrap CSS..

【问题讨论】：

标签： twitter-bootstrap prettify google-code-prettify

【解决方案1】：

我建议你使用这两个文件：

http://twitter.github.com/bootstrap/assets/js/google-code-prettify/prettify.css

http://twitter.github.com/bootstrap/assets/js/google-code-prettify/prettify.js

并将其添加到您的页脚中：

<script>
  !function ($) {
    $(function(){
      window.prettyPrint && prettyPrint()   
    })
  }(window.jQuery)
</script>

发现于application.js 来自http://twitter.github.com/

【讨论】：

你能解释一下脚本 sn-p 的作用吗？

【解决方案2】：

确保您没有 list-style: none; CSS 文件中的任何位置。

【讨论】：

【解决方案3】：

默认样式表的操作部分是

li.L0,
li.L1,
li.L2,
li.L3,
li.L5,
li.L6,
li.L7,
li.L8 { list-style-type: none }

这会关闭索引为 i 的所有项目的列表项目符号，其中 (i % 10) ∉ (4,9)。

添加高优先级样式将覆盖 prettify.css 中的默认样式，因此您无需提出自己的主题。

<style>
li.L0,
li.L1,
li.L2,
li.L3,
li.L5,
li.L6,
li.L7,
li.L8 { list-style-type: decimal !important }
</style>

应该这样做。

【讨论】：