Syntax Highlighter
Eintragen von Platzhaltern in Code Snippets
Häufig werden Platzhalter in der Form <Platzhalter> in Code Snippets eingetragen. Das kann zu unerwarteten Resultaten führen, abhängig davon, ob der Platzhalter im visuellen- oder im Text-WordPress Editor eingegeben wird. Da bei für die html Darstellung der Seiten diese Sonderzeichen (< und >) escaped werden und dann da evtl < und > steht.
Um diesen Problemen aus dem Weg zu gehen, kann man die doppelten spitzen Klammern « … » verwenden. Diese Sonderzeichen haben in html keine besondere Bedeutung und werden deshalb auch nicht escaped.
Die doppelten spitzen Klammern können folgendermaßen eingegeben werden:
Windows:
« – ALT + 0171
» – ALT + 0187
MacOs:
« – ALT + q
» – ALT + Q
Einfügen von Code Snippets im visuellen Editor
Für das Einfügen im visuellen Editor steht Unterstützung zur Verfügung. In der Kopf-Zeile gibt es den Button Prism.
Der Button öffnet einen Assistenz-Dialog:
Hier kann die Sprache für das Highlighting festgelegt werden und es kann gewählt werden ob die Zeilen nummeriert und/oder Zeilen gehighlightet werden sollen.
Anschließend kann man den Code in das Code Fenster pasten und mit ok bestätigen.
Achtung: Dieser Dialog unterstützt nur das Einfügen von neuen Code Snippets, nicht jedoch das Bearbeiten von existierenden Code Snippets!
Reines Highlighting der Sprache
Wenn der Code mit folgenden Tags versehen wird:
<pre><code class=“language-yaml“>
…
</code></pre>
Dann sieht das Code Snippet so aus:
websocket:
plugin_name: visu_websocket
# ip: 0.0.0.0
# port: 2424
# tls: no
# wsproto: 4
acl: rw
smartvisu:
plugin_name: visu_smartvisu
smartvisu_dir: /var/www/smartvisu
# generate_pages: True
# handle_widgets: True
# overwrite_templates: Yes
# visu_style: blk
Die Liste der aktuell 142 unterstützten Sprachen ist hier zu finden: http://prismjs.com/index.html#languages-list
Markieren von Text innerhalb des Codes
Teile des Codes können markiert werden, wenn der Code mit folgenden Tags versehen wird:
<pre><code class=“language-yaml“>
<mark>plugin_name: visu_websocket</mark>
…
</code></pre>
Dann sieht das Code Snippet so aus:
websocket:
plugin_name: visu_websocket
# ip: 0.0.0.0
# port: 2424
# tls: no
# wsproto: 4
acl: rw
Highlighting der Sprache mit Zeilennummerierung
Wenn der Code mit folgenden Tags versehen wird:
<pre class=“line-numbers“><code class=“language-yaml“> … </code></pre>
Dann sieht das Code Snippet so aus:
websocket:
plugin_name: visu_websocket
# ip: 0.0.0.0
# port: 2424
# tls: no
# wsproto: 4
acl: rw
smartvisu:
plugin_name: visu_smartvisu
smartvisu_dir: /var/www/smartvisu
# generate_pages: True
# handle_widgets: True
# overwrite_templates: Yes
# visu_style: blk
Highlighting mit Nummerierung und Zeilenhervorhebung
Wenn der Code mit folgenden Tags versehen wird:
<pre data-line=“9-10, 12″ class=“line-numbers“><code class=“language-yaml“>
…
</code></pre>
Dann sieht das Code Snippet so aus:
websocket:
plugin_name: visu_websocket
# ip: 0.0.0.0
# port: 2424
# tls: no
# wsproto: 4
acl: rw
smartvisu:
plugin_name: visu_smartvisu
smartvisu_dir: /var/www/smartvisu
# generate_pages: True
# handle_widgets: True
# overwrite_templates: Yes
# visu_style: blk
Highlighting ohne Nummerierung mit Zeilenhervorhebung
Wenn der Code mit folgenden Tags versehen wird:
<pre data-line=“9-10″ ><code class=“language-yaml“>
…
</code></pre>
Dann sieht das Code Snippet so aus:
websocket:
plugin_name: visu_websocket
# ip: 0.0.0.0
# port: 2424
# tls: no
# wsproto: 4
acl: rw
smartvisu:
plugin_name: visu_smartvisu
smartvisu_dir: /var/www/smartvisu
# generate_pages: True
# handle_widgets: True
# overwrite_templates: Yes
# visu_style: blk
Inline Code
Hier ist eine Zeile mit <code>Code</code>:
Hier ist eine Zeile mit Code
Mit diesem Highlighter ist ein Language Syntax Highlighting für Inline Code möglich. Dazu muss die Sprache als class Anweisung angegeben werden:
<code class=“language-bash“>cd /</code>:
cd /