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.
<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.
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>
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><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>
<code class="inlinecode"></code>
Para código inline ou:
<code class="codeblock"></code>
Para bloco de código. Dependendo do que for menos comum.
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 <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>
Mostrar o código HTML, as-is , Usando o (obsoleto) <xmp>
Marca:
<xmp>
<input placeholder='write something' value='test'>
</xmp>
<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!
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 & still acts as an escape char..
Eg: <u>(text)</u>
</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 & 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>