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

335

Mon site va avoir du code en ligne ("lors de l'utilisation de la foo()fonction ...") et des extraits de blocs. Ceux-ci ont tendance à être XML et ont de très longues lignes que je préfère que le navigateur encapsule (c'est-à-dire que je ne veux pas utiliser <pre>). Je voudrais également mettre la mise en forme CSS sur les extraits de blocs.

Il semble que je ne puisse pas utiliser les <code>deux, car si je mets des attributs de bloc CSS dessus (avec display: block;), cela cassera les extraits en ligne.

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

J'aimerais garder le HTML réel aussi simple que possible, en évitant les classes, car d'autres utilisateurs le maintiendront.

html semantic-markup Steve Bennett
la source
3
Utilisez Google Chrome et inspectez le blog de Rick Strahl: weblog.west-wind.com/posts/2016/May/23/… puis utilisez ses attributs de feuille de style. Ses extraits de code sont très propres et faciles à copier / lire.
JoshYates1980
1
<pre>et son comportement peut être gardé à l'esprit comme le mot « précisément»
snr

Réponses:

351

À utiliser <code>pour le code en ligne qui peut encapsuler et <pre><code>pour le code de bloc qui ne doit pas encapsuler. <samp>est pour un exemple de sortie , donc j'éviterais de l'utiliser pour représenter un exemple de code (que le lecteur doit saisir ). C'est ce que fait Stack Overflow.

(Mieux encore, si vous voulez un entretien facile, laissez les utilisateurs éditer les articles en Markdown, alors ils n'auront pas à se rappeler de les utiliser <pre><code>.)

HTML5 est d'accord avec cela dans «l' preélément» :

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

Quelques exemples de cas où l'élément pré pourrait être utilisé:

  • Y compris des fragments de code informatique, avec une structure indiquée selon les conventions de cette langue.

[…]

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

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

<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>
Josh Lee
la source
8
C'est peut-être la bonne façon de procéder, mais je pense toujours que c'est stupide. Les développeurs HTML ont prévu la nécessité d'une <code>balise, mais ont décidé que nous n'écririons jamais qu'une seule ligne? Ou je suppose, parce qu'ils ne voulaient pas avoir deux balises, un bloc et un en ligne? Pourtant ... qu'est-ce qui ne va pas avec la création de <code>blocs au niveau CSS? Je pensais que nous étions censés écrire du HTML "sémantique". <code>est bon et sémantique, mais <pre>pas tellement.
mpen
11
Je ne suis pas d'accord. Le contraire du texte préformaté est tout simplement du vieux texte dans votre document. Faire au <code>niveau du bloc avec CSS n'est pas sémantique. Cette méthode est recommandée en HTML5 .
Josh Lee
1
Le problème <pre>est qu'il modifie également le traitement des espaces blancs: tous les espaces sont conservés et l'habillage est désactivé. À moins qu'il n'y ait un moyen de désactiver cela?
Steve Bennett
3
@Steve Bennett, en CSS white-space: normal;Bien que je ne vois pas pourquoi vous le feriez pour du code. De plus, cette <pre><code>chose est stupide, la <pre>balise est définie très clairement dans les normes comme "code informatique" (et d'autres choses) comme mentionné par @jleedev. Est-ce parce que vous pensez que <code>c'est un meilleur nom? désolé, cela ne le rend pas plus sémantique. Il y a un cas similaire avec la balise <address>, cela ne ressemble pas vraiment à "auteur", mais la norme dit que c'est pour ça, donc c'est le cas.
srcspider
6
-1. La question centrale du PO était de savoir comment réaliser des extraits de blocs qui se terminent. Vous avez abordé le code en ligne, ainsi que le code de bloc qui ne doit pas se terminer, mais cela ne répond pas à la question principale de l'OP.
Asad Saeeduddin
80

Quelque chose que j'ai complètement manqué: le comportement de non-wrapping <pre>peut être contrôlé avec CSS. Cela donne donc le résultat exact que je cherchais:

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

pre {
    white-space: pre-wrap;
    background: hsl(30,80%,90%);
}
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>
Développer l'extrait

http://jsfiddle.net/9mCN7/

Steve Bennett
la source
41

Personnellement, j'utiliserais <code>parce que c'est le plus sémantiquement correct. Ensuite, pour différencier le code en ligne et le code de bloc, j'ajouterais une classe:

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

pour le code en ligne ou:

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

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

Slebetman
la source
oui, je commence à le penser aussi. J'ai demandé une solution sans cours, mais il semble qu'il n'y en ait pas une bonne.
Steve Bennett
3
@Steve: L'essentiel est de définir un <code>bloc par défaut sans classe pour le cas d'utilisation le plus courant. Ensuite, toute personne souhaitant faire la chose inhabituelle n'a qu'à ajouter la classe. Le faire d'une autre manière demandera toujours à l'utilisateur de taper extra. De cette façon, l'utilisateur peut y penser en ajoutant une balise spéciale plutôt qu'en utilisant une structure complètement différente.
slebetman
17

Pour une <code>utilisation normale en ligne :

<code>...</code>

et pour chaque endroit où le blocage <code>est nécessaire, utilisez

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

Alternativement, définissez une <codenza>balise pour le bloc de doublure de rupture <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 un scURIple utilisant un data:protocole / schéma URI, donc les %0Acodes de format nl sont essentiels pour les conserver lorsqu'ils sont coupés et collés dans la barre d'URL pour le test - donc view-source:( ctrl- U) semble bien 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>
ekim
la source
14

Afficher le code HTML, tel quel , à l'aide de la <xmp>balise (obsolète) :

<xmp>
<div>
  <input placeholder='write something' value='test'>
</div>
</xmp>
Développer l'extrait

Il est très triste que cette balise soit obsolète, mais cela fonctionne toujours sur les navigateurs, c'est une balise bad-ass. pas besoin d'échapper à quoi que ce soit à l'intérieur. Quelle joie!

Afficher le code HTML, tel quel , à l'aide de la <textarea>balise:

<textarea readonly rows="4" style="background:none; border:none; resize:none; outline:none; width:100%;">
<div>
  <input placeholder='write something' value='test'>
</div>
</textarea>
Développer l'extrait

vsync
la source
Il me manque sûrement quelque chose, mais apparemment, c'est le seul moyen que j'ai trouvé pour afficher du code HTML brut (à des fins de débogage) dans les modèles WordPress / PHP ...
sphakka
@sphakka (& vsync), Voir ma réponse suggérant ici que l'utilisation en <textarea readonly>fait de même, est actuelle et a beaucoup plus de contrôle si vous le souhaitez.
www-0av-Com
@ user1863152 - c'est une très mauvaise utilisation d'une zone de texte IMHO car le code ne peut pas être mis en évidence par un script externe, comme Prism par exemple. et aussi, il ne correspond pas à la hauteur et à la largeur du contenu, comme le <xmp>fait, ou tout autre blockélément le fait .. je ne le recommanderais pas comme une vraie solution, seulement comme une solution théorique.
vsync
@vsync, oui, ce sont des chevaux pour les cours (et je vous ai donné un upvote btw). J'utilise textarea pour mes besoins. J'ai essayé xmp et je ne me souviens pas pourquoi j'ai trouvé xmp insatisfaisant pour mes besoins. Bien sûr, son statut obsolète décourage certainement. J'utilise PRE lorsque j'ai besoin de surligner et de CODE pour une utilisation en ligne. Je ne peux pas imaginer comment Prism se démarque dans un XMP - de la magie CSS?
www-0av-Com
Je n'en suis pas trop sûr. Oui, cela fonctionne, mais déconseillé depuis 3.2 et supprimé complètement en 5? Bien que peu de balises aient été complètement supprimées des navigateurs - en <blink>est un exemple - je serais impatient de l'utiliser pour tout ce qui doit être évolutif.
spacer GIF
9

Considérez TextArea

Les personnes qui trouvent cela via Google et recherchent un meilleur moyen de gérer l'affichage de leurs extraits devraient également considérer <textarea>ce qui donne beaucoup de contrôle sur la largeur / hauteur, le défilement, etc. Notant que @vsync a mentionné la balise obsolète <xmp>, je trouve que <textarea readonly>c'est un excellent substitut pour afficher du HTML sans avoir besoin d'échapper à quoi que ce soit à l'intérieur (sauf là où </textarea>pourrait apparaître à l'intérieur).

Par exemple, pour afficher une seule ligne avec un habillage de ligne contrôlé, considérez <textarea rows=1 cols=100 readonly> votre html ou etc avec tous les caractères, y compris les tabulations et les CrLf </textarea> .

<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>
Développer l'extrait

Pour tout comparer ...

<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>
Développer l'extrait

www-0av-Com
la source