<code> vs <pre> vs <samp> para trechos de código inline e de bloco

335

Meu site terá algum código embutido ("ao usar a foo()função ...") e alguns trechos de bloco. Eles tendem a ser XML e têm linhas muito longas que eu prefiro que o navegador agrupe (ou seja, não quero usar <pre>). Eu também gostaria de colocar a formatação CSS nos trechos do bloco.

Parece que não posso usar <code>para ambos, porque se eu colocar atributos de bloco CSS nele (com display: block;), ele quebrará os trechos inline.

Estou curioso para saber o que as pessoas fazem. Use <code>para blocos e <samp>para inline? Use <code><blockquote>ou algo semelhante?

Eu gostaria de manter o HTML real o mais simples possível, evitando classes, pois outros usuários o manterão.

html semantic-markup Steve Bennett
fonte
3
Use o Google Chrome e inspecione o blog de Rick Strahl: weblog.west-wind.com/posts/2016/May/23/… e use os atributos da folha de estilo. Seus trechos de código são muito limpos e fáceis de copiar / ler.
precisa saber é o seguinte
11
<pre>e seu comportamento pode ser mantido em mente que a palavra “pré precisamente”
snr

Respostas:

351

Use <code>para código embutido que pode quebrar e <pre><code>para código de bloco que não deve quebrar. <samp>é para saída de amostra , portanto, evitaria usá-lo para representar o código de amostra (que o leitor deve inserir ). É isso que o Stack Overflow faz.

(Melhor ainda, se você quiser uma manutenção fácil, permita que os usuários editem os artigos como Markdown, eles não precisam se lembrar de usá-los <pre><code>.)

O HTML5 concorda com isso no " preelemento" :

O elemento pre representa um bloco de texto pré-formatado, no qual a estrutura é representada por convenções tipográficas e não por elementos.

Alguns exemplos de casos em que o elemento pre pode ser usado:

  • Incluindo fragmentos de código de computador, com estrutura indicada de acordo com as convenções dessa linguagem.

[...]

Para representar um bloco de código de computador, o elemento pre pode ser usado com um elemento de código; para representar um bloco de saída do computador, o pré-elemento pode ser usado com um elemento samp. Da mesma forma, o elemento kbd pode ser usado dentro de um pré elemento para indicar o texto que o usuário deve inserir.

No fragmento a seguir, é apresentada uma amostra do código do computador.

<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
fonte
8
Este pode ser o caminho correto a seguir, mas ainda acho que é estúpido. Os desenvolvedores de HTML previram a necessidade de uma <code>tag, mas decidiram que apenas escreveríamos uma linha? Ou eu acho, porque eles não queriam ter duas tags, uma bloco e uma inline? Ainda assim ... o que há de errado em criar <code>um nível de bloco com CSS? Eu pensei que deveríamos escrever HTML "semântico". <code>é bom e semântico, mas <pre>não tanto.
MPEN
11
Discordo. O oposto do texto pré-formatado é apenas texto antigo simples em seu documento. Tornar o <code>nível de bloco com CSS não é semântico. Dessa forma, é recomendado em HTML5 .
21711 Josh Lee
11
O problema <pre>é que ele também modifica o processamento de espaço em branco: todos os espaços são preservados e o empacotamento é desativado. A menos que haja uma maneira de desligar isso?
Steve Bennett
3
@ Steve Bennett, em CSS white-space: normal;Embora eu não consiga entender por que você faria isso por código. Além disso, isso <pre><code>é estúpido, a <pre>tag é definida muito claramente nos padrões como "código de computador" (e outras coisas), como mencionado por @jleedev. É porque você acha que <code>é um nome melhor? desculpe por não torná-lo mais semântico. Existe um caso semelhante com a tag <address>, que realmente não soa como "autor", mas o padrão diz que é para isso que serve.
Srcpider
6
-1. A questão central do OP era sobre como realizar snippets de bloco que envolvem. Você abordou o código embutido, bem como o código de bloco que não deve quebrar, mas isso não aborda a questão principal do OP.
Asad Saeeduddin
80

Algo que eu perdi completamente: o comportamento de não empacotar <pre>pode ser controlado com CSS. Portanto, isso fornece o resultado exato que eu estava procurando:

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 snippet

http://jsfiddle.net/9mCN7/

Steve Bennett
fonte
41

Pessoalmente, eu usaria <code>porque é o mais semanticamente correto. Em seguida, para diferenciar entre código inline e código de bloco, eu adicionaria uma classe:

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

para código embutido ou:

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

para bloco de código. Dependendo do que é menos comum.

slebetman
fonte
Sim, também estou começando a pensar. Pedi uma solução sem aulas, mas parece que não há uma boa.
Steve Bennett
3
@ Steve: O principal é definir um <code>bloco padrão sem uma classe para o caso de uso mais comum. Então, qualquer pessoa que queira fazer algo incomum precisa apenas adicionar a classe. Fazer isso de qualquer outra maneira ainda exigirá que o usuário digite extra. Dessa forma, o usuário pode pensar nisso como adicionar uma tag especial em vez de usar uma estrutura completamente diferente.
Slebetman
17

Para <code>uso normal embutido :

<code>...</code>

e para todo e qualquer lugar onde <code>é necessário bloquear, use

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

Como alternativa, defina uma <codenza>tag para o bloco de forro de quebra <code> (sem classes)

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

Teste: (NB: o seguinte é um scURIple utilizando um data:protocolo / esquema URI, portanto, os %0Acódigos de formato nl são essenciais para preservá- los quando cortados e colados na barra de URL para teste - para que view-source:( ctrl- U) pareça bom antes de todas as linhas abaixo %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
fonte
14

Mostre o código HTML, como está , usando a <xmp>tag (obsoleta) :

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

É muito triste que essa tag tenha sido descontinuada, mas ainda funciona em navegadores, é uma tag ruim. não há necessidade de escapar de nada dentro dela. Que alegria!

Mostre o código HTML, como está , usando a <textarea>tag:

<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 snippet

vsync
fonte
Estou certamente faltando alguma coisa, mas, aparentemente, esta é a única maneira que eu encontrei para mostrar o código HTML puro (para fins de depuração) em templates WordPress / PHP ...
sphakka
@sphakka (& vsync), veja minha resposta aqui, sugerindo que o uso <textarea readonly>faz o mesmo, é atual e tem muito mais controle, se você desejar.
www-0av-Com
@ user1863152 - é um uso muito ruim de uma IMHO de área de texto, pois o código não pode ser destacado por scripts externos, como o Prism, por exemplo. e também, ele não se encaixa na altura e largura do conteúdo, como <xmp>faz, ou em qualquer outro blockelemento. Eu não o recomendaria como uma solução real, apenas como teórica.
vsync
@ Vsync, sim, é cavalos para cursos (e eu te dei um btw upvote). Eu uso a área de texto para minhas necessidades. Tentei o xmp e não consigo me lembrar por que achei o xmp insatisfatório para minhas necessidades. É claro que seu status obsoleto certamente desencoraja. Uso PRE quando preciso destacar e CÓDIGO para uso em linha. Não consigo imaginar como o Prism se destaca dentro de um XMP - algum tipo de magia CSS?
www-0av-Com 21/0318
Não tenho muita certeza disso. Sim, funciona, mas foi descontinuado desde 3.2 e removido completamente em 5? Embora poucas tags tenham sido completamente removidas dos navegadores - <blink>é um exemplo -, eu ficaria ansioso em usar isso para qualquer coisa que precise ser preparada para o futuro.
espaçador GIF
9

Considere TextArea

Pessoas encontrar esta via Google e à procura de uma maneira melhor de gerenciar a exibição de seus trechos também deve considerar <textarea>o que dá um grande controle sobre a largura / altura, a rolagem etc. Observando que @vsync mencionou a tag deprecated <xmp>, acho que <textarea readonly>é um excelente substituto para exibir HTML sem a necessidade de escapar de qualquer coisa dentro dele (exceto onde </textarea>possa aparecer dentro).

Por exemplo, para exibir uma única linha com quebra de linha controlada, considere <textarea rows=1 cols=100 readonly> seu html ou etc com qualquer caractere, incluindo tabulações e CrLfs </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 snippet

Para comparar tudo ...

<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 snippet

www-0av-Com
fonte