<code> vs. <pre> vs. <samp> für Inline- und Block-Codefragmente

Question

Meine Website wird einige Inline-Codes enthalten ("bei Verwendung des foo() Funktion...") und einige Blockfragmente. Diese neigen dazu, XML zu sein und sehr lange Zeilen zu haben, die ich lieber vom Browser umbrechen lassen möchte (d.h. ich möchte keine <pre> ). Ich möchte auch CSS-Formatierung auf die Block-Snippets setzen.

Es scheint, dass ich nicht <code> für beides, denn wenn ich CSS-Block-Attribute darauf setze (mit display: block; ), werden die Inline-Snippets unterbrochen.

Ich bin neugierig, was die Leute tun. Verwenden Sie <code> für Blöcke, und <samp> für Inline? Verwenden Sie <code><blockquote> oder etwas Ähnliches?

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

Answer 1

Utilisez <code> für Inline-Code, der umbrochen werden kann und <pre><code> für Blockcode, der nicht umbrochen werden darf. <samp> ist für Muster Ausgabe Daher würde ich es vermeiden, ihn zur Darstellung von Beispielcode zu verwenden (der Leser soll Eingabe ). Das ist es, was Stack Overflow tut.

(Noch besser ist es, wenn Sie die Benutzer die Artikel in Markdown bearbeiten lassen, dann müssen sie sich nicht an die Verwendung von <pre><code> .)

HTML5 stimmt damit überein in "Die pre Element" :

Das pre-Element steht für einen vorformatierten Textblock, in dem die Struktur durch typografische Konventionen und nicht durch Elemente dargestellt wird.

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

• Einschließlich Fragmenten von Computercode, dessen Struktur entsprechend den Konventionen dieser Sprache angegeben ist.

[ ]

Zur Darstellung eines Blocks von Computercode kann das pre-Element mit einem code-Element verwendet werden; zur Darstellung eines Blocks von Computerausgaben kann das pre-Element mit einem samp-Element verwendet werden. In ähnlicher Weise kann das kbd-Element innerhalb eines pre-Elements verwendet werden, um Text anzuzeigen, den der Benutzer eingeben soll.

Im folgenden Ausschnitt wird ein Beispiel für einen 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>

Answer 2

Etwas, das ich völlig übersehen habe: das Nichtumhüllungsverhalten von <pre> kann mit CSS gesteuert werden. Das ist 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>

http://jsfiddle.net/9mCN7/

Answer 3

Ich persönlich würde 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 verbreitet ist.

Answer 4

HTML-Code anzeigen, wie besehen unter Verwendung des (veralteten) <xmp> Tag:

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

---

Es ist sehr bedauerlich, dass dieses Tag veraltet ist, sondern es funktioniert immer noch auf Browsern, es ist ein bad-ass Tag. keine Notwendigkeit, etwas in ihm zu entkommen. Was für eine Freude!

---

HTML-Code anzeigen, wie besehen unter Verwendung der <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>

Answer 5

Für normale Inliner <code> verwenden:

<code>...</code>

und für jeden einzelnen Ort, an dem blockierte <code> erforderlich ist, verwenden Sie

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

---

Alternativ können Sie auch eine <codenza> Etikett für Pausenfutterblock <code> (kein Unterricht)

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

---

Prüfung: (Anm.: Das Folgende ist ein Beispiel für die Verwendung eines data: URI-Protokoll/Schema, daher ist das %0A nl-Format-Codes sind Wesentlich beim Ausschneiden und Einfügen in die URL-Leiste zu Testzwecken beibehalten - also view-source: ( ctrl - U ) sieht gut aus vorgehen jede Zeile unten mit %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>