Code-Blöcke auf einer WordPress-Seite veröffentlichen

Ursprünglich im Februar 2014 veröffentlicht, jetzt aktualisiert/korrigiert/erweitert.

Sie haben also WordPress installiert und möchten über Code bloggen. Juhu! Sie sind ein Held und ich danke Ihnen im Namen von mir und allen Codern auf der ganzen Welt. Hier sind die Dinge, die Sie tun und bedenken müssen, um tatsächlich Code-Blöcke zu veröffentlichen.

Das HTML für einen „Code-Block“

Es gibt ein Element speziell für Code: <code>. Ich würde sagen, es ist semantisch korrekt, jeden Code darin einzuschließen. Die Standard-Stylesheets der Browser belassen es als Inline-Element, und ich würde empfehlen, es dabei zu belassen, damit Sie es innerhalb von Sätzen verwenden können, so wie ich es im letzten Satz getan habe.

Aber Sie werden ein Block-Level-Element verwenden wollen, um einen Code-Block einzuschließen. <pre> ist das perfekte Element dafür, da es automatisch Leerzeichen beibehält. „Pre“ steht für „Vom Benutzer vorformatierter Text“. Mehrere Leerzeichen werden als mehrere Leerzeichen dargestellt, anstatt zu einem einzigen Leerzeichen zusammenzufallen, wie es normalerweise in HTML geschieht. Das ist perfekt für Code, da Sie wahrscheinlich Einrückungen in einem Code-Block verwenden möchten und keine  -Tricksereien anwenden möchten.

Also

<pre><code>Your 
   
   block
  
       of

   code
 
 here.</​code></​pre>

Schalten Sie den „Visuellen“ Editor aus

Standardmäßig können Sie in WordPress zwischen den Tabs „Visuell“ und „Text“ im Editor wechseln.

Für Sie muss der visuelle Editor weg. Sie werden ihn nie benutzen. Sie möchten die volle Kontrolle über den Text, den Sie schreiben, und möchten, dass er so bleibt, wie Sie ihn schreiben, wenn Sie ihn speichern.

Schalten Sie ihn unter Benutzer > Ihr Profil aus

Werden Sie in Markdown bloggen oder nicht?

Hier auf CSS-Tricks mache ich das nicht, aber wenn ich in die Vergangenheit zurückgehen könnte, würde ich es wahrscheinlich tun. Auf den meisten meiner späteren Blogs verwende ich Markdown und bevorzuge es. Wenn Sie das tun möchten, empfehle ich die Markdown-Funktion von Jetpack.

Um einen Code-Block in Markdown zu posten, müssen Sie diesen Code auf jeder einzelnen Zeile vier Leerzeichen einrücken, so:

Yadda yadda yadda. I'm a *paragraph* in Markdown. Here's a [link to Google](http://google.com). Here's a block of code:

    <div>
       <p>I'm some code.</p>
    <div>

Another paragraph here.

Das manuell zu tun, wird sehr schnell ermüdend. Sie möchten also Ihre Editor-Buttons durch Markdown-Buttons ersetzen. Es sieht so aus, als ob das Plugin Markdown Quicktags das tun kann.

Das Coole an der Verwendung von Markdown ist, dass Sie sich nicht um das Escaping des Codes kümmern müssen. Diese spitzen Klammern stellen also keine Bedrohung mehr dar, Markdown maskiert sie für Sie. Mit anderen Worten, all diese spitzen Klammern (<) im obigen HTML-Beispiel werden in < umgewandelt und somit auf dem Bildschirm als spitze Klammer angezeigt, anstatt den Browser zu verwirren, indem er denkt, ein HTML-Tag kommt.

Dieses Markdown-Beispiel wird in Folgendes umgewandelt, bevor es den Browser erreicht

<p>Yadda yadda yadda. I'm a <em>paragraph</em> in Markdown. Here's a <a href="http://google.com">link to Google</a>. Here's a block of code:</p>

<pre><code>&lt;div&gt;
   &lt;p&gt;I'm some code.&lt;/p&gt;
&lt;div&gt;</code></pre>

<p>Another paragraph here.</p>

Wenn Sie daran interessiert sind, in Markdown zu bloggen, haben Sie einige Optionen. Jetpack, das von Automattic entwickelte und gepflegte Plugin, bietet es jetzt an als Teil seines Mega-Pakets an Angeboten. Derzeit verwende ich WP-Markdown hier auf CSS-Tricks (ich weiß, ich sagte, ich benutze kein Markdown, aber ich tue es für die Foren und Kommentare, nur nicht zum Bloggen).

Zwei, die ich persönlich noch nicht ausprobiert habe, sind Typewriter und Markdown on Saved Improved.

Es gibt hier jedoch eine ziemlich große Einschränkung. Beachten Sie, dass die Einrückung mit vier Leerzeichen in einen <pre><code>-Block umgewandelt wird, aber es gab keine Möglichkeit, diesen Tags Attribute hinzuzufügen. Attribute (wie Klassen und data-* Attribute) sind ein häufiger Bedarf. Sie möchten vielleicht einen Syntax-Highlighter verwenden (darüber sprechen wir später), der einige Attribute benötigt, um seine Funktion zu erfüllen. Oder Sie möchten den Code-Block irgendwie nach Sprache identifizieren.

Bequemer als Einrückungen, viele „Sorten“ von Markdown (einschließlich der Jetpack-Version) unterstützen Code Fencing, d.h. das Einbetten von Code-Blöcken in dreifache Backticks

```
<div>
  <p>I'm some code.</p>
<div>
```

Ich nenne das gerade heraus besser. Es ist einfacher, beim Schreiben in einen Code-Block zu springen, ohne sich um die Einrückung kümmern zu müssen. Außerdem hat Code seine eigene Einrückung, daher ist es schön, bündig mit links zu beginnen.

Sie können die Sprache auch direkt in der Markdown-Syntax angeben. Unser Beispiel könnte also lauten

```html
<div>
  <p>I'm some code.</p>
<div>
```

Was ergibt

<pre><code class="html">&lt;div&gt;
  &lt;p&gt;I'm some code.&lt;/p&gt;
&lt;div&gt;
</code></pre>

Wenn Sie KEIN Markdown verwenden, müssen Sie den Code escapen.

CSS-Codeblöcke müssen selten escaped werden, aber HTML definitiv, und JavaScript enthält manchmal HTML (sowie fast alle Backend-Sprachen), also können Sie genauso gut davon ausgehen, dass Sie allen Code escapen müssen.

Sie könnten es manuell tun, indem Sie alle <-Zeichen in &lt;-Zeichen umwandeln, aber das würde Sie verrückt machen. Sie könnten ein Tool wie Postable verwenden, um Blöcke zum Escapen zu kopieren und einzufügen, aber das ist auch langsam und mühsam.

Ich bevorzuge die Verwendung eines Plugins namens Code Markup dafür. Es escaped einfach automatisch alles, was es innerhalb von <code>-Tags findet, sodass Sie nie darüber nachdenken müssen.

Da ich dieses Plugin auf dieser Website verwende, kann ich Dinge tun wie

<pre data-lang="HTML"><code class="language-markup"><div>
  <p>I'm some code.</p>
<div></​code></​pre>

Und es funktioniert großartig. Kein Escaping. Volle Attributkontrolle.

Syntax-Highlighting handhaben

Denken Sie daran, dass eine Option für Syntax-Highlighting von Code-Blöcken kein Syntax-Highlighting ist. Das wäre sicherlich der schnellste und einfachste Weg. Aber Sie möchten es vielleicht. Persönlich mag ich es. Ich mag die Art, wie es aussieht. Hier sind einige Optionen.

Im Wesentlichen geschieht bei jedem Syntax-Highlighter, dass Code-Schnipsel in <span>s mit Klassennamen verpackt werden, die Sie mit CSS einfärben. Die Wahl hängt von den Funktionen ab.

Prism.js

Hier auf CSS-Tricks verwende ich (und empfehle) Prism von Lea Verou, da es sofort damit funktioniert. Es ist klein, schnell und (mein Favorit) hat rationale Klassennamen für das Styling. Sie wählen aus, welche Sprachen es unterstützen soll, wenn Sie es herunterladen.

Ich verwende auch dieses Escaping-Plugin, was bedeutet, dass ich HTML in Code-Tags nicht escapen muss, also sieht es wieder so aus

<pre><code markup="tt" class="language-markup"><div>
  <p>I'm some code.</p>
<div></​code></​pre>

Diese class="language-markup" auf dem Code-Tag ist das, was Prism zur Syntax-Hervorhebung erkennt. Es funktioniert standardmäßig automatisch für allen Code, den es mit diesem Klassennamen-Muster findet, aber Sie können stattdessen die API verwenden, wenn Sie Ihr eigenes Ding machen möchten.

Prettify

Ein extrem beliebtes ist google-code-prettify. Um einen Block zu syntaxhervorzuheben, setzen Sie class="prettyprint" auf das Code- oder Pre-Tag.

Es ist eine größere Dateigröße als Prism, aber ein Vorteil ist, dass es die Sprache automatisch erkennt (und viele Sprachen unterstützt), sodass es bei fast allem funktionieren sollte, ohne dass Sie es angeben müssen.

Andere

Wenn man ein wenig recherchiert, gibt es viele weitere, die ich nicht verbürgen kann, aber die anscheinend die Arbeit erledigen: Rainbow, SyntaxHighlighter, Chili (jQuery), JSHighlighter, jQuery.Syntax (jQuery), GeSHi, Lighter (MooTools), highlight.js, SHJS und Pygments (Python).

Entscheidung

Um unter diesen zu entscheiden, könnten Sie über diese Dinge nachdenken

• Welche Sprachen muss ich hauptsächlich unterstützen?
• Möchte ich Zeilennummern anzeigen?
• Muss ich Links innerhalb des Codes einfügen?
• Möchte ich Teile des Codes oder Zeilen hervorheben können?
• Habe ich alte Codeblöcke, die ich unterstützen muss? In welchem Format liegen sie vor?
• Ist der Code einfach zu kopieren und einzufügen? Möchte ich Funktionen, die dabei helfen?
• Ist clientseitiges Syntax-Highlighting in Ordnung oder soll es serverseitig erfolgen?

Codeblöcke visuell identifizieren

Ich denke, es ist eine nette Geste, auf einen Blick sehen zu können, welche Art von Code ein Code-Block ist. Auf dieser Website mache ich das über ein Attribut im Block selbst und style dann den Wert dieses Attributs als Teil der Anzeige. Sie können es in Aktion sehen in den meisten Code-Blöcken hier (vorausgesetzt, Sie betrachten die Website selbst und lesen sie nicht woanders).

Hier erfahren Sie, wie Sie ein bestimmtes Attribut eines Code-Blocks visuell anzeigen können (das Styling liegt ganz bei Ihnen!)

pre[data-language-display]:before {
  content: attr(data-language-display);
}

Umgang mit Legacy-Code

Wenn Sie bereits viele Code-Blöcke auf einer Website haben, empfehle ich dennoch, einen Syntax-Highlighter zu wählen, dessen Funktionen Sie für die aktuelle und zukünftige Verwendung mögen. Finden Sie dann einen Weg, ihn für die älteren Blöcke zu verwenden.

Nehmen wir zum Beispiel an, ich habe einen Legacy-Code-Block, der so markiert ist:

<pre><code class="javascript">
  var thing = document.getElementById("thing");
</​code></​pre>

Das ist nicht der richtige Klassenname für Prism. Also könnte ich jQuery verwenden, um etwas wie Folgendes zu tun:

$("code.javascript")
  .removeClass("javascript")
  .addClass("language-javascript");

Und stellen Sie sicher, dass dieser JavaScript ausgeführt wird, bevor Prism. Ich könnte auch die Gelegenheit nutzen, um den Code mit $.trim() zu bearbeiten, denn wie oben geschrieben, gibt es oben und unten eine zusätzliche Rückgabe, die das Styling des Code-Blocks beeinträchtigen könnte.

Ich meine das nur als Beispiel. Der allgemeine Punkt ist: Sie können die Legacy-Codeblöcke nach Bedarf manipulieren, um sie an das neue Format anzupassen.

Verwendung eines Plugins

Es gibt viele, viele Plugins dafür. Dieser Beitrag konzentriert sich hauptsächlich darauf, dies selbst zu handhaben, da dies im Allgemeinen die Art von Kontrolle ist, die ich mag. Aber ich bin sicher, es gibt viele gut gemachte Plugins dafür. Ich fürchte, ich kann keines empfehlen, aber dies ist, wonach ich suchen würde:

• Gute Bewertungen / Ratings / Sieht aus, als wäre es aktualisiert
• Zwingt Sie nicht, seltsame / proprietäre Dinge mit Code-Blöcken zu tun. Zum Beispiel ein [Shortcode] verwenden. Das bindet Sie für immer an dieses Plugin.
• Unterstützt die Sprachen und Funktionen, die Sie benötigen (und nur die Dinge, die Sie brauchen, lädt nicht alles unter der Sonne).

Hilfe von Drittanbietern

Bei der Erstellung der Funktion Embedded Pens auf CodePen wussten wir, dass die Anzeige von Demos und Code in Blogbeiträgen eine ziemliche Qual ist, also haben wir uns bemüht, das einfacher zu machen.

Hier ist ein Beispiel für einen eingebetteten Pen, der standardmäßig den CSS-Code anzeigt

See the Pen Dynamic Image Colorizing with by Noah Blon (@noahblon) on CodePen.

Ich muss mich nicht um Syntax-Highlighting, Escaping oder irgendetwas kümmern und habe den Vorteil, auch die gerenderte Demo anzuzeigen.

Viele der anderen Code-Editor-Seiten bieten auch eingebetteten Code an, wie JSFiddle und JSBin. GitHub Gists können hierfür ebenfalls nützlich sein. Vielleicht mein Lieblingsgrund für die Verwendung von Drittanbieter-Tools: Sie können die Demo dort aktualisieren und der Blogbeitrag hat automatisch den neuen Code. Sie müssen nicht an zwei Stellen aktualisieren.

---

Haben Sie Ihre eigene Methode, um Codeblöcke auf einer WordPress-Seite zu verwalten? Teilen Sie sie gerne mit.