code syntax css java php weergeven wordpress plugin website

Als je artikelen, blog posts of handleidingen over programmeren maakt, heb je een oplossing nodig om code weer te geven op je WordPress site. Ik laat meerdere opties zien

Methode 1. Code weergeven met Gutenberg in WordPress

Deze methode wordt aanbevolen voor beginners en gebruikers die niet vaak code hoeven weer te geven. Bewerk gewoon het blogbericht of de pagina waar u de code wilt weergeven.

  • In het post edit scherm, voeg een nieuw code blok toe aan uw post. Het code-blok staat tussen de andere WordPress Gutenberg blokken.
  • U kunt nu het codefragment in het tekstgebied van het blok invoeren.

Daarna kunt u uw blogbericht opslaan en het bekijken om het codeblok in actie te zien. Afhankelijk van uw WordPress thema kan het codeblok er anders uitzien op uw website.

Methode 2. Code weergeven in WordPress met WordPress plugin

Er zijn verschillende plugins voor. Deze maken meestal gebruik van shortcodes en aangepaste blokken. Voor deze methode gebruiken we een WordPress-plugin om code in uw blogberichten weer te geven. Deze methode wordt aanbevolen voor gebruikers die vaak code in hun artikelen weergeven.

Het geeft u de volgende voordelen ten opzichte van het standaard codeblok:

  • Hiermee kunt u eenvoudig elke code in elke programmeertaal weergeven
  • De code wordt weergegeven met syntaxis-accentuering en regelnummers
  • Uw gebruikers kunnen de code gemakkelijk bestuderen en kopiëren

SyntaxHighlighter Evolved WordPress plugin

Eerst moet je de SyntaxHighlighter Evolved plugin installeren en activeren. Voor meer details, zie onze stap voor stap handleiding over hoe een WordPress plugin te installeren. Na activering, kunt u verder gaan en bewerken van de blog post waar u wilt de code weer te geven. In het post edit scherm, voeg het ‘SyntaxHighlighter Code’ blok toe aan je post.


U zult nu een nieuw code blok zien in de post editor waar u uw code kunt invoeren. Nadat je de code hebt toegevoegd, moet je de blok instellingen selecteren in de rechter kolom.

SyntaxHighlighter code blok instellingen

Eerst moet u de taal voor uw code selecteren. Daarna kun je regelnummers uitzetten, het eerste regelnummer opgeven, elke regel markeren die je wilt en de functie om links klikbaar te maken uitzetten.

Als je klaar bent, sla je bericht op en klik op de preview knop om het in actie te zien.

De plugin wordt geleverd met een aantal kleurenschema’s en thema’s. Om de kleur thema te veranderen, moet u Instellingen > SyntaxHighlighter pagina te bezoeken.

Op de instellingen pagina, kunt u een kleur thema kiezen en de SyntaxHighlighter instellingen wijzigen. U kunt uw instellingen opslaan om een voorbeeld van het code blok te zien onderaan de pagina.


Code Syntax Block WordPress plugin

Hoe werkt de Code Syntax Block plugin? De Code Syntax Block plugin werkt iets anders. Het is iets minder uitgebreid dan de vorige plugin. Deze gratis plugin breidt alleen het bestaande codeblok in de WordPress core uit. Code Syntax Block maakt gebruik van de Prism JavaScript bibliotheek om syntax highlighting weer te geven op de front-end van je WordPress website.

In een apart CSS bestand kun je de kleuren en stijlen specificeren die in de code moeten worden opgenomen als je dit wilt. De plugin heeft een goed doordacht ontwerp 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 is een nieuw tabblad toegevoegd met instellingen voor het code blok. Gebruikers kunnen een aantal zaken configureren, waaronder de taal, weergave van regelnummers en de titel van het codeblok.

Als je regelmatig code snippets wilt weergeven in blog posts en op pagina’s, dan is duidelijke opmaak geen overbodige luxe. De Code Syntax Block plugin werkt erg goed en biedt alle aanpassingsmogelijkheden die je nodig hebt. Zeker het proberen waard.