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

336

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

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

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

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

html semantic-markup Стив Беннетт
источник
3
Используйте Google Chrome и просмотрите блог Рика Страля : weblog.west-wind.com/posts/2016/May/23/… затем используйте его атрибуты таблицы стилей. Его фрагменты кода очень чистые и их легко копировать / читать.
JoshYates1980
1
<pre>и его поведение можно помнить как слово « точно»
snr

Ответы:

352

Используйте <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>
Джош Ли
источник
8
Это может быть правильный путь, но я все еще думаю, что это глупо. Разработчики HTML предвидели необходимость <code>тега, но решили, что мы будем писать только одну строку? Или я думаю, потому что они не хотели иметь два тега, один блок и один встроенный? Тем не менее ... что плохого в создании <code>блочного уровня с помощью CSS? Я думал, что мы должны были написать «семантический» HTML. <code>это хорошо и семантически, но <pre>не так много.
mpen
11
Я не согласен. Противоположность предварительно отформатированному тексту - просто старый текст в вашем документе. Создание <code>блочного уровня с помощью CSS не является семантическим. Этот способ рекомендуется в HTML5 .
Джош Ли
1
Проблема в <pre>том, что он также изменяет обработку пробелов: все пробелы сохраняются, а перенос отключен. Разве есть способ выключить это?
Стив Беннетт
3
@ Стив Беннет, в CSS white-space: normal;Хотя я не понимаю, почему вы сделали бы это для кода. Также это <pre><code>глупо, <pre>тег очень четко определен в стандартах как «компьютерный код» (и другие вещи), как упомянуто @jleedev. Это потому, что вы думаете, что <code>это лучшее имя? извините, это не делает его более семантическим. С тэгом есть похожий случай, на <address>самом деле он не звучит как «автор», но стандарт гласит, что это то, для чего он есть, так что он есть.
srcspider
6
-1. Основной вопрос ОП был о том, как выполнить блочные фрагменты, которые переносятся. Вы обратились к встроенному коду, а также к блочному коду, который не должен переноситься, но это не решает основной вопрос OP.
Асад Саидуддин
80

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

Стив Беннетт
источник
41

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

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

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

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

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

slebetman
источник
да, я тоже так начинаю думать. Я просил решение без классов, но, похоже, что нет хорошего.
Стив Беннетт
3
@Steve: Главное - определить <code>блок по умолчанию без класса для наиболее распространенного варианта использования. Тогда любому, кто хочет сделать необычную вещь, нужно только добавить класс. Делая это любым другим способом, вы по-прежнему будете просить пользователя ввести extra. Таким образом, пользователь может думать об этом как о добавлении специального тега, а не об использовании совершенно другой структуры.
Slebetman
17

Для обычного встроенного <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>`

Тестирование: (примечание: ниже приведен сценарий, использующий 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>
Ekim
источник
14

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

<xmp>
<div>
  <input placeholder='write something' value='test'>
</div>
</xmp>
Развернуть фрагмент

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

Показать HTML-код, как есть , используя <textarea>тег:

<textarea readonly rows="4" style="background:none; border:none; resize:none; outline:none; width:100%;">
<div>
  <input placeholder='write something' value='test'>
</div>
</textarea>
Развернуть фрагмент

VSync
источник
Я, конечно, что-то упускаю, но, видимо, это единственный способ найти необработанный HTML-код (для целей отладки) в шаблонах WordPress / PHP ...
sphakka
@sphakka (& vsync), см. мой ответ здесь, предлагающий использование, <textarea readonly>которое делает то же самое, актуально и имеет гораздо больший контроль, если хотите.
www-0av-Com
@ user1863152 - это очень плохое использование текстового поля IMHO, так как код не может быть выделен внешним скриптом, например, Prism . а также, он не соответствует высоте и ширине содержимого, как это <xmp>делает любой другой blockэлемент. Я бы не рекомендовал его как реальное решение, только как теоретическое.
vsync
@ vsync, да, это лошади для курсов (и я, кстати, дал тебе голос). Я использую textarea для своих нужд. Я попробовал xmp и не могу вспомнить, почему я нашел xmp неудовлетворительным для моих нужд. Конечно, его устаревший статус определенно обескураживает. Я использую PRE, когда мне нужно выделить и CODE для встроенного использования. Я не могу себе представить, как Prism выделяется в XMP - какое-то волшебство CSS?
www-0av-Com
Я не слишком уверен в этом. Да, работает, но устарела с 3.2 и полностью удалена через 5? Хотя не многие теги были полностью удалены из браузеров - <blink>это один из примеров - я хотел бы использовать это для всего, что должно быть ориентировано на будущее.
spacer GIF
9

Рассмотрим 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>
Развернуть фрагмент

WWW-0av-Com
источник