<code> против <pre>против <samp>для встроенных и блочных фрагментов кода - PullRequest
305 голосов
/ 06 января 2011

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

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

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

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

Ответы [ 7 ]

324 голосов
/ 06 января 2011

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

(Еще лучше, если вы хотите легко поддерживать, пусть пользователи редактируют статьи как 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() };
}
72 голосов
/ 29 ноября 2011

Что-то, что я полностью пропустил: поведение без упаковки <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> tag.


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

http://jsfiddle.net/9mCN7/

36 голосов
/ 06 января 2011

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

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

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

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

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

14 голосов
/ 28 января 2017

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

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

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

13 голосов
/ 02 августа 2015

Для обычного встроенного <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: ниже приведен сценарий, использующий протокол data: URI/ схема, поэтому коды формата %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>
5 голосов
/ 19 марта 2018

Рассмотрим 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>

Сравнивать все ...

Compared: TEXTAREA, XMP, PRE, SAMP, CODE
Note that CSS can be used to override default fixed space fonts in each or all these.
    
    


XMP: Example text with Newlines,
tabs & space,
  html tags etc displayed natively.
    However, note that & (&) will not act as an escape char..
      Eg: <u>(text)</u>


PRE: Example text with Newlines,
tabs & space,
  html tags etc are interpreted, not displayed.
    However, note that & still acts as an escape char..
      Eg: <u>(text)</u>
SAMP: пример текста с символами новой строки, вкладки и пробел, HTML теги и т. д. интерпретируются, а не отображаются . Однако обратите внимание, что & amp; по-прежнему действует как побег чар .. Например: & lt; u & gt; (текст) & lt; / u & gt; 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;
2 голосов
/ 10 января 2019

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

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

...