IN DEZE HANDLEIDING:
Code syntax css java php weergeven in WordPress
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.
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.
Meer Syntax code WordPress plugins
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.
Raw html WordPress plugin
Hiermee kunt u automatische opmaak uitschakelen, zoals slimme aanhalingstekens en automatische paragraaf creatie, en ruwe HTML/JS/CSS code in uw berichten gebruiken zonder dat WordPress het verknoeit.
Met deze plugin kun je elk deel van je bericht verpakken in [raw]…[/raw] tags om te voorkomen dat WordPress regels omzet in HTML paragrafen, apostrofs vervangt door typografische aanhalingstekens, enzovoort. Dit is erg handig als u een CSS blok of JavaScript aan uw bericht wilt toevoegen.
RawHTML voegt ook nieuwe selectievakjes toe aan het scherm “Post bewerken” waarmee u bepaalde WP-filters kunt uitschakelen op een per-post basis. Op deze manier kunt u:
- Wptexturize uitschakelen (de functie die slimme aanhalingstekens en andere typografische tekens creëert).
- Automatische paragraaf creatie uitschakelen.
- Afbeelding smilies uitschakelen.
- Convert_chars uitschakelen (de functie die ampersands converteert naar HTML entiteiten en sommige Unicode karakters “repareert”).
De gratis versie ondersteunt alleen het bewerken van berichten in de Tekst tab (genaamd “HTML” in oudere WordPress versies). Neem de Pro versie als u wilt kunnen schakelen tussen Tekst en de Visuele editor zonder dat WordPress uw inhoud verknoeit.