Met behulp van <pre> of <code> tags, kun je natuurlijk wat programmacode weergeven op je WordPress website. Mooier is natuurlijk om de highlighting van de programmeertaal erbij te hebben, zodat het extra duidelijk is voor je bezoekers. WordPress zou WordPress niet zijn als hier geen plugins voor waren, dus in dit bericht worden er twee behandeld waarmee je op een mooie manier codes in verschillende programmeertalen op je website kunt weergeven.

Crayon Syntax Highlighter
Allereerst de Crayon Syntax Highlighter plugin. Het grote voordeel van deze plugin, is dat er een extra knop aan je editor wordt toegevoegd en dat je daarmee de stukjes code kunt toevoegen aan je bericht. Voor alles wat je maar kunt verzinnen is er wel een optie beschikbaar die je met behulp van deze visual editor kunt aanpassen. Zo kan je bijvoorbeeld de programmeertaal kiezen, maar ook verschillende layouts gebruiken of regelnummers instellen. In principe staat alles standaard al goed ingesteld, dus het enige wat je hoeft te doen is je code erin te plakken en de programmeertaal te kiezen. Vervolgens kun je het stuk code invoegen in je bericht, en zal het er (standaard) als volgt uit komen te zien op je website:

WP Syntax
Een iets simpelere plugin is WP Syntax. Wanneer je deze plugin hebt geïnstalleerd, zal er geen extra knop worden toegevoegd aan de standaard editor. Je moet hierbij gebruik maken van de <pre> tags met daarin een aantal paramaters. De exacte syntax is als volgt:

<pre lang="LANGUAGE" line="LINENUMBER" escaped=”FALSE” highlight=”LINENUMBER” src=”pad/naar/sourcecode”> Je code </pre>

De uitleg van de paramaters:
Lang: De taal waarin je code is geschreven (bijvoorbeeld “php” of “java”).
Line: Indien opgegeven worden lijnnummers weergegeven, beginnend bij het nummer dat je hier specificeert (bijvoorbeeld “1” of “23”).
Escaped: Indien opgegeven geeft dit aan of bepaalde characters al “escaped” zijn. Je zet deze dus op true als je bijvoorbeeld code gebruikt waarbij ‘<’ is vervangen door ‘&lt;’.
Highlight: Indien opgegeven wordt de aangegeven regel gemarkeerd.
Src: Indien opgegeven wordt er als onderschrift aangegeven uit welk bestand de code afkomstig is.

Wanneer alles naar wens is ingevuld, zal je code er (standaard met alleen “lang” en “line” gedefinieerd) er hetzelfde uit komen te zien als die van de Crayon Syntax Highlighter:

Om gebruik te kunnen maken van de WP Syntax plugin, is het wel nodig om de teksteditor te gebruiken in plaats van de visuele editor. In de visuele editor is het namelijk niet mogelijk om de <pre> tags naar eigen wens aan te passen. Om die reden raad ik aan om voor de Crayon Syntax Highlighter te kiezen, omdat deze over het algemeen meer opties beschikbaar heeft en makkelijker in gebruik is.

Michel Kraaijeveld

Michel Kraaijeveld is oprichter van WPsitemaken. Hij is ervan overtuigd dat het voor iedereen mogelijk moet zijn om een eigen website te maken, zonder lastige handleidingen door te hoeven nemen. Zelf is hij al 6 jaar actief met WordPress en probeert zijn kennis op een simpele manier over te brengen aan anderen.