<code> vs <pre> vs <samp> para fragmentos de código en línea y de bloque

335

Mi sitio tendrá un código en línea ("cuando use la foo()función ...") y algunos fragmentos de bloque. Estos tienden a ser XML y tienen líneas muy largas que prefiero que el navegador ajuste (es decir, no quiero usar<pre> ). También me gustaría poner formato CSS en los fragmentos de bloque.

Parece que no puedo usar <code> para ambos, porque si pongo atributos de bloque CSS en él (condisplay: block; ), se romperán los fragmentos en línea.

Tengo curiosidad por lo que hace la gente. Usar <code>para bloques y<samp> en línea? Utilizar<code><blockquote> o algo similar?

Me gustaría mantener el HTML real lo más simple posible, evitando clases, ya que otros usuarios lo mantendrán.

html  semantic-markup 
— Steve Bennett
fuente
3
Use Google Chrome e inspeccione el blog de Rick Strahl: weblog.west-wind.com/posts/2016/May/23/… luego use sus atributos de hoja de estilo. Sus fragmentos de código son muy limpios y fáciles de copiar / leer.
— JoshYates1980
1
<pre>y su comportamiento se puede tener en cuenta como la palabra " precisamente"
— snr

Respuestas:

351

Úselo <code>para el código en línea que puede ajustarse y <pre><code>para el código de bloque que no debe ajustarse. <samp>es para salida de muestra , por lo que evitaría usarlo para representar el código de muestra (que el lector debe ingresar ). Esto es lo que hace Stack Overflow.

(Mejor aún, si desea un mantenimiento fácil, permita que los usuarios editen los artículos como Markdown, entonces no tienen que acordarse de usarlos <pre><code>).

HTML5 está de acuerdo con esto en "el preelemento" :

El elemento pre representa un bloque de texto preformateado, en el que la estructura está representada por convenciones tipográficas en lugar de por elementos.

Algunos ejemplos de casos en los que podría usarse el elemento pre:

  • Incluyendo fragmentos de código de computadora, con estructura indicada de acuerdo con las convenciones de ese lenguaje.

[...]

Para representar un bloque de código de computadora, el elemento pre puede usarse con un elemento de código; para representar un bloque de salida de la computadora, el elemento previo puede usarse con un elemento de muestra. De manera similar, el elemento kbd se puede usar dentro de un elemento previo para indicar el texto que el usuario debe ingresar.

En el siguiente fragmento, se presenta una muestra de código de computadora.

<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
fuente
8
Esta podría ser la forma correcta de hacerlo, pero sigo pensando que es estúpido. Los desarrolladores de HTML previeron la necesidad de una <code>etiqueta, pero decidieron que solo escribiríamos una línea. O supongo, porque no querían tener dos etiquetas, una en bloque y otra en línea. Aún así ... ¿qué hay de malo en hacer <code>un nivel de bloque con CSS? Pensé que se suponía que debíamos escribir HTML "semántico". <code>es bueno y semántico, pero <pre>no tanto.
— mpen
11
Estoy en desacuerdo. Lo opuesto al texto preformateado es simplemente texto antiguo en su documento. Hacer <code>bloque de nivel con CSS no es semántico. De esta manera se recomienda en HTML5 .
— Josh Lee
1
El problema <pre>es que también modifica el procesamiento de espacios en blanco: se conservan todos los espacios y se desactiva el ajuste. ¿A menos que haya una manera de apagar esto?
— Steve Bennett
3
@ Steve Bennett, en CSS white-space: normal;Aunque no entiendo por qué harías esto para el código. Además, esto <pre><code>es estúpido, la <pre>etiqueta se define muy claramente en los estándares como "código de computadora" (y otras cosas) como lo menciona @jleedev. ¿Es porque crees que <code>es un nombre mejor? lo siento, eso no lo hace más semántico. Hay un caso similar con la etiqueta <address>, realmente no suena como "autor", pero el estándar dice que para eso es, así que es.
— srcspider
66
-1. La pregunta central del OP fue sobre cómo lograr fragmentos de bloque que se envuelvan. Ha abordado el código en línea, así como el código de bloque que no debe ajustarse, pero esto no aborda la pregunta principal del OP.
— Asad Saeeduddin
80

Algo que me perdí por completo: el comportamiento de no envoltura <pre>se puede controlar con CSS. Entonces esto da el resultado exacto que estaba buscando:

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>
Expandir fragmento

http://jsfiddle.net/9mCN7/

— Steve Bennett
fuente
41

Personalmente lo usaría <code>porque es lo más semánticamente correcto. Luego, para diferenciar entre el código en línea y el bloque, agregaría una clase:

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

para código en línea o:

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

para el bloque de código. Dependiendo de cuál es menos común.

— slebetman
fuente
Sí, también estoy empezando a pensar que sí. Pedí una solución sin clases, pero parece que no hay una buena.
— Steve Bennett
3
@Steve: Lo principal es definir un <code>bloque predeterminado sin una clase para el caso de uso más común. Entonces, cualquiera que quiera hacer lo poco común solo necesita agregar la clase. Al hacerlo de otra manera, aún se le pedirá al usuario que escriba extra. De esta manera, el usuario puede pensar que agrega una etiqueta especial en lugar de usar una estructura completamente diferente.
— slebetman
17

Para <code>uso normal en línea :

<code>...</code>

y para todos y cada uno de los lugares donde <code>se necesita bloquear

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

Alternativamente, defina una <codenza>etiqueta para el bloque de revestimiento de ruptura <code> (sin clases)

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

Pruebas: (NB: el siguiente es un SCURIple que utiliza un data:protocolo / esquema URI, por lo tanto, los %0Acódigos de formato nl son esenciales para preservarlos cuando se cortan y pegan en la barra de URL para la prueba, por lo que view-source:( ctrl- U) se ve bien antes de cada línea a continuación %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
fuente
14

Muestra el código HTML, tal cual , usando la <xmp>etiqueta (obsoleta) :

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

Es muy triste que esta etiqueta haya quedado en desuso, pero aún funciona en los navegadores, es una etiqueta mala. No es necesario escapar de nada dentro de él. ¡Que alegria!

Mostrar código HTML, tal cual , con la <textarea>etiqueta:

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

— vsync
fuente
He aquí yo estoy perdiendo algo, pero al parecer, este es el único que encontré manera de mostrar código HTML puro (para propósitos de depuración) en las plantillas de WordPress / PHP ...
— sphakka
@sphakka (& vsync), vea mi respuesta aquí sugiriendo que el uso de <textarea readonly>lo mismo hace, es actual y tiene mucho más control si lo desea.
— www-0av-Com
@ user1863152: es un mal uso de un área de texto en mi humilde opinión, ya que el código no puede ser resaltado por un script externo, como Prism, por ejemplo. y además, no se ajusta a la altura y el ancho del contenido, como lo <xmp>hace, o cualquier otro blockelemento. No lo recomendaría como una solución real, solo como una teoría.
— vsync
@vsync, sí, son caballos para los cursos (y te di un voto positivo por cierto). Yo uso textarea para mis necesidades. Intenté xmp y no recuerdo por qué encontré xmp insatisfactorio para mis necesidades. Por supuesto, su estado obsoleto ciertamente desalienta. Uso PRE cuando necesito resaltar y CODIGO para uso en línea. No puedo imaginar cómo Prism se destaca dentro de un XMP: ¿algo de magia CSS?
— www-0av-Com
No estoy muy seguro de esto. Sí, funciona, pero en desuso desde 3.2 y eliminado por completo en 5? Si bien no se han eliminado por completo muchas etiquetas de los navegadores, <blink>es un ejemplo, estaría ansioso por usar esto para cualquier cosa que necesite ser preparada para el futuro.
— spacer GIF
9

Considere TextArea

La gente para encontrar esto a través de Google y en busca de una mejor manera de administrar la visualización de sus fragmentos también debe considerar <textarea>lo que da un gran control sobre la anchura / altura, desplazamiento, etc. Observando que @vsync menciona la etiqueta en desuso <xmp>, que encuentran <textarea readonly>es un excelente sustituto para mostrar HTML sin la necesidad de escapar de nada dentro de él (excepto dónde </textarea>podría aparecer dentro).

Por ejemplo, para mostrar una sola línea con <textarea rows=1 cols=100 readonly> ajuste de línea controlado, considere su html o etc. con cualquier carácter que incluya pestañas y CrLf's</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>
Expandir fragmento

Para comparar todo ...

<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>
Expandir fragmento

— www-0av-Com
fuente
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.