Deze plugin voegt mooie, opgemaakte codeblokken toe aan een WordPress-website. De kern is een shortcode
…
Voor de opmaak maakt de plugin gebruik van een externe bibliotheek genaamd Highlight.js. Die wordt geladen vanuit een CDN, samen met een donker thema (github-dark). Na het laden roept de plugin automatisch hljs.highlightAll() aan, wat ervoor zorgt dat alle codeblokken op de pagina direct worden gekleurd op basis van de taal. Daarnaast worden er eigen CSS-stijlen toegevoegd voor een afgeronde, schaduwrijke container met een zwarte titelbalk die de taalnaam toont.
De shortcode-functie zelf doet zorgvuldig werk aan het opschonen van de ingevoerde code. Het verwijdert automatisch toegevoegde alinea-tags van WordPress (shortcode_unautop), strips alle HTML-tags, en escapet speciale tekens — zodat de code veilig en letterlijk wordt weergegeven zonder dat de browser er HTML van maakt.
Het JavaScript-bestand bovenaan is een kleine uitbreiding voor de klassieke TinyMCE-editor in WordPress. Het voegt een knop toe met het label </> aan de editor-werkbalk. Als je daarop klikt, verschijnt er een pop-upvenster met een korte uitleg over hoe je de shortcode moet gebruiken, inclusief een overzicht van ondersteunde talen zoals php, js, css en html.
Tot slot koppelt de plugin dit TinyMCE-script via twee WordPress-filters: mce_buttons voegt de knop toe aan de werkbalk, en mce_external_plugins zorgt dat het JavaScript-bestand (help-button.js) ook daadwerkelijk geladen wordt in de editor. Zo is de plugin zowel voor bezoekers als voor de redacteur netjes afgewerkt.
Gebruik een codeblock zo (zonder de . voor de “codeblocks”):
[.codeblock lang=”php”]
echo “Hallo wereld”;
[/.codeblock]
De plugin zip download staat hieronder: