Comment ajouter des numéros de ligne à toutes les lignes de Google Prettify?
-
28-10-2019 - |
Question
J'utilise Prettify:
<pre class="prettyprint linenums">
some code
</pre>
Cela fonctionne mais le numéro de ligne affiche toutes les 5 lignes et non pour chaque ligne. J'utilise ces fichiers
<link href="../src/prettify.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="../src/prettify.js"></script>
Fondamentalement à la fin de cette page http://google-code-pritify.googlecode.com/svn/trunk/styles/index.html Vous pouvez voir que je veux, mais j'ai regardé ce code et je ne peux pas le comprendre.
La solution
La cause profonde est list-style-type: none
dans Prettify.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 }
Vous pouvez soit supprimer cette règle ou le remplacer avec:
.linenums li {
list-style-type: decimal;
}
Autres conseils
La solution
Au lieu de modifier le CSS, vous pouvez simplement ajouter une ligne de CSS pour atteindre le comportement souhaité:
<style>
.prettyprint ol.linenums > li { list-style-type: decimal; }
</style>
Exemple
Un exemple complet peut avoir le code ci-dessous. Afficher les résultats via jsfiddle ou voir ci-dessous
<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>
J'aime avoir les couleurs d'arrière-plan en alternance, c'est ce que c'est que de cette façon:
/* 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; }