html - etiqueta - <code> vs<pre> vs<samp> para fragmentos de código en línea y de bloque
etiqueta pre (6)
Mi sitio tendrá algún código en línea ("cuando use la función foo() ...") y algunos fragmentos de bloques. 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 le puse atributos de bloque CSS (con display: block; ), romperá los fragmentos de línea.
Tengo curiosidad por lo que hace la gente. Use <code> para bloques, y <samp> para en línea? ¿Utiliza <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.
Muestre el código HTML, tal como está , usando la etiqueta <xmp> (obsoleta):
<xmp>
<input placeholder=''write something'' value=''test''>
</xmp>
<xmp>
<input placeholder=''write something'' value=''test''>
</xmp>
Es muy triste que esta etiqueta haya quedado en desuso, pero aún funciona en los navegadores, es una etiqueta mala. No hay necesidad de escapar de nada dentro de él. ¡Que alegria!
Algo que me perdí por completo: el comportamiento de no envoltorio de <pre> se puede controlar con CSS. Así que 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><code></code> tag.
<pre>
Here''s a very long pre-formatted formatted using the <pre> 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>
Para uso normal de <code> :
<code>...</code>
y para todos y cada uno de los lugares donde se necesita usar <code> bloqueado
<code style=display:block;white-space:pre-wrap>...</code>
Alternativamente, defina una etiqueta <codenza> para el bloque de alineación <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 data: protocolo / esquema URI, por lo tanto, los códigos de formato %0A nl son esenciales para preservar dichos datos cuando se cortan y pegan en la barra de URL para realizar las pruebas, por lo que view-source: ( ctrl - U ) se ve bien antes de cada línea abajo con %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 <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>
Personalmente usaría <code> porque eso es lo más semánticamente correcto. Luego, para diferenciar entre el código en línea y el código de bloque, yo agregaría una clase:
<code class="inlinecode"></code>
para el código en línea o:
<code class="codeblock"></code>
para el bloque de código. Dependiendo de lo que sea menos común.
Use <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, así que evitaría usarla para representar código de muestra (que el lector debe ingresar ). Esto es lo que hace .
(Mejor aún, si desea que sea fácil de mantener, permita que los usuarios editen los artículos como Markdown, entonces no tienen que acordarse de utilizar <pre><code> ).
HTML5 está de acuerdo con esto en "el elemento pre " :
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 donde el elemento pre podría ser utilizado:
- Incluyendo fragmentos de código informático, con estructura indicada según las convenciones de ese idioma.
[…]
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 computadora, el elemento pre puede usarse con un elemento samp. De manera similar, el elemento kbd se puede usar dentro de un elemento pre para indicar el texto que el usuario debe ingresar.
En el siguiente fragmento de código, 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>
Considere TextArea
Las personas que encuentren esto a través de Google y busquen una mejor manera de administrar la visualización de sus fragmentos de código también deben considerar <textarea> que ofrece mucho control sobre el ancho / alto, el desplazamiento, etc. Observando que @vsync mencionó la etiqueta obsoleta <xmp> , Encuentro que <textarea readonly> es un excelente sustituto para mostrar HTML sin la necesidad de escapar de cualquier cosa que esté dentro (excepto donde </textarea> pueda aparecer).
Por ejemplo, para mostrar una sola línea con ajuste de línea controlado, considere <textarea rows=1 cols=100 readonly> su html o etc con cualquier carácter, incluidas las 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 & still acts as an escape char..
Eg: <u>(text)</u>
</textarea>
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 & still acts as an escape char..
Eg: <u>(text)</u></textarea>
<xmp>XMP: Example text with Newlines,
tabs & space,
html tags etc <b>displayed natively</b>.
However, note that & (&) will not act as an escape char..
Eg: <u>(text)</u>
</xmp>
<pre>PRE: Example text with Newlines,
tabs & space,
html tags etc <b>are interpreted, not displayed</b>.
However, note that & still acts as an escape char..
Eg: <u>(text)</u>
</pre>
<samp>SAMP: Example text with Newlines,
tabs & space,
html tags etc <b>are interpreted, not displayed</b>.
However, note that & still acts as an escape char..
Eg: <u>(text)</u>
</samp>
<code>CODE: Example text with Newlines,
tabs & space,
html tags etc <b>are interpreted, not displayed</b>.
However, note that & still acts as an escape char..
Eg: <u>(text)</u>
</code>