vs vs für Inline- und Block-Code-Schnipsel

Question

Meine Website wird einige Inline-Code haben ( „wenn die foo() Funktion ...“) und einige Block-Schnipsel. Diese neigen dazu, XML zu sein, und haben sehr lange Linien, die ich lieber den Browser zu wickeln (das heißt, ich will nicht zu verwenden <pre>). Ich mag auch CSS setzt Formatierung auf dem Block-Schnipsel.

Es scheint, dass ich nicht <code> für beide verwenden können, denn wenn ich CSS Block Attribute auf sie setzen (mit display: block;), werden die Inline-Schnipsel brechen.

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

Ich mag den eigentlichen HTML so einfach wie möglich zu halten, Klassen zu vermeiden, da andere Benutzer es beibehalten werden.

Answer 1

Etwas, das ich völlig verfehlt: das Nicht-Wickelverhalten von <pre> kann mit CSS gesteuert werden. So dies das genaue Ergebnis gibt, denn ich war auf der Suche:

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 2

Verwenden <code> für Inline-Code, und <pre><code> für Blockcode wickeln können, die nicht wickeln müssen. <samp> ist für Probe Ausgang , so dass ich es mit vermeiden würde Beispielcode darstellen (die der Leser auf input ). Dies ist, was Stack-Überlauf der Fall ist.

(Noch besser wäre es, wenn Sie einfach halten möchten, lassen Sie den Benutzer bearbeiten die Artikel als Markdown, dann müssen sie nicht verwenden <pre><code> erinnern.)

HTML5 stimmt dies in „das pre Elemente“ :

  

Das pre-Element stellt einen Block von vorformatierten Text, wobei in der Struktur von typographischen Konventionen dargestellt wird, statt durch die Elemente.

     

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

     

  
• einschließlich Fragmenten von Computercode, mit angegebener Struktur gemäß den Konventionen dieser Sprache.
  

     

[...]

     

Um einen Block von Computercode zu repräsentieren, das Pre-Element kann mit einem Code-Elemente verwendet werden; darstellen kann, um einen Block von Computerausgabe des pre-Element mit einem samp Elemente verwendet werden. In ähnlicher Weise kann das kbd Element innerhalb eines vorbestimmten Elements verwendet werden, um Text, um anzuzeigen, dass der Benutzer geben.

     

Im folgenden Ausschnitt wird eine Probe von Computercode dargestellt wird.

<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 3

Persönlich würde ich <code> verwenden, weil das die meisten semantisch korrekt ist. Dann zwischen Inline- und Block-Code zu unterscheiden ich entweder eine Klasse hinzufügen würde:

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

für Inline-Code oder:

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

für Codeblock. Je nachdem, welche weniger üblich ist.

Answer 4

anzeigen HTML-Code, als Service-Leistung , mit dem (veraltet) <xmp> Tag:

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

Es ist sehr traurig, dieser Tag veraltet ist, und es noch auf Browser nicht funktioniert, es ist ein bad-ass-Tag. keine Notwendigkeit, etwas in ihm zu entkommen. Was für eine Freude!

Answer 5

Für normale inlined <code> Verwendung:

<code>...</code>

und für jeden Ort, an dem blockierten <code> benötigt wird Verwendung

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

---

Alternativ definiert eine <codenza> Tag für Bremsbelagblock <code> (keine Klassen)

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

---

Test: (NB: Im Anschluss an eine scURIple ist ein data: URI-Protokoll / Schema verwendet, deshalb werden die %0A nl Formatcodes sind wesentlich in die Erhaltung solcher, wenn sie geschnitten und in die URL-Leiste eingefügt zum Testen - so view-source: ( ctrl - U ) alle Linie 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>

Answer 6

Betrachten TextArea-

Menschen dies über Google zu finden und auf der Suche nach einem besseren Weg, um die Anzeige ihres Schnipsels verwalten sollte auch <textarea> betrachten, das eine Menge Kontrolle über Breite / Höhe gibt, Scrollen usw. feststellend, dass @vsync den veralteten Tag <xmp> erwähnt, ich finden <textarea readonly> ist ein ausgezeichneter Ersatz für HTML-Anzeige, ohne dass irgendetwas in ihm zu entkommen (außer wenn </textarea> innerhalb möglicherweise angezeigt).

Zum Beispiel mit einer kontrollierten Zeilenumbruch eine einzige Zeile angezeigt werden, sollten Sie <textarea rows=1 cols=100 readonly> Ihre HTML oder usw. mit beliebigen Zeichen inklusive Reiter und CrLf der </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>

alle 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>

Answer 7

Betrachten Prism.js: https://prismjs.com/#examples

Es macht <pre><code> Arbeit und ist attraktiv.