Als je artikelen, blogberichten of tutorials schrijft over programmeren, dan heb je een oplossing nodig om code weer te geven op je WordPress site. Daar zijn verschillende plugins voor. Deze maken meestal gebruik van shortcodes en custom blokken. De Code Syntax Block plugin werkt net even anders: deze gratis plugin breidt namelijk alleen het bestaande code blok in de WordPress core uit.
Hoe werkt de Code Syntax Block plugin?
Code Syntax Block maakt gebruik van de Prism JavaScript library om syntax highlighting aan de front-end van je WordPress website weer te geven. In een apart CSS bestand kunnen de kleuren en stijlen worden gespecificeerd die aan de code moeten worden meegegeven. De plugin heeft een goed doordacht design en laadt alleen scripts en stijlen wanneer het code blok daadwerkelijk in gebruik is. Je hoeft je dus geen zorgen te maken dat je website trager wordt als je deze plugin geïnstalleerd hebt. Aan de admin-kant wordt een nieuw tabblad met instellingen voor het code blok toegevoegd. Gebruikers kunnen een aantal zaken configureren, waaronder de taal, de weergave van regelnummers en de titel van het code blok.
Back-end en front-end output
Prism wordt niet in de editor geladen, dus de output wordt gebaseerd op de styling van het thema. Dit is wellicht niet gewenst voor wie graag ziet dat de back-end en front-end één-op-één gelijk zijn, maar ik denk dat de meeste programmeurs het prima vinden om in de admin met de gesimplificeerde versie te werken terwijl de mooie output aan de front-end wordt weergegeven.
De Code Syntax Block plugin is standaard ingesteld om het One Dark thema te gebruiken, dat oorspronkelijk werd ontwikkeld voor de Atom editor en vervolgens naar Prism werd geporteerd. Het is echter ook mogelijk om dit thema te overschrijven met eenassets/prism/prism.css bestand in je thema.
Tot slot
Als je regelmatig code snippets wilt weergeven in blogberichten en op pagina’s, dan is een heldere opmaak geen overbodige luxe. De Code Syntax Block plugin werkt heel goed en biedt alle aanpassingsmogelijkheden die je nodig hebt. Zeker het proberen waard dus.
Lees ook: 6 tips om code voor SEO te gebruiken
