42

私はprettifyを使用しています：

<pre class="prettyprint linenums">
  some code
</pre>

動作しますが、行番号は5行ごとに表示され、すべての行に対して表示されるわけではありません。私はこれらのファイルを使用しています

<link href="../src/prettify.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="../src/prettify.js"></script>

基本的にこのページの最後にhttp://google-code-prettify.googlecode.com/svn/trunk/styles/index.htmlあなたは私が欲しいことを見ることができます、しかし私はそのコードを見ました、そして私はそれを理解することができませんアウト。

4

3 に答える 3

47

根本的な原因はlist-style-type: noneprettify.cssにあります：

/* Specify class=linenums on a pre to get line numbering */
ol.linenums { margin-top: 0; margin-bottom: 0 } /* IE indents via margin-left */
li.L0,
li.L1,
li.L2,
li.L3,
li.L5,
li.L6,
li.L7,
li.L8 { list-style-type: none /* <<< THIS is the cause! */ }
/* Alternate shading for lines */
li.L1,
li.L3,
li.L5,
li.L7,
li.L9 { background: #eee }

そのルールを削除するか、次のコマンドでオーバーライドできます。

.linenums li {
    list-style-type: decimal;
}
于 2011-12-06T12:06:17.390 に答える
29

解決

CSSを変更する代わりに、CSSの行を追加するだけで、目的の動作を実現できます。

<style>

    .prettyprint ol.linenums > li { list-style-type: decimal; }

</style>

例

完全な例には、以下のコードが含まれる場合があります。jsfiddleで結果を表示するか、以下を参照してください

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/prettify/r298/prettify.min.css" />

    <style>
        .prettyprint ol.linenums > li { list-style-type: decimal; }
    </style>

<pre class="prettyprint linenums">
 foo
 bar
 bis
 sed
 awk
 cat
</pre>


<script src="//cdnjs.cloudflare.com/ajax/libs/prettify/r298/prettify.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/prettify/r298/run_prettify.js"></script>

于 2014-01-01T04:55:14.160 に答える
3

背景色を交互にするのが好きなので、次のようにしました。

/* White background color for all even-numbered lines */
li.L0,
li.L2,
li.L4,
li.L6,
li.L8  { background-color: #fff; }
/* Light-gray background color for all odd-numbered lines */
li.L1,
li.L3,
li.L5,
li.L7,
li.L9 { background-color: #eee; }
于 2013-01-18T16:37:49.460 に答える