<code> vs <pre> vs <samp> en ligne et de bloquer les extraits de code

Mon site va avoir quelques de code en ligne ("lors de l'utilisation de la foo() fonction...") et de bloquer certains extraits. Ceux-ci tendent à être XML, et d'avoir de très longues lignes que je préfère le navigateur de retour à la ligne (c'est à dire, je ne veux pas utiliser <pre>). J'aimerais aussi mettre les CSS de mise en forme sur le bloc extraits.

Il semble que je ne peux pas utiliser <code> pour les deux, parce que si j'ai mis le CSS attributs de bloc sur elle (avec display: block;), il va se casser la ligne des extraits.

Je suis curieux de savoir ce que les gens font. Utilisation <code> pour les blocs, et <samp> en ligne? Utilisation <code><blockquote> ou quelque chose de similaire?

J'aimerais garder le HTML aussi simple que possible, en évitant les classes, comme d'autres utilisateurs, de leur maintien.

  • L'utilisation de Google Chrome et d'inspecter Rick Strahl blog: weblog.west-wind.com/posts/2016/May/23/... ensuite utiliser sa feuille de style attributs. Ses extraits de code sont très propre et facile à copier/lire.
InformationsquelleAutor Steve Bennett | 2011-01-06
  1. 322

    Utilisation <code> de code en ligne qui peut s'enrouler et <pre><code> pour le bloc de code qui ne doit pas envelopper. <samp> est pour l'échantillon sortie, je voudrais donc éviter de l'utiliser pour représenter un exemple de code (que le lecteur est à entrée). C'est ce Débordement de Pile n'.

    (Encore mieux, si vous voulez facile à entretenir, permettre aux utilisateurs de modifier les statuts comme Markdown, alors qu'ils n'ont pas à se rappeler d'utiliser <pre><code>.)

    HTML5 est d'accord avec cette en “le avant de l'élément”:

    Le pré élément représente un bloc de texte préformaté, dans lequel la structure est représentée par les conventions typographiques plutôt que par les éléments.

    Quelques exemples de cas où la pré élément peut être utilisé:

    • Y compris des fragments de code informatique, dont la structure est indiquée selon les conventions de la langue.

    [...]

    Pour représenter un bloc de code informatique, le pré élément peut être utilisé avec un élément de code; de représenter un bloc de sortie de l'ordinateur de la pré élément peut être utilisé avec un samp élément. De même, le kbd élément peut être utilisé dans un élément pour indiquer le texte que l'utilisateur est à l'entrée.

    Dans l'extrait suivant, un exemple de code informatique est présentée.

    <p>This is the <code>Panel</code> constructor:</p>
<pre><code>function Panel(element, canClose, closeHandler) {
  this.element = element;
  this.canClose = canClose;
  this.closeHandler = function () { if (closeHandler) closeHandler() };
}</code></pre>
    • Cela pourrait être la bonne façon de faire, mais je pense toujours que c'est stupide. Le HTML-devs prévoyait la nécessité d'une <code> tag, mais nous avions décidé de ne jamais écrire une seule ligne? Ou, je suppose, parce qu'ils n'ont pas envie d'avoir deux balises, un bloc et un inline? Encore... quel est le problème avec le fait de faire <code> au niveau du bloc avec CSS? Je pensais que nous étions censés écrire "sémantique" HTML. <code> est bon et sémantique, mais <pre> pas tellement.
    • Je suis en désaccord. À l'opposé de texte préformaté est juste un bon vieux texte dans votre document. Faire <code> au niveau des blocs CSS est unsemantic. De cette façon, recommandé en HTML5.
    • Problème avec <pre> est-il modifie les espaces de traitement ainsi: tous les espaces sont préservés, et l'emballage est éteint. Sauf si il y a un moyen pour changer cela?
    • Bennett, dans le CSS white-space: normal; Bien que je ne vois pas pourquoi vous voulez faire cela pour le code. Aussi cette <pre><code> chose est stupide, le <pre> balise est définie très clairement dans les normes "code informatique" (et d'autres choses), comme mentionné par @jleedev. Est-ce parce que vous pensez que <code> est un meilleur nom? désolé de ne pas faire plus de sémantique. Il y a un cas similaire avec le tag <address>, il n'a pas vraiment le son comme "auteur", mais la norme dit qu'est ce que c'est, c'est.
    • voir aussi dev.w3.org/html5/spec-author-view/...
    • "Bien que je ne vois pas pourquoi vous voulez faire cela pour le code." - parce que l'espace n'est pas significative dans toutes les langues, notamment XML. "Est-ce parce que vous pensez que <code> est un meilleur nom?" - comme je l'ai dit, le problème est l'absence de ligne d'emballage avec un <pre>.
    • -1. L'OP central de la question était de savoir comment accomplir bloc de fragments qui s'enroulent. Vous avez adressé le code en ligne, ainsi que le bloc de code qui doit pas wrap, mais ce n'est pas l'adresse de la principale OP question.
    • <code> a un plus grand espace de ligne de <pre> et CSS a white-space: pre; qui simule <pre> remplacement <pre><code>

    InformationsquelleAutor Josh Lee
  2. 72

    Quelque chose que j'ai complètement raté: la non-emballage comportement de <pre> peut être contrôlé à l'aide des CSS. Donc, cela donne le résultat exact que je cherchais:

    CSS:

    code { 
    background: hsl(220, 80%, 90%); 
}

pre {
    white-space: pre-wrap;
    background: hsl(30,80%,90%);
}

    HTML:

    Here's an example demonstrating the <code>&lt;code&gt;</code> tag.

<pre>
Here's a very long pre-formatted formatted using the &lt;pre&gt; tag. Notice how it wraps?  It goes on and on and on and on and on and on and on and on and on and on...
</pre>

    http://jsfiddle.net/9mCN7/

    InformationsquelleAutor Steve Bennett
  3. 36

    Personnellement j'utiliserais <code> parce que c'est le plus sémantiquement correct. Alors pour différencier entre inline et le bloc de code que j'avais ajouter une classe, soit:

    <code class="inlinecode"></code>

    pour le code en ligne ou:

    <code class="codeblock"></code>

    pour bloc de code. Selon ce qui est moins courant.

    • ouais, je commence à penser de la sorte. J'ai demandé une solution sans classes, mais il semble qu'il n'y a pas un bon.
    • La chose principale est de définir une valeur par défaut <code> bloc sans classe pour la plupart des cas d'utilisation. Alors tous ceux qui veulent faire les chose rare seulement besoin d'ajouter de la classe. Faire d'une autre manière sera toujours en demandant à l'utilisateur de type supplémentaire. De cette façon, l'utilisateur peut penser que l'ajout d'un tag spécial plutôt que d'utiliser une structure très différente.
    InformationsquelleAutor slebetman
  4. 14

    Afficher le code HTML, est-à -, à l'aide de l' (obsolète) <xmp> tag:

    HTML:

    <xmp>
    <input placeholder='write something' value='test'>
</xmp>

    C'est très triste cette balise a été abandonné, mais il ne fonctionne toujours sur les navigateurs, c'est un bad-ass de la balise. pas besoin d'échapper à quelque chose à l'intérieur. Quelle joie!

    • Je suis sûrement raté quelque chose, mais apparemment, c'est le seul que j'ai trouvé moyen de montrer code HTML brut (fin de débogage) dans WordPress/PHP templates...
    • vsync), Voir ma réponse ici, ce qui suggère l'utilisation de <textarea readonly> qui effectue le même travail est en cours, et a beaucoup plus de contrôle si vous le souhaitez.
    • c'est une très mauvaise utilisation d'un textarea à mon humble avis, étant donné que le code ne peut pas être mis en évidence par un script externe, comme Prism par exemple. et aussi, il ne s'adapte à la hauteur et la largeur du contenu, comme des <xmp> n', ou de toute autre block élément n'.. je ne le recommande pas comme une vraie solution, seulement en tant que théorique.
    • oui c'est les chevaux pour les cours (& je vous ai donné un upvote btw). Je textarea pour mes besoins. J'ai essayé xmp et ne me souviens pas pourquoi j'ai trouvé xmp insatisfaisant pour mes besoins. Bien sûr, son statut obsolète certainement décourage. J'utilise PRÉ quand j'en ai besoin pour mettre en surbrillance et le CODE pour les utiliser. Je ne peux pas imaginer comment Prisme des faits saillants à l'intérieur d'une XMP -- un peu de CSS wizardry?
    InformationsquelleAutor vsync
  5. 13

    Normal inline <code> utilisation:

    <code>...</code>

    et pour chaque et chaque endroit où bloqués <code> est nécessaire d'utiliser 

    <code style=display:block;white-space:pre-wrap>...</code>

    Sinon, définir un <codenza> balise pour briser doublure bloc <code> (pas de classes)

    <script>
</script>
<style>
  codenza, code {}     /*  noop mnemonic aide that codenza mimes code tag  */
  codenza {display:block;white-space:pre-wrap}
</style>`

    Test:
    (NB: ce qui suit est une scURIple utilisant un data: URI de protocole ou de régime, donc le %0A nl codes de format sont essentiel dans la préservation de tel lorsqu'il est coupé et collé dans la barre d'URL pour les tests, donc view-source: (ctrl-U) semble bon précéder chaque ligne ci-dessous avec %0A)

    data:text/html;charset=utf-8,<html >
<script>document.write(window.navigator.userAgent)</script>
<script></script>
<style>
  codenza, code {}     /*  noop mnemonic aide that codenza mimes code tag  */
  codenza {display:block;white-space:pre-wrap}
</style>
<p>First using the usual &lt;code> tag
<code>
  %0A     function x(arghhh){ 
  %0A          return "a very long line of text that will extend the code beyond the boundaries of the margins, guaranteed for the most part, well maybe without you as a warrantee (except in abnormally conditioned perverse environs in which case a warranty is useless)"
  %0A     }
</code>
and then 
<p>with the tag blocked using pre-wrapped lines
<code style=display:block;white-space:pre-wrap> 
  %0A     function x(arghhh){ 
  %0A          return "a very long line of text that will extend the code beyond the boundaries of the margins, guaranteed for the most part, well maybe without you as a warrantee (except in abnormally conditioned perverse environs in which case a warranty is useless)"
  %0A     }
</code>
<br>using an ersatz tag
<codenza>
  %0A     function x(arghhh){ 
  %0A          return "a very long line of text that will extend the code beyond the boundaries of the margins, guaranteed for the most part, well maybe without you as a warrantee (except in abnormally conditioned perverse environs in which case a warranty is useless)"
 %0A     }
</codenza>
</html>
    InformationsquelleAutor ekim
  6. 4

    Envisager TextArea

    Les gens à trouver via Google et la recherche d'une meilleure façon de gérer l'affichage de leurs fragments devraient aussi envisager de <textarea> qui donne beaucoup de contrôle sur la largeur/hauteur, le défilement etc. Notant que @vsync mentionné la balise obsolète <xmp>, je trouve <textarea readonly> est un excellent substitut pour l'affichage HTML sans avoir besoin d'échapper à quelque chose à l'intérieur (sauf si </textarea> peut apparaître à l'intérieur).

    Par exemple, d'afficher sur une seule ligne avec contrôle de la ligne d'emballage, pensez <textarea rows=1 cols=100 readonly> votre code html ou etc avec tous les caractères, y compris les onglets et les CrLf </textarea>.

    HTML:

    <textarea rows=5 cols=100 readonly>Example text with Newlines,
tabs & space,
  html tags etc <b>displayed</b>.
    However, note that &amp; still acts as an escape char..
      Eg: &lt;u&gt;(text)&lt;/u&gt;
</textarea>

    De comparer tous...

    HTML:

    <h2>Compared: TEXTAREA, XMP, PRE, SAMP, CODE</h2>
<p>Note that CSS can be used to override default fixed space fonts in each or all these.</p>
    
    
<textarea rows=5 cols=100 readonly>TEXTAREA: Example text with Newlines,
tabs & space,
  html tags etc <b>displayed natively</b>.
    However, note that &amp; still acts as an escape char..
      Eg: &lt;u&gt;(text)&lt;/u&gt;</textarea>

<xmp>XMP: Example text with Newlines,
tabs & space,
  html tags etc <b>displayed natively</b>.
    However, note that &amp; (&) will not act as an escape char..
      Eg: &lt;u&gt;(text)&lt;/u&gt;
</xmp>

<pre>PRE: Example text with Newlines,
tabs & space,
  html tags etc <b>are interpreted, not displayed</b>.
    However, note that &amp; still acts as an escape char..
      Eg: &lt;u&gt;(text)&lt;/u&gt;
</pre>

<samp>SAMP: Example text with Newlines,
tabs & space,
  html tags etc <b>are interpreted, not displayed</b>.
    However, note that &amp; still acts as an escape char..
      Eg: &lt;u&gt;(text)&lt;/u&gt;
</samp>

<code>CODE: Example text with Newlines,
tabs & space,
  html tags etc <b>are interpreted, not displayed</b>.
    However, note that &amp; still acts as an escape char..
      Eg: &lt;u&gt;(text)&lt;/u&gt;
</code>

    InformationsquelleAutor www-0av-Com
  7. 2

    Envisager Prism.js: https://prismjs.com/#examples

    Il fait <pre><code> travail et attrayante.

    InformationsquelleAutor Michael Cole