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

335

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

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

Мені цікаво, що роблять люди. Використовувати як <code>для блоків, так і <samp>для вбудованих? Використовуєте <code><blockquote>чи щось подібне?

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

html  semantic-markup 
— Стів Беннетт
джерело
3
Використовуйте Google Chrome і перегляньте блог Ріка Страля : weblog.west-wind.com/posts/2016/May/23/…, а потім скористайтеся його атрибутами таблиці стилів. Його фрагменти коду дуже чисті та легкі для копіювання / читання.
— JoshYates1980
1
<pre>і його поведінка може мати на увазі , як слово «попередньо cisely»
— ЗСШ

Відповіді:

351

Використовуйте <code>для вбудованого коду, який може обгортати, і <pre><code>для блочного коду, який не повинен завершуватися. <samp>призначений для виведення зразка , тому я б уникав використовувати його для представлення зразкового коду (який слід вводити читачеві ). Це те, що робить переповнення стека.

(Ще краще, якщо ви хочете просте у догляді, нехай користувачі редагують статті як Markdown, тоді вони не повинні пам'ятати, щоб використовувати <pre><code>.)

HTML5 погоджується з цим у " preелементі" :

Попередній елемент являє собою блок попередньо відформатованого тексту, структура якого представлена ​​типографічними умовами, а не елементами.

Деякі приклади випадків, коли попередній елемент можна було використовувати:

  • У тому числі фрагменти комп’ютерного коду зі структурою, зазначеною згідно з умовами цієї мови.

[…]

Щоб представити блок комп'ютерного коду, попередній елемент може використовуватися з кодовим елементом; для подання блоку комп'ютерного виводу попередній елемент може використовуватися з елементом samp. Аналогічно, елемент kbd може використовуватися в попередньому елементі для позначення тексту, який повинен вводити користувач.

У наступному фрагменті представлений зразок комп'ютерного коду.

<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
@Steve Bennett, в CSS white-space: normal;Хоча я не розумію, чому ви зробите це для коду. Також ця <pre><code>річ дурна, <pre>тег у стандартах дуже чітко визначений як "комп'ютерний код" (та інші речі), як згадував @jleedev. Це тому, що, на вашу думку <code>, краще ім’я? Вибачте, що це не робить його більш смисловим. Існує подібний випадок з тегом <address>, він насправді не звучить як "автор", але стандарт говорить, що для чого це так, так воно і є.
— srcspider
6
-1. Основне питання ОП полягало у тому, як виконати блок-фрагменти, які завершуються. Ви звернулися до вбудованого коду, а також до коду блоку, який не повинен завершуватися, але це не стосується основного питання ОП.
— Асад Саєдюддін
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>

для блоку коду. Залежно від того, що є менш поширеним.

— слебетмен
джерело
так, я теж починаю так думати. Я попросив рішення без занять, але, схоже, немає хорошого.
— Стів Беннетт
3
@Steve: Головне - визначити <code>блок за замовчуванням без класу для найпоширенішого випадку використання. Тоді всім, хто хоче зробити незвичайну річ, потрібно лише додати клас. Робити це будь-яким іншим способом, все одно буде просити користувача ввести додатково. Таким чином користувач може вважати це як додавання спеціального тегу, а не використання абсолютно іншої структури.
— 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>
— екім
джерело
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, так, це коні на курси (& я дав вам нагороду btw). Я використовую textarea для своїх потреб. Я спробував xmp і не можу згадати, чому я вважав xmp незадовільним для моїх потреб. Звичайно, його застарілий статус, безумовно, відлякує. Я використовую PRE, коли мені потрібно виділити та КОДУ для вбудованого використання. Я не уявляю, як призма виділяється в XMP - якийсь майстер CSS?
— www-0av-Com
Я не надто впевнений у цьому. Так, він працює, але застарілий з 3.2 та видалений повністю через 5? Хоча не багато тегів було повністю вилучено з браузерів - <blink>це один із прикладів, я б дуже хотів використовувати це для всього, що повинно бути надійним.
— спейсер 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
джерело
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.