vs Para excertos de código incorporados e bloqueados

meu site vai ter algum código inline ("ao usar a função foo()...") and some block snippets. Estes tendem a ser XML, e têm linhas muito longas que eu prefiro o navegador para embrulhar (ou seja, eu não quero usar <pre>). Também gostaria de colocar a formatação CSS nos excertos do bloco.

parece que não posso usar {[[2]} para ambos, porque se eu colocar atributos de bloco CSS nele (com display: block;), ele irá quebrar os excertos incorporados.

Estou curioso sobre o que as pessoas fazem. Utilizar <code> blocos,e <samp> para a linha? Usar <code><blockquote> ou algo parecido?

Eu gostaria de manter o HTML o mais simples possível, evitando aulas, já que outros usuários o manterão.

Author: BoltClock, 2011-01-06
Source

6 answers

Usar <code> para o código inline que pode mudar de linha e <pre><code> para o código em bloco que não deve mudar de linha. <samp> é para a amostra de saída , por isso eu evitaria usá-la para representar o código de amostra (que o leitor está a de entrada). Isto é o que o Stack Overflow faz.

(Melhor ainda, se você quiser manter fácil, deixe os usuários editar os artigos como Markdown, então eles não têm que se lembrar de usar <pre><code>.)

O HTML5 concorda com isto em " o elemento pre":

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 utilizado:

  • incluindo fragmentos de código informático, com estrutura indicada de acordo com as convenções dessa língua.

[…]

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 elemento pre pode ser usado com um elemento samp. Da mesma forma, o elemento kbd pode ser usado dentro de um elemento pre para indicar o texto que o Usuário deve introduzir.

No seguinte trecho, é apresentada uma amostra do código de 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>
 301
Author: Josh Lee, 2011-02-23 02:54:52

Algo que me escapou completamente: o comportamento não envolvente de <pre> pode ser controlado com CSS. Então Isto dá 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>

Http://jsfiddle.net/9mCN7/

 63
Author: Steve Bennett, 2015-01-09 01:29:22
Pessoalmente, eu usaria {[[2]} porque isso é o mais semanticamente correto. Então, para diferenciar entre Código inline e bloco eu adicionaria uma classe: 
<code class="inlinecode"></code>

Para código inline ou: 

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

Para bloco de código. Dependendo do que for menos comum.

 34
Author: slebetman, 2011-01-06 08:27:57

Para utilização em linha normal <code>: 

<code>...</code>

E para todos os locais onde é necessário bloquear <code>, use 

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

Em alternativa, defina uma <codenza> marca do bloco de guarnição de ruptura <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 que utiliza um protocolo/esquema data:} de URI, pelo que os códigos de formato %0A de nl são essenciais para preservar tal quando cortados e colados na barra de URL para testes-so view-source: (ctrl-U parece bem precedido cada linha abaixo com %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>
 12
Author: ekim, 2015-08-07 00:39:26

Mostrar o código HTML, as-is , Usando o (obsoleto) <xmp> Marca: 

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

É muito triste que esta etiqueta tenha sido depreciada, mas Ainda funciona em navegadores, é uma etiqueta do caraças. não há necessidade de escapar a nada lá dentro. Que alegria!

 8
Author: vsync, 2017-01-30 09:07:12

Considerar TextArea

As pessoas que encontram isto através do Google e procuram uma forma melhor de gerir a visualização dos seus excertos também devem considerar {[[2]} o que dá muito controlo sobre a largura/altura, deslocamento, etc. Observando que @vsync mencionou a tag depreciada <xmp>, eu acho que <textarea readonly> é um excelente substituto para exibir HTML sem a necessidade de escapar de qualquer coisa dentro dela (exceto onde </textarea> pode aparecer dentro).

Por exemplo, para mostrar uma única linha com enrolamento de linha controlado, considere <textarea rows=1 cols=100 readonly> o seu html ou etc com quaisquer caracteres, incluindo páginas e 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>

Para comparar todos...

<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>
 3
Author: www-0av-Com, 2018-03-21 15:13:56