Syntax Highlighting in WordPress ohne Plugin

eingetragen in: WordPress | 1 |
Lesezeit: 4 Minuten

Ein Syntax-Highlighting in WordPress wird meistens mit Plugin realisiert. Das Problem hierbei ist, das meist überfrachtete Javascript-Dateien bei jedem Seitenaufruf mitgeladen werden. Notwendigerweise oder nicht.

Wer lieber eine Lösung ohne Plugin sucht, welches auch recht schmal ist – dem sei highlight.js empfohlen.

So schaut es aus

HTML

<!DOCTYPE html>

<html>

<head>
<title>Hello World</title>
<meta charset="UTF-8" />
<meta name="description" content="Hello World" />
</head>

<body>
Hello World

</body>
</html>

PHP

<?php echo '<p>Hallo Welt</p>'; ?>

CSS


/*
Original style from softwaremaniacs.org>
*/
pre code {
display: block; padding: 0.5em;
background: #f8f8f8;
}
pre code,
pre .subst,
pre .tag .title,
pre .lisp .title,
pre .clojure .built_in,
pre .nginx .title {
color: black;
}

SQL

CREATE TABLE employees
( employee_number number(10) not null,
  employee_name varchar2(50) not null,
  salary number(6),
  CONSTRAINT employees_pk PRIMARY KEY (employee_number)
);

INSERT INTO employees (employee_number, employee_name, salary)
VALUES (1001, 'John Smith', 62000);

Javascript

var name = "mail"; var domain = "phoenix-vierpunktnull.de"; document.write('<a href="mailto:' + name + '@' + domain + '">'); document.write(name + '@' + domain + '</a>');

In WordPress einbinden

Als erstes stehst du vor der Wahl auf dem eigen Server das ganze abzulegen oder du bindest die Dateien vom CDN-Server von Cloadflare ein.

Ich habe mich für die CDN-Variante mit dem Style Github entschieden.

Eingebunden wird das ganze mit 3 Zeilen:

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.6.0/styles/github.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.6.0/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>

Um die Performance von WordPress zuschonen und zur Optimierung der Ladezeit, habe ich den Code in der functions.php eingebaut und nur geladen wird, wenn der Shorttag [cohi].

// Add Shortcode: Code highlight [cohi] ...code.... 
function code_highlighter() {
 return ' <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.6.0/styles/obsidian.min.css">
 <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.6.0/highlight.min.js"></script>
 <script>hljs.initHighlightingOnLoad();</script>';
};
add_shortcode( 'cohi', 'code_highlighter');

Jedes Code-Beispiel was nun mit „<pre><code> .. </code></pre>“ markiert ist, wird nun automatisch hervorgehoben. Dabei erkennt hightlight.js in der Regel die Sprache. Manchmal kann es bei kurzen Code-Fragmenten aber zu Fehlern kommen. Deswegen gibt es die Möglichkeit, die Sprache manuell zu zuweisen.

Für PHP zum Beispiel: <code class=“php“>

Um Fehler beim HTML5-Schema auszuschließen, sollte man aber <code class=language-php> schreiben. Weitere Möglichkeiten kann man in der Readme nachlesen

Verfügbare Sprachen

Die Sprachenvielfalt macht es echt universell, unter anderem dabei:

Bash, C#, C++, CSS, Diff, HTML, XML, HTTP, Ini, JSON, Java, JavaScript, PHP, Perl, Python, Ruby, SQL,
1C, AVR Assembler, ActionScript, Apache, AppleScript, Axapta, Brainfuck, CMake, Clojure, CoffeeScript, D, DOS, .bat, Delphi, Django, Erlang, Erlang REPL, GLSL, Go, Haskell, Lisp, Lua, MEL, Markdown, Matlab, Nginx, Objective C, Parser3, Python profile, R, RenderMan RIB, RenderMan RSL, Rust, Scala, Smalltalk, TeX, VBScript, VHDL, Vala

Insgesamt sind es 166 Sprachen, welche unterstützt werden. Man kann die komplette Sprachbibliothek laden oder man packt sich sein eigenes Wunschpaket zusammen.

Die Styles

Dem Package liegen 77 Styles bei. Eine Übersicht gibt es hier: highlight.js – Test

Die Styles lassen sich auch sehr schnell anpassen. Ich benutze hier die github.css.

Fazit

Die eingebunden Dateien sind zusammen 19kb gross in der Standart-Version mit dem Style Github und damit sehr schnell geladen. Auch macht sich das bei mobiler Ansicht gut. Wer es einfach und schnell mag ist hiermit gut aufgehoben. Natürlich kann man das auch nicht nur in einer WordPress-Seite umsetzen, sondern auf jeder Webseite.

Guten Morgen!

Vielen Dank für dein Interesse an meinem Artikel. Ich hoffe er hat dir gefallen?
Verbinde dich mit mir, wie die 4609 anderen Menschen.

  1. […] erstens muss man die erst finden und zweitens mag ich Plugins eigentlich nicht. Deshalb hat mir der Tipp auf Phoenix 4.0 auch sofort gefallen. Ein Hightlighter der mit etwas Bastelarbeit und ohne Plugin in WordPress zu […]

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.