Syntax Highlighting in WordPress ohne Plugin

20. August 2016, Tim Ehling
Syntax Highlighting in WordPress ohne Plugin

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 im Footerbereich eingebaut und es wird nur bei der Kategorie- und Artikelansicht geladen.

<?php
if ( is_single() || is_category() ) {
echo '<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.6.0/styles/github.min.css">';
echo '<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.6.0/highlight.min.js"></script>';
echo '<script>hljs.initHighlightingOnLoad();</script>';
}
?>

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, das du meinen Artikel gelesen hast. Wenn er Dir gefallen hat, du Fragen hast, du etwas beitragen möchtest oder ihn mit anderen teilen willst, hast du nachfolgend die Möglichkeit dazu. Ich lebe natürlich von Feedback und freue mich über jede Interaktion von Dir.
Liebe Grüße
Dein Tim

Like die Facebookseite und folge mir auf Twitter

Zur Facebookseite 

Zum Twitteraccount 

Newsletter

Melde dich jetzt bei meinem Newsletter an und verpasse keinen Blogartikel oder spannende News mehr.

* Pflichtfelder. Das kannst Du jederzeit abbestellen. Hinweise zum Datenschutz

Kennst du schon das WordPress-Plugin 〖Social Media Buddy〗 ?

Dein Helfer, wenn es darum geht WordPress-Seiten super in den sozialen Netzwerken zu präsentieren.

Nein, kennst du nicht? Dann hier entlang: Social Media Buddy

Reaktionen auf Syntax Highlighting in WordPress ohne Plugin

  1. Pingback: Syntax Highlighting in WordPress – Horst bloggt

Schreib deine Meinung dazu

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



1 Das kannst Du jederzeit abbestellen. Hinweise zum Datenschutz

Diese Webseite nutzt Cookies für Statistiken, sowie Plugins sozialer Netzwerke. Durch klicken von dem Button "Akzeptieren" stimmst du der Verwendung zu. Datenschutzinformationsseite

Die Cookie-Einstellungen auf dieser Website sind auf "Cookies zulassen" eingestellt, um das beste Surferlebnis zu ermöglichen. Wenn du diese Website ohne Änderung der Cookie-Einstellungen verwendest oder auf "Akzeptieren" klickst, erklärst du sich damit einverstanden.

Schließen