<code> vs <pre class="prettyprint-override"> vs <samp> for inline and block code snippets

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

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

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

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

ОТВЕТЫ

Ответ 1

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

code { 
    background: hsl(220, 80%, 90%); 
}

pre {
    white-space: pre-wrap;
    background: hsl(30,80%,90%);
}
Here an example demonstrating the <code>&lt;code&gt;</code> tag.

<pre>
Here 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>

Ответ 2

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

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

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

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

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

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

[...]

Чтобы представить блок компьютерного кода, элемент pre может использоваться с элементом кода; для представления блока выходных данных компьютера элемент pre может использоваться с элементом samp. Аналогично, элемент 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>

Ответ 3

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

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

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

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

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

Ответ 4

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

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

Ответ 5

Для нормального встроенного <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: следующее: scURIple использует протокол/схему 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>

Ответ 6

Рассмотрим TextArea

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

Например, чтобы отобразить одну строку с контролируемой переноской строки, рассмотрите < textarea rows = 1 cols = 100 readonly > ваш html или и т.д. с любыми символами, включая вкладки и CrLf </textarea>.

  < textarea rows = 5 cols = 100 readonly > Пример текста с Newlines,
вкладки & пространство,
 html-теги и т.д. отображается </b>.
   Однако следует отметить, что & все еще действует как побег char..
     Например: & lt; u & gt; (текст) & lt;/u & gt;
& Л; /& TextArea GT;код>

Ответ 7

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

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