<code> vs <pre> vs <samp> dla wstawianych i blokowych fragmentów kodu

335

Moja witryna będzie zawierać trochę kodu wbudowanego („podczas korzystania z foo()funkcji ...”) i fragmenty bloków. Zwykle są to XML i mają bardzo długie linie, które wolę, aby przeglądarka je zawijała (tzn. Nie chcę ich używać <pre>). Chciałbym również umieścić formatowanie CSS we fragmentach bloku.

Wygląda na to, że nie mogę używać <code>obu, ponieważ jeśli dodam do niego atrybuty bloku CSS (z display: block;), spowoduje to uszkodzenie wbudowanych fragmentów kodu .

Jestem ciekawa, co ludzie robią. Używać <code>do bloków i <samp>do wbudowania? Użyj <code><blockquote>czy coś podobnego?

Chciałbym, aby rzeczywisty HTML był tak prosty, jak to możliwe, unikając zajęć, ponieważ inni użytkownicy będą go utrzymywać.

html semantic-markup Steve Bennett
źródło
3
Użyj Google Chrome i sprawdź blog Ricka Strahla : weblog.west-wind.com/posts/2016/May/23/…, a następnie użyj jego atrybutów arkusza stylów. Fragmenty kodu są bardzo czyste i łatwe do skopiowania / odczytania.
JoshYates1980
1
<pre>a jego zachowanie można zapamiętać jako słowo „ dokładnie”
snr

Odpowiedzi:

351

Użyj <code>dla kodu wbudowanego, który może się zawijać oraz <pre><code>do kodu blokowego, który nie może się zawijać. <samp>jest dla przykładowego wyjścia , więc unikałbym używania go do reprezentowania przykładowego kodu (który czytnik ma wprowadzić ). To właśnie robi przepełnienie stosu.

(Jeszcze lepiej, jeśli chcesz łatwo utrzymać, pozwól użytkownikom edytować artykuły jako Markdown, wtedy nie muszą pamiętać, aby z nich korzystać <pre><code>).

HTML5 zgadza się z tym w „ preelemencie” :

Pre element reprezentuje blok wstępnie sformatowanego tekstu, w którym strukturę reprezentują konwencje typograficzne, a nie elementy.

Kilka przykładów przypadków, w których można użyć elementu wstępnego:

  • W tym fragmenty kodu komputerowego o strukturze wskazanej zgodnie z konwencjami tego języka.

[…]

Aby przedstawić blok kodu komputerowego, elementu wstępnego można użyć z elementem kodu; do reprezentowania bloku wyjścia komputerowego można użyć elementu wstępnego z elementem samp. Podobnie, element kbd może być użyty w elemencie wstępnym do wskazania tekstu, który użytkownik ma wprowadzić.

W poniższym fragmencie przedstawiono próbkę kodu komputerowego.

<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>
Josh Lee
źródło
8
To może być właściwa droga, ale nadal uważam, że to głupie. Twórcy HTML przewidzieli potrzebę użycia <code>tagu, ale postanowili napisać tylko jedną linię? A może chyba dlatego, że nie chcieli mieć dwóch tagów, jednego bloku i jednego wbudowanego? Nadal ... co jest złego w tworzeniu <code>poziomu bloku za pomocą CSS? Myślałem, że powinniśmy napisać „semantyczny” HTML. <code>jest dobry i semantyczny, ale <pre>nie tak bardzo.
mpen
11
Nie zgadzam się. Przeciwieństwem wstępnie sformatowanego tekstu jest po prostu stary tekst w dokumencie. Tworzenie <code>bloków za pomocą CSS jest nieprzyjemne. Ten sposób jest zalecany w HTML5 .
Josh Lee
1
Problem <pre>polega na tym, że modyfikuje również przetwarzanie białych znaków: wszystkie spacje są zachowane, a zawijanie jest wyłączone. Chyba że istnieje sposób, aby to wyłączyć?
Steve Bennett
3
@ Steve Bennett, w CSS white-space: normal;Chociaż nie rozumiem, dlaczego zrobiłbyś to dla kodu. Również to <pre><code>jest głupie, <pre>znacznik jest bardzo wyraźnie zdefiniowany w standardach jako „kod komputerowy” (i inne rzeczy), jak wspomniano w @jleedev. Czy dlatego, że uważasz, że <code>to lepsze imię? przepraszam, że to nie czyni tego bardziej semantycznym. Jest podobny przypadek z tagiem <address>, tak naprawdę nie brzmi jak „autor”, ale standard mówi, że po to jest, więc jest.
srcspider
6
-1. Centralne pytanie OP dotyczyło sposobu, w jaki można uzyskać fragmenty bloku, które się zawijają. Zaadresowałeś kod wbudowany, a także kod blokowy, który nie może się owijać, ale to nie dotyczy podstawowego pytania PO.
Asad Saeeduddin
80

Coś, za czym całkowicie tęskniłem: nieokreślające zachowanie <pre>można kontrolować za pomocą CSS. To daje dokładny wynik, którego szukałem:

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>
Rozwiń fragment kodu

http://jsfiddle.net/9mCN7/

Steve Bennett
źródło
41

Osobiście skorzystałbym, <code>bo to jest najbardziej poprawne semantycznie. Następnie, aby rozróżnić kod wbudowany i blokowy, dodam klasę:

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

dla kodu wbudowanego lub:

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

dla bloku kodu. W zależności od tego, który jest mniej powszechny.

Slebetman
źródło
tak, też zaczynam tak myśleć. Poprosiłem o rozwiązanie bez zajęć, ale wygląda na to, że nie ma dobrego.
Steve Bennett
3
@ Steve: Najważniejsze jest zdefiniowanie domyślnego <code>bloku bez klasy dla najczęstszego przypadku użycia. Wtedy każdy, kto chce zrobić coś niezwykłego, musi tylko dodać klasę. Wykonanie tego w inny sposób będzie nadal wymagało od użytkownika wpisania dodatkowego. W ten sposób użytkownik może myśleć o tym jako o dodaniu specjalnego znacznika zamiast o zupełnie innej strukturze.
slebetman 9.01.11
17

Do normalnego <code>użytkowania:

<code>...</code>

i do każdego miejsca, gdzie <code>potrzebne jest zablokowanie , użyj

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

Alternatywnie, zdefiniuj <codenza>znacznik dla bloku podszewki przerwania <code> (bez klas)

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

Testowanie: (NB: poniżej jest rysunek wykorzystujący data:protokół / schemat URI, dlatego %0Akody w formacie nl są niezbędne do zachowania takich, gdy są wycinane i wklejane do paska adresu URL do testowania - więc view-source:( ctrl- U) wygląda dobrze przed każdą linią poniżej %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
źródło
14

Pokaż kod HTML w obecnej postaci , używając <xmp>tagu (przestarzały) :

<xmp>
<div>
  <input placeholder='write something' value='test'>
</div>
</xmp>
Rozwiń fragment kodu

To bardzo smutne, że ten tag jest przestarzały, ale nadal działa w przeglądarkach, jest to zły tag. nie trzeba niczego uciekać. Co za radość!

Pokaż kod HTML w obecnej postaci , używając <textarea>tagu:

<textarea readonly rows="4" style="background:none; border:none; resize:none; outline:none; width:100%;">
<div>
  <input placeholder='write something' value='test'>
</div>
</textarea>
Rozwiń fragment kodu

vsync
źródło
Z pewnością czegoś brakuje, ale najwyraźniej jest to jedyny sposób, w jaki znalazłem sposób wyświetlania surowego kodu HTML (do celów debugowania) w szablonach WordPress / PHP ...
sphakka
@sphakka (i vsync), zobacz moją odpowiedź tutaj sugerującą, że użycie <textarea readonly>robi to samo, jest aktualne i ma znacznie większą kontrolę, jeśli chcesz.
www-0av-Com
@ user1863152 - jest to bardzo złe użycie obszaru tekstowego IMHO, ponieważ kodu nie można podświetlić zewnętrznym skryptem, takim jak na przykład Prism . a także nie pasuje do wysokości i szerokości treści, tak jak <xmp>robi to, lub jakikolwiek inny blockelement .. nie poleciłbym tego jako prawdziwego rozwiązania, tylko teoretycznego.
vsync
@vsync, tak, to konie na kursy (i dałem ci upvote btw). Używam textarea do moich potrzeb. Próbowałem xmp i nie mogę sobie przypomnieć, dlaczego uważam, że xmp nie spełnia moich wymagań. Oczywiście jego przestarzały status z pewnością zniechęca. Używam PRE, gdy muszę wyróżnić i KOD do użytku w trybie inline. Nie mogę sobie wyobrazić, jak Prism wyróżnia się w XMP - jakieś czarodziejstwo CSS?
www-0av-Com
Nie jestem tego zbyt pewien. Tak, działa, ale przestarzałe od wersji 3.2 i całkowicie usunięte w wersji 5? Chociaż niewiele przeglądarek zostało całkowicie usuniętych z przeglądarek - <blink>to jeden z przykładów - chciałbym używać tego do wszystkiego, co musi być przyszłościowe.
spacer GIF
9

Zastanów się nad TextArea

Ludzie znajdujący to za pośrednictwem Google i szukający lepszego sposobu zarządzania wyświetlaniem swoich fragmentów kodu powinni również rozważyć, <textarea>co daje dużą kontrolę nad szerokością / wysokością, przewijaniem itp. Zwracając uwagę, że @vsync wspomniało o przestarzałym tagu <xmp>, uważam go za <textarea readonly>doskonały zamiennik do wyświetlania HTML bez konieczności ucieczki od wszystkiego (poza miejscem, w którym </textarea>może się pojawić).

Na przykład, aby wyświetlić pojedynczą linię z kontrolowanym zawijaniem linii, rozważ <textarea rows=1 cols=100 readonly> swój HTML lub etc z dowolnymi znakami, w tym tabulatorami i 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>
Rozwiń fragment kodu

Aby porównać wszystkie ...

<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>
Rozwiń fragment kodu

www-0av-Com
źródło