<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

TextArea berücksichtigen

Wer dies über Google findet und nach einer besseren Möglichkeit sucht, die Anzeige seiner Snippets zu verwalten, sollte auch Folgendes in Betracht ziehen <textarea> die eine umfassende Kontrolle über Breite/Höhe, Bildlauf usw. ermöglicht. Ich stelle fest, dass @vsync den veralteten Tag erwähnt hat <xmp> finde ich <textarea readonly> ist ein hervorragender Ersatz für die Anzeige von HTML, ohne dass etwas darin entschlüsselt werden muss (außer wenn </textarea> erscheinen könnte).

Um zum Beispiel eine einzelne Zeile mit kontrolliertem Zeilenumbruch anzuzeigen, können Sie <textarea rows=1 cols=100 readonly> Ihre Html-Datei oder andere Dateien mit beliebigen Zeichen, einschließlich Tabulatoren und CrLf's </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>

Zum Vergleich aller...

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

Hier ist ein PLAIN, nicht-JavaScript, HTML-Lösung das sehr einfach zu benutzen ist und besser ist als die Verwendung von <pre> et <code> Elemente oder schwerfällige JavaScript-Lösungen, die immer ein Overkill sind. Ich verwende diesen Trick schon seit 20 Jahren! Er funktioniert in allen Browsern, alten und neuen. Die Kinder von heute haben es einfach versäumt, die alten Methoden zu lernen.

Es ermöglicht Ihren Benutzern, Codebeispiele schnell auszuschneiden und einzufügen. Außerdem können Sie Ihren Code schnell und problemlos in ein HTML-Element einfügen, ohne dass Sie den gesamten Code ausblenden müssen. < et > Zeichen, die Sie normalerweise bei der Verwendung von <code> .

Verwenden Sie die <textarea> Element zum Teilen von Code , etwa so:

<textarea class="code" contenteditable="true" spellcheck="false" aria-label='Code Sample'>
  My Sample Bookmark:
  <a href="#bookmark1" id="b1" title="View my bookmark" target="_blank" rel="noreferrer nofollow noopener" accesskey="a" tabindex="0" aria-label="Bookmark">Got to My Bookmark</a>
</textarea>

...mit etwas einfachem CSS-Styling...

<style>
        textarea.code {
            display: block;
            width: 90%;
            min-height: 5em;
            overflow-y: auto;
            overflow-x: hidden;
            font-family: monospace;
            border: 1px solid #bbb;
            padding: 1em;
            white-space:pre-wrap;
        }
</style>

Beachten Sie, dass es wie ein normales Monospace aussieht <code> ist aber auf Blockebene und berücksichtigt Textformate wie <pre> Lange Texte werden nun umbrochen, die Größe der Codebox ist steuerbar und ermöglicht eine flexiblere Anzeige großer HTML- oder Skriptblöcke, auf die Benutzer leichter zugreifen können.

BTW....können Sie weiterhin verwenden <pre><code> . Das tue ich immer noch für kleinere Beispiele. Und machen Sie sich keine Sorgen über semantische oder Zugänglichkeitsprobleme, indem Sie <textarea> da es sich um ein ersetztes Element handelt und vielseitiger einsetzbar ist. Wenn Sie sich Sorgen machen, dann fügen Sie einfach ein ARIA-Label zu Ihrem <textarea> , wie ich es oben getan habe.

Answer 3

Nehmen wir Prism.js: https://prismjs.com/#examples

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

Answer 4

Das funktioniert bei mir, um den Code im Frontend anzuzeigen:

<style>
.content{
    height:50vh;
    width: 100%;
    background: transparent;
    border: none;
    border-radius: 0;
    resize: none;
    outline: none;
}
.content:focus{
    border: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}
</style>

<textarea class="content">
<div>my div</div><p>my paragraph</p>
</textarea>

Live-Demo ansehen: https://jsfiddle.net/bytxj50e/