web-dev-qa-db-fra.com

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

Mon site comportera du code en ligne ("lors de l'utilisation de la fonction foo() ...") et des extraits de bloc. Celles-ci tendent à être XML et comportent de très longues lignes que je préfère que le navigateur encapsule (c’est-à-dire que je ne souhaite pas utiliser <pre>). J'aimerais également mettre le formatage CSS sur les extraits de bloc.

Il semble que je ne puisse pas utiliser <code> pour les deux, car si je lui attribue des attributs de bloc CSS (avec display: block;), les extraits de code en ligne seront rompus.

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

J'aimerais garder le code HTML le plus simple possible, en évitant les classes, car les autres utilisateurs le conserveront.

htmlsemantic-markup
308
Steve Bennett

Quelque chose m'a complètement manqué: le comportement non-wrapping de <pre> peut être contrôlé avec CSS. Donc, cela donne 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>

http://jsfiddle.net/9mCN7/

74
Steve Bennett

Utilisez <code> pour le code intégré pouvant être renvoyé à la ligne et <pre><code> pour le code de bloc ne devant pas être renvoyé à la ligne. <samp> est pour l'échantillon le résultat , donc je ne voudrais pas l'utiliser pour représenter un exemple de code (auquel le lecteur est destiné entrée ). C'est ce que fait le débordement de pile.

(Mieux encore, si vous voulez que la maintenance soit facile, laissez les utilisateurs éditer les articles en tant que Markdown, alors ils n'auront pas à se rappeler d'utiliser <pre><code>.)

HTML5 est d'accord avec ceci dans "l'élément pre" :

Le pré-élément 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ù le pré-élément pourrait être utilisé:

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

[…]

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

Dans l'extrait 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>
327
Josh Lee

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

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

pour le code en ligne ou:

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

pour le bloc de code. En fonction de ce qui est moins commun.

36
slebetman

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

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

Il est très triste que cette balise soit déconseillée, mais elle fonctionne toujours sur les navigateurs, c’est une balise de mauvaise qualité. pas besoin d'échapper à quoi que ce soit à l'intérieur. Quelle joie!

14
vsync

Pour un <code> en ligne normal, utilisez:

<code>...</code>

et pour chaque lieu où <code> bloqué est nécessaire, utilisez

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

Vous pouvez également définir une balise <codenza> pour le bloc de séparation <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 analyse utilisant un protocole/schéma data: URI. Par conséquent, les codes de format %0Anl sont essentiels pour les conserver lorsqu'ils sont coupés et conservés. collé dans la barre d'URL pour le test - 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>
13
ekim

Pensez à TextArea

Les personnes découvrant cela via Google et cherchant un meilleur moyen de gérer l'affichage de leurs extraits de code doivent également considérer <textarea> qui donne beaucoup de contrôle sur la largeur/la hauteur, le défilement, etc. Notant que @vsync a mentionné la balise déconseillée <xmp>, je trouve que <textarea readonly> est un excellent substitut pour l’affichage HTML sans avoir besoin d’échapper à quoi que ce soit à l’intérieur (sauf où </textarea> pourrait y figurer).

Par exemple, pour afficher une seule ligne avec un retour à la ligne contrôlé, considérons <textarea rows=1 cols=100 readonly> votre code HTML ou autre avec tous les caractères, y compris les tabulations et les caractères 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>

Pour comparer tous ...

<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>
6
www-0av-Com

Considérez Prism.js: https://prismjs.com/#examples

Il fait fonctionner <pre><code> et est attrayant.

2
Michael Cole