it-swarm.com.ru

<code> vs <pre> vs <samp> для встроенных и блочных фрагментов кода

Мой сайт будет иметь некоторый встроенный код ("при ​​использовании функции foo() ...") и некоторые фрагменты блоков. Это, как правило, XML и очень длинные строки, которые я предпочитаю обернуть в браузере (то есть я не хочу использовать <pre>). Я также хотел бы поместить форматирование CSS в фрагменты блока.

Кажется, что я не могу использовать <code> для обоих, потому что, если я добавлю атрибуты блока CSS на него (с display: block;), это сломает встроенные фрагменты.

Мне любопытно, что люди делают. Использовать <code> для блоков и <samp> для встроенного? Использовать <code><blockquote> или что-то подобное?

Я хотел бы сохранить фактический HTML как можно более простым, избегая классов, так как другие пользователи будут его поддерживать.

305
Steve Bennett

Что-то, что я полностью упустил: поведение <pre> без упаковки можно контролировать с помощью CSS. Так что это дает точный результат, который я искал:

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/

72
Steve Bennett

Используйте <code> для встроенного кода, который может переноситься, и <pre><code> для блочного кода, который не должен переноситься. <samp> предназначен для вывода примера , поэтому я бы не использовал его для представления примера кода (который читатель должен вводить (== --- ==) ). Это то, что делает переполнение стека.

(Еще лучше, если вы хотите легко поддерживать, пусть пользователи редактируют статьи как Markdown, тогда им не нужно забывать использовать <pre><code>.)

HTML5 согласен с этим в "элемент pre" :

Элемент pre представляет собой блок предварительно отформатированного текста, в котором структура представлена ​​типографскими соглашениями, а не элементами.

Некоторые примеры случаев, когда можно использовать элемент pre:

  • Включая фрагменты компьютерного кода, структура которого указана в соответствии с соглашениями этого языка.

[...]

Для представления блока компьютерного кода элемент pre может использоваться с элементом code; для представления блока вывода на компьютер предварительный элемент может использоваться с элементом выборки. Точно так же элемент kbd может использоваться в элементе pre для указания текста, который должен ввести пользователь.

В следующем фрагменте представлен образец компьютерного кода.

<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>
322
Josh Lee

Лично я бы использовал <code>, потому что это наиболее семантически правильно. Затем, чтобы провести различие между встроенным и блочным кодом, я бы добавил класс:

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

для встроенного кода или:

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

для блока кода. В зависимости от того, что встречается реже.

36
slebetman

Показать HTML-код, как есть , используя (устаревший) <xmp> тег:

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

Очень грустно, что этот тег устарел, , но он все еще работает в браузерах, это плохой тег. не нужно ничего избегать внутри него. Какая радость!

14
vsync

Для обычного встроенного <code> используйте:

<code>...</code>

и для каждого места, где необходимо заблокировать <code>, используйте

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

В качестве альтернативы, определите тег <codenza> для блока разрыва подкладки <code> (без классов)

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

Тестирование: (NB: ниже приведен сценарий, использующий протокол/схему URI data:, поэтому коды формата %0A nl являются необходимыми для сохранения таких при вырезании и вставить в строку URL для тестирования - так view-source: (ctrl-U) хорошо выглядит перед каждой строкой ниже с %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>
13
ekim

Рассмотрим TextArea

Люди, находящие это через Google и ищущие лучший способ управления отображением своих фрагментов, должны также рассмотреть <textarea>, который дает большой контроль над шириной/высотой, прокруткой и т.д. Отметив, что @vsync упомянул устаревший тег <xmp>, я считаю, что <textarea readonly> отличная замена для отображения HTML без необходимости экранирования чего-либо внутри него (кроме случаев, когда </textarea> может появиться внутри).

Например, чтобы отобразить одну строку с контролируемым переносом строк, рассмотрите <textarea rows=1 cols=100 readonly> ваш html или т.д. С любыми символами, включая вкладки и 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>

Чтобы сравнить все ...

<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>
4
www-0av-Com

Рассмотрим Prism.js: https://prismjs.com/#examples

Это заставляет <pre><code> работать и привлекательно.

2
Michael Cole