<code> vs <pre> vs <samp> für Inline- und Blockcode-Snippets

335

Meine Site wird Inline-Code ("bei Verwendung der foo()Funktion ...") und einige Block-Snippets enthalten. Diese sind in der Regel XML und haben sehr lange Zeilen, die der Browser lieber umschließt (dh ich möchte sie nicht verwenden <pre>). Ich möchte auch die Blockausschnitte mit CSS-Formatierung versehen.

Es scheint, dass ich nicht <code>für beide verwenden kann, denn wenn ich CSS-Blockattribute (mit display: block;) darauf setze , werden die Inline-Snippets beschädigt.

Ich bin gespannt, was die Leute machen. Verwenden Sie <code>für Blöcke und <samp>für Inline? Verwenden <code><blockquote>oder ähnliches?

Ich möchte das eigentliche HTML so einfach wie möglich halten und Klassen vermeiden, da andere Benutzer es beibehalten werden.

html semantic-markup Steve Bennett
quelle
3
Verwenden Sie Google Chrome und überprüfen Sie den Blog von Rick Strahl: weblog.west-wind.com/posts/2016/May/23/…. Verwenden Sie dann seine Stylesheet-Attribute. Seine Codefragmente sind sehr sauber und leicht zu kopieren / lesen.
JoshYates1980
1
<pre>und sein Verhalten kann als das Wort " genau"
snr

Antworten:

351

Verwenden Sie diese Option <code>für Inline-Code, der umbrochen werden kann, und <pre><code>für Blockcode, der nicht umbrochen werden darf. <samp>ist für den Probenausgang , so dass ich es vermeiden , würde repräsentieren Beispielcode (die der Leser wird mit Eingang ). Dies ist, was Stack Overflow tut.

(Besser noch, wenn Sie einfach zu warten möchten, lassen Sie die Benutzer die Artikel als Markdown bearbeiten, dann müssen sie nicht daran denken, sie zu verwenden <pre><code>.)

HTML5 stimmt dem in „dem preElement“ zu :

Das Vorelement stellt einen Block vorformatierten Textes dar, in dem die Struktur eher durch typografische Konventionen als durch Elemente dargestellt wird.

Einige Beispiele für Fälle, in denen das Pre-Element verwendet werden könnte:

  • Einschließlich Fragmente von Computercode, deren Struktur gemäß den Konventionen dieser Sprache angegeben ist.

[…]

Um einen Computercodeblock darzustellen, kann das Vorelement mit einem Codeelement verwendet werden. Um einen Block der Computerausgabe darzustellen, kann das Vorelement mit einem Samp-Element verwendet werden. In ähnlicher Weise kann das kbd-Element innerhalb eines Vorelements verwendet werden, um Text anzugeben, den der Benutzer eingeben soll.

Im folgenden Snippet wird ein Beispiel für Computercode vorgestellt.

<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
quelle
8
Dies mag der richtige Weg sein, aber ich denke immer noch, dass es dumm ist. Die HTML-Entwickler sahen die Notwendigkeit eines <code>Tags voraus , entschieden aber, dass wir immer nur eine Zeile schreiben würden? Oder ich denke, weil sie nicht zwei Tags haben wollten, einen Block und einen Inline? Trotzdem ... was ist falsch daran, <code>mit CSS Block-Level zu machen? Ich dachte, wir sollten "semantisches" HTML schreiben. <code>ist gut und semantisch, aber <pre>nicht so sehr.
Mpen
11
Ich stimme dir nicht zu. Das Gegenteil von vorformatiertem Text ist nur alter Text in Ihrem Dokument. Herstellung von <code>Blockebene mit CSS ist unsemantic. Dieser Weg wird in HTML5 empfohlen .
Josh Lee
1
Das Problem dabei <pre>ist, dass auch die Whitespace-Verarbeitung geändert wird: Alle Leerzeichen bleiben erhalten und das Umbrechen ist deaktiviert. Es sei denn, es gibt eine Möglichkeit, dies auszuschalten?
Steve Bennett
3
@Steve Bennett, in CSS white-space: normal;Obwohl ich nicht verstehe, warum Sie dies für Code tun würden. Auch diese <pre><code>Sache ist dumm, das <pre>Tag ist in den Standards sehr klar als "Computercode" (und andere Dinge) definiert, wie von @jleedev erwähnt. Liegt es daran, dass Sie denken, es <code>sei ein besserer Name? Entschuldigung, das macht es nicht semantischer. Es gibt einen ähnlichen Fall mit dem Tag <address>, es klingt nicht wirklich nach "Autor", aber der Standard sagt, dass es das ist, wofür es ist, also ist es.
srcspider
6
-1. Die zentrale Frage des OP war, wie Block-Snippets, die umbrochen werden, erstellt werden können. Sie haben Inline-Code sowie Blockcode angesprochen, der nicht umbrochen werden darf , aber dies geht nicht auf die Hauptfrage des OP ein.
Asad Saeeduddin
80

Etwas, das ich völlig vermisst habe: Das Non-Wrapping-Verhalten von <pre>kann mit CSS gesteuert werden. Das ergibt also genau das Ergebnis, nach dem ich gesucht habe:

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>
Erweitern Sie das Snippet

http://jsfiddle.net/9mCN7/

Steve Bennett
quelle
41

Persönlich würde ich verwenden, <code>weil das semantisch am korrektesten ist. Um dann zwischen Inline- und Blockcode zu unterscheiden, würde ich entweder eine Klasse hinzufügen:

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

für Inline-Code oder:

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

für Codeblock. Je nachdem was weniger häufig ist.

Slebetman
quelle
Ja, das fange ich auch an zu denken. Ich habe nach einer Lösung ohne Unterricht gefragt, aber es sieht so aus, als gäbe es keine gute.
Steve Bennett
3
@Steve: Die Hauptsache ist, einen Standardblock <code>ohne Klasse für den häufigsten Anwendungsfall zu definieren . Dann muss jeder, der das Ungewöhnliche tun möchte, nur die Klasse hinzufügen. Wenn Sie dies auf andere Weise tun, wird der Benutzer weiterhin aufgefordert, zusätzliche Daten einzugeben. Auf diese Weise kann sich der Benutzer vorstellen, ein spezielles Tag hinzuzufügen, anstatt eine völlig andere Struktur zu verwenden.
Slebetman
17

Für den normalen Inline- <code>Gebrauch:

<code>...</code>

und für jeden Ort, an dem blockiert <code>werden muss

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

Alternativ können Sie ein <codenza>Tag für den Break-Lining-Block definieren <code> (keine Klassen).

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

Prüfung: (NB: Es folgt eine scURIple eine Verwendung data:URI - Protokoll / Schema, deshalb werden die %0Anl - Format - Codes sind wesentlich bei der Erhaltung solcher , wenn sie geschnitten und in die URL - Leiste eingefügt zum Testen - so view-source:( ctrl- U) sieht gut vorangestellt jede Zeile im folgenden %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
quelle
14

Zeigen Sie HTML - Code, wie sie ist , die (veraltet) mit dem <xmp>Tag:

<xmp>
<div>
  <input placeholder='write something' value='test'>
</div>
</xmp>
Erweitern Sie das Snippet

Es ist sehr traurig, dass dieses Tag veraltet ist, aber es funktioniert immer noch in Browsern, es ist ein schlechtes Tag. keine Notwendigkeit, irgendetwas darin zu entkommen. Was für eine Freude!

Zeigen Sie HTML - Code, wie sie ist , die mit dem <textarea>Tag:

<textarea readonly rows="4" style="background:none; border:none; resize:none; outline:none; width:100%;">
<div>
  <input placeholder='write something' value='test'>
</div>
</textarea>
Erweitern Sie das Snippet

vsync
quelle
Ich vermisse sicherlich etwas, aber anscheinend ist dies die einzige Möglichkeit, rohen HTML-Code (zum Debuggen) in WordPress / PHP-Vorlagen
anzuzeigen
@sphakka (& vsync), Siehe meine Antwort hier, in der vorgeschlagen wird, dass die Verwendung <textarea readonly>derselben das Gleiche tut, aktuell ist und viel mehr Kontrolle hat, wenn Sie dies wünschen.
www-0av-Com
@ user1863152 - IMHO wird ein Textbereich meiner Meinung nach sehr schlecht verwendet, da der Code nicht durch ein externes Skript wie beispielsweise Prism hervorgehoben werden kann . und außerdem passt es nicht zur Höhe und Breite des Inhalts, wie <xmp>es oder irgendein anderes blockElement tut. Ich würde es nicht als echte Lösung empfehlen, sondern nur als theoretische.
vsync
@vsync, ja, es sind Pferde für Kurse (& ich habe dir übrigens eine positive Bewertung gegeben). Ich benutze Textarea für meine Bedürfnisse. Ich habe xmp ausprobiert und kann mich nicht erinnern, warum ich xmp für meine Bedürfnisse als unbefriedigend empfunden habe. Natürlich entmutigt sein veralteter Status sicherlich. Ich verwende PRE, wenn ich und CODE für die Inline-Verwendung hervorheben muss. Ich kann mir nicht vorstellen, wie Prism in einem XMP hervorgehoben wird - einige CSS-Assistenten?
www-0av-Com
Da bin ich mir nicht sicher. Ja, es funktioniert, aber seit 3.2 veraltet und in 5 komplett entfernt? Obwohl nicht viele Tags vollständig aus den Browsern entfernt wurden - <blink>ist ein Beispiel -, würde ich mir Sorgen machen, diese für alles zu verwenden, was zukunftssicher sein muss.
Spacer GIF
9

Betrachten Sie TextArea

Leute, die dies über Google finden und nach einer besseren Möglichkeit suchen, die Anzeige ihrer Snippets zu verwalten, sollten auch überlegen <textarea>, was eine große Kontrolle über Breite / Höhe, Scrollen usw. <xmp>bietet. Ich finde, dass @vsync das veraltete Tag erwähnt , <textarea readonly>ein ausgezeichneter Ersatz ist zum Anzeigen von HTML, ohne dass etwas darin maskiert werden muss (außer wo </textarea>es darin erscheinen könnte).

Um beispielsweise eine einzelne Zeile mit kontrolliertem Zeilenumbruch anzuzeigen, berücksichtigen <textarea rows=1 cols=100 readonly> Sie HTML oder usw. mit beliebigen Zeichen, einschließlich Tabulatoren und CrLfs </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>
Erweitern Sie das Snippet

Um alle zu vergleichen ...

<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>
Erweitern Sie das Snippet

www-0av-Com
quelle