Code Snippets en Syntax Highlighting in WordPress

In mijn eerdere artikel heb ik uitgelegd wat de juiste HTML voor code snippets is voor je website. Uiteraard wil ik dit toepassen in mijn berichten die ik schrijf via WordPress. Helaas bleek dit niet zo eenvoudig te zijn, maar uiteindelijk heb ik een oplossing gevonden. In dit artikel leer je dan ook hoe je Code Snippets en Syntax Highlighting in WordPress kunt gebruiken.

Code snippets in WordPress

Nu we weten wanneer we het code element en het pre element moeten gebruiken volgens de laatste HTML richtlijnen, is het tijd om dit toe te passen in de WordPress editor. Hiervoor maken we geen gebruik van de WYSIWYG-editor (What You See is What You Get), maar van de teksteditor waar alle HTML zichtbaar is. Als je je al bezighoudt met het tonen van code snippets in WordPress, dan vind je het waarschijnlijk geen bezwaar om in de teksteditor te werken.

Belangrijke reden om alleen van de teksteditor gebruik te maken is omdat de WYSIWYG-editor de HTML die je toevoegt in de teksteditor zomaar weer kan verwijderen. Om te voorkomen dat je per ongeluk switcht naar de WYSIWYG-editor kun je deze beter uitschakelen voor die specifieke blogpost. Dit kan eenvoudig via de Disable Visual Editor WYSIWYG plugin.

Werk je in de teksteditor, dan is er een code knop zichtbaar. Zie onderstaande afbeelding. De code knop kun je gebruiken als je stukjes code in de tekst wilt tonen omdat hiermee het code element gegenereerd word. Aangezien je al in de teksteditor werkt kun je natuurlijk ook zelf de HTML voor het code element schrijven, dat gaat waarschijnlijk net zo snel.

Voor het pre element is geen knop beschikbaar. De oplossing is om deze HTML elementen zelf te schrijven in de teksteditor om op die manier een blok met code te kunnen tonen die voldoet aan de HTML richtlijnen.

Bovenstaande werkt voor een heleboel programmeertalen. Het grote probleem is echter als je HTML in je code snippets gebruikt, daar gaat WordPress niet goed mee om.

Probleem en oplossing voor HTML snippets

De WordPress codex heeft een heel artikel geschreven hoe je code in WordPress kunt schrijven. De code en pre elementen zoals hierboven uitgelegd werken perfect voor alle programmeertalen, behalve HTML. Als je een HTML 5 snippet schrijft tussen de daarvoor bestemde code en pre elementen voert de browser dit helaas nog steeds uit zoals normaal bij gebruik van HTML elementen. Om ervoor te zorgen dat de browser het stukje HTML code niet verwart met echte HTML zul je karakters als < en > moeten coderen naar een ingewikkelde schrijfwijze. In plaats van

zou je moeten schrijven <div></div>.

Dit betekent dus dat elke keer als je een HTML snippet wilt tonen, je dit eerst moet coderen. Gelukkig zijn er tools waar je de normale HTML snippets in kunt plakken en dit voor jou omzetten naar de ingewikkelde schrijfwijze. Twee voorbeelden zijn Postable en HTML Entities.

Hiermee bereik je dan dat de HTML snippet op je website ook echt als HTML code wordt getoont, maar de leesbaarheid in je WordPress teksteditor laat natuurlijk behoorlijk te wensen over. Bovendien heb ik weinig zin om elke keer van bovenstaande tools gebruik te moeten maken. Ik heb een oplossing gevonden in de WordPress plugin Code Markup. Deze plugin zorgt ervoor dat je toch gewoon normale HTML kunt gebruiken tussen de code en pre elementen. De plugin is voor het laatst geupdate op 14 april 2008, behoorlijk lang geleden dus! Normaal gesproken is dat geen goed teken en zou ik daar echt geen gebruik van maken. Vanwege gebrek aan alternatieven heb ik daarom via Twitter even contact gezocht met de developer en navraag gedaan. Volgens hem is er geen reden om de plugin niet te gebruiken:

@spoelstraws Code Markup still works fine - I still use it myself. It's simple and it does the job, so I haven't needed to update it.

— Bennett McElwee (@bnnt) August 11, 2013

Overigens worden ook met deze plugin sommige HTML elementen nog steeds niet weergegeven als code, maar uitgevoerd als normale HTML. Dit is een bewuste keuze van de developer en staat ook uitgelegd op de plugin pagina. Hieronder de uitleg.

The plugin works by escaping most special HTML tags and characters so they display exactly as typed, but leaving certain ones alone so they will render as normal HTML. The default set of allowed tags is the standard formatting tags like em, strong, span and so on. You can control this explicitly, or implicitly by specifying the language of the code block. For example, in a normal code block, will be rendered as emphasised text, but in an HTML code block, will be displayed as .

De oplossing is simpel, zie hieronder.

or displays content exactly as written, the same as

Syntax highlighting voor code snippets in WordPress

In teksteditors voor code zoals Sublime Text 3 of Notepad++ wordt de HTML gekleurd weergegeven wat de leesbaarheid vergroot. Dit is mogelijk om in de browser na te bootsen door gebruik te maken van Google Prettify. We noemen dit syntax highlighting.

Er zijn een hoop plugins beschikbaar die Google Prettify mogelijk maken binnen WordPress, maar in alle gevallen moest ik zelf een Google Prettify class toevoegen aan het pre element of gebruik maken van een shortcode. Een alternatief voor Google Prettify is Highlight.js. Ik heb me daar niet in verdiept, en weet ook niet of die ooit mijn voorkeur gaat krijgen. Als ik echter ooit wel wil overstappen op Highlight.js is het erg vervelend dat ik in al mijn artikelen bij elk pre element een class heb toegevoegd of allemaal overbodige shortcodes in mijn tekst heb staan vanwege een Google Prettify plugin. Naast het extra schrijfwerk vind ik die extra balast dus geen prettig idee als ik in de toekomst wil switchen naar Highlight.js.

Gelukkig dacht Kaspars Dambis daar net over. Op zijn GitHub account heeft hij de WordPress plugin Code Prettify gedeeld. Deze plugin doet alles helemaal automatisch! Hij legt het zelf uit als:

100% automatic code highlighting using the Prettify library. No shortcodes, no bullshit.

Op dit moment krijg je van deze plugin nog geen melding in WordPress als er een update beschikbaar is. Zoals je ziet in het ticket voor automatische WordPress updates dat ik heb aangemaakt, heeft hij hier wel plannen voor in de toekomst. Voor nu moet je dus GitHub gebruiken voor updates!

Vond je dit een nuttig artikel of heb je een vraag? Laat het me weten via een reactie op dit artikel.