html: Comment faire pour ajouter des numéros de ligne à un bloc de code source

Je veux montrer le code source avec les numéros de ligne, de telle manière que:

  1. Le code peut être copié et collé sans les numéros de ligne, en respectant les sauts de ligne, les espaces et les tabulations.
  2. Les chiffres sont justifié à droite.
  3. Le code peut s'enrouler autour d'.

J'ai essayé l'une des approches suivantes.

Liste ordonnée

<style type="text/css">
    ol.code > li {
        white-space: pre-wrap;
    }
</style>
...
<ol class="code">
    <li>first line</li>
    <li>   indented line followed by empty line</li>
    <li></li>
    <li>the following line consists of one single space</li>
    <li> </li>
    <li>this line has a space at the end </li>
    <li>&#9;and one leading and ending tab&#9;</li>
    <li>fill to</li>
    <li>ten</li>
    <li>lines</li>
</ol>

Cela fonctionne pour la plupart, mais lors de la copie et le collage, les espaces et les tabulations dans les lignes ne sont pas copiés dans mon navigateur (Iceweasel). Donc #1 échoue avec cette approche.

Pré avec compteur

<style type="text/css">
    pre.code {
        white-space: pre-wrap;
    }
    pre.code:before {
        counter-reset: listing;
    }
    pre.code code {
        counter-increment: listing;
    }
    pre.code code:before {
        content: counter(listing) ". ";
        width: 8em;         /* doesn't work */
        padding-left: auto; /* doesn't work */
        margin-left: auto;  /* doesn't work */
        text-align: right;  /* doesn't work */
    }
</style>
...
<pre class="code">
<code>first line</code>
<code>   indented line followed by empty line</code>
<code></code>
<code>the following line consists of one single space</code>
<code> </code>
<code>this line has a space at the end </code>
<code>&#9;and one leading and ending tab&#9;</code>
<code>fill to</code>
<code>ten</code>
<code>lines</code>
</pre>

Cela fonctionne presque, mais #2 tombe en panne. Il a un problème supplémentaire que les lignes de continuer sous le numéro de la ligne (à côté de la marge de gauche), ne relevant pas de la ligne de départ (compilés).

De synchronisation des lignes et des pré

C'était une suggestion que j'ai trouvé dans https://www.sitepoint.com/best-practice-for-code-examples/ mais il dit explicitement que la ligne d'emballage doit être désactivé, donc #3 tombe en panne. Il me fait aussi très mal à l'aise, comme je l'ai déjà vu ces blocs de rupture dans certains sites.

Est-il un moyen de le faire sans JavaScript?

Une raison quelconque vous avez besoin pour mettre en œuvre vous-même? github.com/google/code-prettify semble faire cela et plus encore
Voir ce que vous pouvez faire avec xmp tag.
J'ai vérifié le code-embellir maintenant. Il ne parvient pas requis #1 ci-dessus (les espaces, qui sont essentiels pour Python, sont perdus sur le copier-coller) et les numéros de ligne ne s'affiche pas correctement dans mon navigateur (uniquement des lignes vides avait un numéro de ligne).

OriginalL'auteur Pedro Gimeno | 2016-12-23

  1. 2

    Bien que, techniquement, ma question est répondue par Rounin (merci), la vérité est que je n'étais pas pleinement satisfait du résultat, car je n'ai pas d'état d'un couple d'autres accessoires que je jugeais important après la publication de la question, et ils échouent avec cette solution:

    1. Lorsqu'une ligne s'enroule autour, il devrait aller en dessous de la ligne ci-dessus, pas en dessous de la ligne de nombres.
    2. À la fois les nombres et le texte des colonnes de style-mesure (notamment, l'arrière-plan de l'ensemble de la colonne doit être facilement modifiable).

    J'ai essayé une solution avec un autre inline-block, mais il a échoué #5, et a eu des problèmes d'adaptation à n'importe quelle largeur.

    <OL> est assez proche, mais pas tout à fait là. Une alternative à <OL> que je savais ne pas voler est d'utiliser un tableau. Il ne serait pas voler, parce que le navigateur besoins un <PRE> élément afin de le copier/coller d'espaces et de tabulations correctement.

    Puis tout d'un coup, une solution d'un clic dans ma tête. En forçant un élément qui n'est pas une table à se comporter comme si c'était un tableau, est exactement le but de la table-xxxx afficher les valeurs!

    Alors nous y voici. Testé dans Iceweasel 24.7.0 et Chrome 35.0.1916.153. La démo comprend d'autres style comme un exemple de la polyvalence de la méthode.

    Le CSS:

    /* Bare bones style for the desired effect */
pre.code {
    display: table;
    table-layout: fixed;
    width: 100%; /* anything but auto, otherwise fixed layout not guaranteed */
    white-space: pre-wrap;
}
pre.code::before {
    counter-reset: linenum;
}
pre.code span.tr {
    display: table-row;
    counter-increment: linenum;
}
pre.code span.th { /* used for line numbers */
    display: table-cell;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
}
pre.code span.th::before {
    content: counter(linenum);
    text-align: right;
    display: block;
}
pre.code span.th {
    width: 4em; /* or whatever the desired width of the numbers column is */
}
pre.code code {
    display: table-cell;
}

    Et le code HTML:

    <pre class="code">
<span class="tr first-row"><span class="th"></span><code>   indented line</code></span>
<span class="tr"><span class="th"></span><code>unindented line</code></span>
<span class="tr"><span class="th"></span><code>&#9;line starting and ending with tab&#9;</code></span>
<span class="tr"><span class="th"></span><code></code></span>
<span class="tr"><span class="th"></span><code>the above line should be empty</code></span>
<span class="tr"><span class="th"></span><code>overlong line that wraps around or so I hope because it's really long and should overflow the right sided margin of the web page in your browser</code></span>
<span class="tr"><span class="th"></span><code>fill up to ten</code></span>
<span class="tr"><span class="th"></span><code>lines to check</code></span>
<span class="tr"><span class="th"></span><code>alignment</code></span>
<span class="tr"><span class="th"></span><code>of numbers</code></span>
</pre>

    Démonstration avec un supplément de style

    OriginalL'auteur Pedro Gimeno

  2. 1

    Je vous recommande d'utiliser codemirror pour ce faire, au lieu de l'écrire vous-même.

    Vous bénéficiez de la fonctionnalité que vous décrivez pour gratuit et beaucoup d'autres choses:

    https://codemirror.net/doc/manual.html#usage

    CodeMirror.fromTextArea(document.getElementById("myDiv"), {
    lineNumbers: true,
    mode: "htmlmixed"
  });
    Merci, mais je ne veux pas utiliser de JS. J'ai édité la question de préciser que. Le moindre indice sur ce que le HTML n'est que l'outil générer?
    Hmmm, pas vraiment. Je n'ai pas eu un rédacteur en face de moi, donc je ne peux pas tester cette solution.
    Hmmm, pas vraiment. Je n'ai pas eu un rédacteur en face de moi, donc je ne peux pas tester cette solution. Avez-vous essayé d'ajouter un imbriquée span avec une classe pour le contenu de chaque code, puis d'appliquer un margin-left à tiret?
    J'ai regardé dans CodeMirror. Même si elle fait de faire ce que j'ai demandé (sauf pour la partie nécessitant de la JS), c'est en fait un acteur à part entière de l'éditeur, trop lourd pour le but de présenter juste des bouts de code. Il semble s'appuyer sur le sous-jacent textarea pour permettre la sélection de texte, si elle a effectivement besoin de deux copies du code. Le défilement des besoins JS active au travail. Ce n'est pas vraiment ce que je cherchais, mais merci.
    Plus légères et plus la version est prismjs.com mais je n'ai pas utilisé personnellement.

    OriginalL'auteur Mr Giggles