Leren hoe je code moet weergeven in WordPress is cruciaal voor bloggers en makers van content die consequent code online publiceren voor hun lezers. Computercode geeft, door het ontwerp, iets nieuws weer op de voorkant van een website in plaats van de tags, schuine strepen en haakjes die je in de eigenlijke codefragmenten vindt.
Dit vormt echter een probleem voor wie schrijft over ontwikkeling en ontwerp, want je hebt een manier nodig om de code goed weer te geven zonder dat die zijn eigenlijke werk doet, zoals het maken van een knop of het toevoegen van styling aan een paragraafblok.
Simpel gezegd, als je een blogbericht schrijft en er een voorbeeld van een codefragment in zet, dan wil je voorkomen dat de code echt werkt! Op die manier kunnen lezers de code in zijn ruwe vorm zien, de code in een mooi opgemaakt blok bekijken, en zelfs de inhoud ervan kopiëren om te gebruiken bij hun ontwikkelingswerk.
In deze gids laten we je precies zien hoe je code in WordPress kunt weergeven (ongeacht je WordPress thema) met behulp van verschillende methoden, en we helpen je beslissen welke methode het beste werkt voor jouw werkproces.
Wat gebeurt er als je gewone code toevoegt in WordPress?
Je vraagt je misschien af wat er zou gebeuren als je wat code schrijft in de visuele editor van WordPress. Je rommelt immers niet met de tekst- of code-editors, dus zou je stuk code niet gewoon moeten werken?
Waarschijnlijk niet.
Hier zijn een paar ongewone resultaten die kunnen optreden:
- De code verschijnt gedeeltelijk, waarbij sommige stukjes met code aan het begin van het artikel verschijnen en andere helemaal verdwijnen. Dit ziet er onprofessioneel uit voor bezoekers; het betekent dat je code niet nauwkeurig is.
- Er verschijnt helemaal niets, waarbij de code helemaal uit het zicht verdwijnt in de backend en niets te zien is op de frontend van je bericht.
- Je ziet vreemde opmaak – vaak iets dat niet gebruiksvriendelijk of publiceerbaar is voor een publiek.
-
Het kan zijn dat de code slechts gedeeltelijk rendert.
Om een paar van deze resultaten te illustreren, gebruiken we het volgende HTML codefragment:
<!DOCTYPE html>
<html>
<head>
<style>
.cities {
background-color: green;
color: white;
border: 4px solid black;
margin: 10px;
padding: 10px;
}
</style>
</head>
<body>
<div class="cities">
<h2>Chicago</h2>
<p>A nickname for Chicago is The City of Broad Shoulders.</p>
</div>
<div class="cities">
<h2>Los Angeles</h2>
<p>A nickname for Los Angeles is The City of Angels.</p>
</div>
<div class="cities">
<h2>New York</h2>
<p>A nickname for New York is The Big Apple.</p>
</div>
</body>
</html>Dit specifieke codefragment gebruikt HTML stijlelementen om drie groene blokken met content – met headers en paragrafen – te produceren.
We willen echter de ruwe code weergeven in een blogbericht, en dus niet dat die daadwerkelijk in die blokken wordt uitgevoerd.
Hier zijn de resultaten als we de code rechtstreeks in de WordPress Gutenberg Block Editor plakken:
Zoals je ziet, probeert WordPress de code te gebruiken voor zijn hoofddoel: het genereren van content – toch ontdoet het de code van zijn styling, zodat het niet het resultaat oplevert dat we aan de lezers wilden laten zien.
Om dit soort situaties te voorkomen, raden we je aan om in plaats daarvan een van de onderstaande methoden te gebruiken om code weer te geven.
Zo geef je code weer op je WordPress site (6 methoden)
Deze methoden zijn opgesomd van gemakkelijkst naar moeilijkst, en we hebben enkele speciale methoden voor degenen die graag code en content schrijven in markdown editors (en liever niet in WordPress).
Methode 1: De Gutenberg Block Editor gebruiken (standaard)
Om te oefenen met het weergeven van code in WordPress kun je het volgende codefragment gebruiken, dat HTML en interne CSS gebruikt om een eenvoudig resultaat te produceren met één blauwe kop en één zwarte paragraaf:
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: beige;}
h1 {color: blue;}
p {color: black;}
</style>
</head>
<body>
<h1>Fun Facts About Otters</h1>
<p>A group of otters in water is called a "raft," since they all link arms to prevent from floating away.</p>
</body>
</html>Wanneer de code uitgevoerd wordt, toont hij dit aan de frontend:
Maar door deze tutorial te volgen, leer je hoe je de ruwe code zelf kunt weergeven, niet wat de code aan de frontend moet laten zien.
Stap 1: Voeg een Code blok toe in WordPress
De WordPress Gutenberg editor heeft al een ingebouwd Code blok, waarmee je stukjes code kunt weergeven zonder de opmaak te verliezen of de code daadwerkelijk te activeren.
Om te beginnen open je een bericht of pagina in WordPress en klik je vervolgens op een van de knoppen Add block.
Klik op een van de knoppen met Add block
Hierdoor verschijnt de verzameling beschikbare blokken. Je kunt zoeken naar het blok genaamd Code of een trefwoord als “code” in de zoekbalk typen.
Zodra je het blok Code ziet (met de haakjespictogrammen), klik je daarop om een stuk code in het bericht in te voegen.
Je zou nu een veld moeten zien met de prompt “Write code…”.
De WordPress Gutenberg editor ondersteunt markdown, dus je kunt het blok Code ook vinden en invoegen door een forward slash (/) in de editor te typen en dan “C” of “Code” te gaan schrijven. WordPress toont dan alle relevante blokken, waardoor je ze sneller kunt invoegen.
Het is gemakkelijk om het Code blok en het custom HTML blok door elkaar te halen. Het Custom HTML blok is echter bedoeld voor het toevoegen van custom HTML om aan de frontend weer te geven, niet voor het toevoegen van ruwe code die mensen kunnen zien.
Stap 2: Plak de weer te geven code in het veld van het Code blok
Nu is het tijd om de code die je wilt weergeven te kopiëren en te plakken in het vak met de tekst “Write code…”.
Je code verschijnt nu in het vak.
Het mooie van het Code blok is dat het alle spaties en tabs respecteert die je al in het codefragment had staan. Daardoor ziet het er niet anders uit dan de bron waaruit je het hebt gekopieerd.
Stap 3: Publiceer en bekijk de resultaten
Om je code op je WordPress bericht of pagina weer te geven, beëindig je het proces door op de knop Publish te klikken.
Je kunt ook een idee krijgen van hoe het er voor het publiceren uitziet door Preview te selecteren.
Als je eenmaal op de knop Publish hebt gedrukt, bezoek dan de live versie van dat bericht om te bevestigen dat je codefragment als ruwe code wordt weergegeven.
Zoals je ziet is het blok Code vrij eenvoudig, maar het biedt de nodige functionaliteit voor het handhaven van de opmaak bij het publiceren van code op blogberichten.
Kijk eens naar de onderstaande schermafbeelding. In ons voorbeeld hier is niets veranderd ten opzichte van het oorspronkelijke codefragment; het wordt simpelweg in een grijs vak aan de frontend weergegeven.
Stap 4: Wijzig eventueel de opmaak van het codeblok
Om het codeblok een beetje op te laten vallen, kun je het uiterlijk ervan veranderen ten opzichte van hoe het er standaard uitziet.
Om de opmaakopties voor het blok te zien , selecteer je het Code blok en kies je de knop Settings (tandwiel-icoon). Dit opent het tabblad Block, dat alleen de blokinstellingen voor je geselecteerde blok toont – in dit geval het blok Code.
Je kunt het Code blok stylen zoals je wilt, met opties om zaken als tekst en achtergrondkleuren te veranderen.
Je kunt ook:
- De grootte van de tekst wijzigen
- Vulling en marges aan het codevak toevoegen
- Een rand opnemen met een aangepaste breedte en kleur
Zoals altijd klik je op de knop Publish als je klaar bent met het bewerken van het blok, en bekijk je het resultaat aan de frontend van je WordPress bericht.
Methode 2: Een plugin gebruiken
Een andere manier om code op WordPress weer te geven is door een plugin te installeren.
Deze methode lijkt misschien een beetje overbodig als je bedenkt dat WordPress al een ingebouwd Code blok heeft, maar sommige plugins bieden extra mogelijkheden en opmaaktools om het werken met een plugin de moeite waard te maken. Je kunt je codeblokken dus mooier maken dan wat je zou krijgen met het standaard Gutenberg Code blok.
Bovendien kunnen sommige gebruikers van de Classic WordPress Editor het gebruiken van een plugin gemakkelijker vinden, omdat het wat lastiger is om code weer te geven in de Classic Editor.
Om te beginnen moet je een “syntax highlighter” plugin kiezen, wat een sjieke manier is om te zeggen dat de plugin je broncode markeert en de opmaak ervan intact houdt.
Hier zijn enkele populaire plugins voor het weergeven van code op WordPress:
We zullen in deze tutorial de Enlighter plugin gebruiken, omdat die opties biedt om te labelen welke typen code je in je codevakken weergeeft, samen met vele andere stylingfuncties. Je bent echter meer dan welkom om de anderen uit te proberen, want ze doen allemaal grotendeels hetzelfde.
Stap 1: Installeer een Syntax Highlighter plugin
Installeer de Enlighter – Customizable Syntax Highlighter plugin op je WordPress site met de plugininstallatiemethode van je voorkeur.
Na activering is de plugin klaar om code in te voegen in elk bericht/pagina met een Gutenberg blok of de Classic Editor Insert knop.
Stap 2: Voeg het Enlighter Sourcecode blok toe binnen een bericht
Als je de WordPress Gutenberg Block Editor gebruikt, open dan een bericht waarin je code wilt weergeven. Klik op een van de knoppen Add block (+ pictogram) om de verzameling beschikbare blokken te tonen.
Blader of typ een trefwoord voor het Enlighter Sourcecode blok. Klik op dat blok om het in het bericht in te voegen.
Stap 3: Plak je code in het Syntax Highlighter blok
Het Enlighter Highlighter blok verschijnt dan in de Block Editor, met een titel voor “Generic Highlighting” en een veld met “Insert sourcecode…”.
Neem de code die je wilt weergeven op WordPress en plak/type die in het veld “Insert sourcecode…”.
Als syntax highlighter behoudt de plugin alle opmaakkeuzes en tabbladen. Als je tevreden bent met het resultaat, klik je op de knop Publish.
Stap 4: Bekijk je code aan de frontend
Daarmee kun je de frontend van je bericht bekijken om te zien wat sitebezoekers te zien krijgen.
De Enlighter plugin biedt een minimalistisch standaardthema voor de weergave van code, met regelnummers om te helpen met organiseren en verwijzen.
Zoals we al zeiden heeft het gebruik van een plugin om code op WordPress weer te geven voordelen ten opzichte van de andere methoden. De frontend versie van de Enlighter syntax plugin benadrukt bijvoorbeeld regels als de gebruiker over je code scrolt.
Er zijn ook verschillende knoppen in de rechterbovenhoek van het codevak, waaronder één die de code in ruwe tekst weergeeft, zonder de regelnummers.
De tweede knop heet Copy to clipboard, die onmiddellijk alles in het codevak kopieert naar het klembord van de gebruiker, dat hij kan plakken naar elk programma dat hij wil.
De derde knop tenslotte opent de code in een nieuw venster en presenteert die in een platte tekstversie van je browservenster.
Stap 5: Stel de taal- en regelinstellingen in voor het codevak
De Enlighter plugin wordt geleverd met verschillende thema’s en krachtige aanpassingstools om het codevak eruit te laten zien zoals je wilt. Als je liever niet het standaardthema gebruikt, ga dan terug naar je bericht binnen WordPress en klik op het momenteel geopende Enlighter Sourcecode blok.
Hierdoor verschijnt de zijbalk Block in WordPress. Als die niet verschijnt, klik dan op de knop Settings (tandwielpictogram) in de rechterbovenhoek van het WordPress venster.
De eerste instelling om aan te passen is het veld Language – dit vertelt de plugin welke codetaal wordt weergegeven, zodat het de juiste opmaak en markering kan bieden.
Er zijn nogal wat codetalen om uit te kiezen, dus scroll door de lijst en kies er een die het meest geschikt is.
Het veld Speciallines markeert alle regels die je opgeeft. Om dit te bereiken typ je regelnummers in, gescheiden door komma’s.
Het resultaat is dat bezoekers van de site alle door jou opgegeven regels gemarkeerd zien.
Het veld Lineoffset is een manier om je codefragment bij een specifieke genummerde regel te laten beginnen, wat nuttig is als je alleen een deel van de code toont die deel uitmaakt van een grotere verzameling regels.
Zoals je ziet begint door 10 te typen in het Lineoffset veld het hele codevak bij het getal 10.
Stap 6: Kies een thema
Het thema Enlighter is het standaardthema van deze plugin. Maar in het Theme veld (nog steeds onder het Settings paneel van het blok) kun je een groot aantal ingebouwde thema’s kiezen.
Het Godzilla thema geeft bijvoorbeeld code weer alsof het bovenop grafiek- of tekenpapier staat.
En het thema Atomic schakelt de achtergrond om naar een donker thema terwijl het voornamelijk witte tekst en roze kleuren biedt voor code-tags.
Een ander voorbeeld is het Classic thema, dat een minder minimalistische versie is van het Enlighter thema met fellere kleuren en meer gedefinieerde lijnen.
Stap 7: Overweeg een aangepast thema te bouwen
De Enlighter plugin biedt een tabblad in het WordPress dashboard voor het aanpassen van elk aspect van de plugin en zijn markeerfuncties.
Om volledige controle te krijgen over het ontwerp en de weergave van je codeboxen, ga je naar de Enlighter tab (<> icoon) en kies je Appearance of Theme Customizer.
Op het tabblad Appearance kun je een standaard thema kiezen, terwijl je ook toegang hebt tot het aanpassen van elementen als:
- Code-inspringing
- Tekstoverloop
- Line-nummering
- Line-hover effect
- RAW code bij dubbelklikken
De Thema aanpassingssectie bevat een lange lijst met tabbladen om een code highlighter-thema vanaf nul op te bouwen, met opties om knoppen, expressies, talen en meer aan te passen.
Bonus: Enlighter gebruiken met de Classic Editor
De Enlighter plugin werkt iets anders voor degenen die nog steeds de Classic WordPress Editor gebruiken.
Als je de Enlighter plugin hebt geïnstalleerd, ga dan naar een willekeurig bericht of pagina en zoek de knop Enlighter Code Insert in het bedieningspaneel van de editor.
Hierdoor verschijnt een nieuw venster met de naam Enlighter Code Insert.
Plak de code die je wilt weergeven in het grote (ongelabelde) veld onderaan.
Klik op het dropdown menu van het Language veld om de juiste codeertaal te kiezen.
Als je klaar bent, klik je op de knop OK. Je kunt ook de andere functies in dat venster aanpassen, zoals het toevoegen van regel-inspringing.
Klik op de knop Publish voor het bericht, en bekijk dan het resultaat aan de frontend. Het standaard codevak voor de Classic Editor is een donker thema, maar je kunt het uiterlijk van je codevak veranderen en zelfs je eigen thema’s bouwen.
Methode 3: Een encodertool gebruiken
Encodertools dienen als alternatieve opties wanneer je code probeert weer te geven in WordPress, vooral als je niet van plan bent het zo vaak te doen (en liever niet met een plugin rommelt).
HTML encoders behouden de integriteit van codeformats, vooral die met speciale tekens en tabs. Encoders kunnen alle soorten code aan, maar ze vertalen dan de ingevoegde code in HTML ready code die gemakkelijk in WordPress te plakken is.
Er zijn geen betrouwbare encoderprogramma’s als plugins, maar vele worden aangeboden als gratis externe webapps. Let ook op dat encodertools geen stylingtoolsbieden, dus je krijgt alleen de code zoals die moet worden weergegeven (geen mooie vakken of regelaanpassingen).
Enkele betrouwbare encodertools zijn:
Op grond van onze tests is de meest effectieve encoder de W3Docs HTML Encoder, dus die gebruiken we voor deze tutorial.
Stap 1: Open de encoder en kies Settings
Ga naar de website van W3Docs HTML Encoder.
De pagina toont twee vakjes naast elkaar. In de linker kun je je code plakken. De rechter toont de gecodeerde versie die je kunt kopiëren en in WordPress kunt plakken.
Je moet echter eerst instellen welk type code je wilt bewaren:
- Kies JavaScript unicode als je code met JavaScript elementen plakt.
- Kies HTML symbols als je HTML gebruikt.
Stap 2: Plak je code en klik op Encode
Plak de code die je in WordPress wilt weergeven in het linkerveld. Zoek en klik dan rechtsboven op de knop Encode.
Stap 3: Kopieer het gedecodeerde resultaat
Het eindproduct ziet er misschien verwarrend uit, maar het is eigenlijk een combinatie van HTML elementen om elk aspect van de code die je hebt ingevoegd te behouden, zonder dat de code wordt geactiveerd en iets anders laat zien aan de frontend.
Klik op de knop Copy.
Stap 4: Plak gecodeerde HTML in de code- of teksteditor van WordPress
Ga terug naar WordPress, en open het gewenste bericht of pagina.
Selecteer het menu-item Options (drie verticale puntjes) in de rechterbovenhoek. Klik op de optie Code editor.
Je ziet nu de Code editor in plaats van de visuele Blok editor. Zoek het gebied waar je de code wilt weergeven en plak je gecodeerde HTML in de editor.
Als je de Classic WordPress Editor gebruikt, moet je naar het tabblad Text gaan, dat hetzelfde is als de Code Editor van de Gutenberg Block Editor.
Stap 5: Publiceer en bekijk de code
Klik op Update of Publish voor het bericht, en navigeer dan naar de frontend van dat bericht om te bekijken hoe het eruit ziet.
Je zou de oorspronkelijke code moeten zien die in de encoder is geplakt, voordat de tool HTML coderingselementen toevoegde. Zoals gezegd zijn er geen stylingfuncties met de encoders, dus dit is een prachtige methode voor een schoon, minimalistisch uiterlijk.
Methode 4: Een custom shortcode gebruiken
Het maken van een custom shortcode doet het werk om stukken herbruikbare code in te voegen zonder dat je hoeft te kopiëren en te plakken. Daarom bieden aangepaste shortcodes een solide mogelijkheid voor het weergeven van code op WordPress.
Hier zijn de voordelen van het gebruik van custom shortcodes om code weer te geven:
- Met custom shortcodes kun je ingewikkelde code één keer opslaan en vervolgens hergebruiken, zodat je niet telkens langere codefragmenten hoeft te typen.
- Je kunt je eigen styling CSS schrijven voor de code highlighters en vakjes.
- Shortcodes kunnen door iedereen worden gebruikt, zodat andere medewerkers met een klik op de knop gebruik kunnen maken van jouw code highlighters en blokken.
Het maken van een custom shortcode vereist ervaring met het bewerken van WordPress themabestanden, het werken met PHP code, en mogelijk met het maken van WordPress plugins. Vanwege die vereisten kan het maken van een aangepaste shortcode voor WordPress moeilijk zijn voor wie nieuw is in PHP.
Het eindproduct resulteert echter in een aanzienlijk eenvoudiger manier om code op WordPress weer te geven.
Je kunt de custom shortcode de naam geven die je wilt en meerdere opties maken, zoals [html] [/html] en [css] [/css], voor verschillende codetalen.
Houd in gedachten dat custom shortcodes het beste werken voor syntax highlighting als je de Text editor gebruikt (in WordPress Classic) of het vak Custom HTML als je werkt met de WordPress Gutenberg Block Editor.
Het doel is om een cusom shortcode te bouwen waar je code kunt typen of plakken tussen de openings- en sluitingstags van de shortcode.
Na publicatie worden de styling- en highlighting-instellingen van je custom code getoond aan de frontend. En de code die je hebt toegevoegd wordt mooi weergegeven in de syntaxis highlighter.
Methode 5:
Misschien wel de oudste – maar nog steeds ongelooflijk betrouwbare – manier om code op WordPress weer te geven is door simpelweg specifieke HTML tags toe te voegen rond het codefragment. Deze methode is het beste voor als je werkt met de Classic WordPress Editor, of in een willekeurige HTML editor.
Er zijn twee mogelijkheden:
<code>tags: Het beste voor het weergeven van een korte regel code; vaak gebruikt binnen alinea’s<pre>tags: Ideaal voor langere blokken code, of wanneer je meer opmaakmogelijkheden wilt hebben
Optie 1: Gebruik <code> tags voor inline codefragmenten
Makers van content die schrijven over codering willen niet altijd grote codeblokken gebruiken. Soms is het zinvoller om een snel stukje code in een paragraaf op te nemen.
Je moet echter nog steeds de opmaak van die code markeren en behouden. En sommige code kan problemen veroorzaken met de omringende inhoud als die niet goed bewaard blijft.
Neem bijvoorbeeld de tag <br> – zonder <code> tags zou die gewoon een break toevoegen aan je alinea.
Door de codering binnen deze tags te plaatsen krijg je een veel netter resultaat:
<code> </code>Open daarvoor een WordPress post, en schakel de Code Editor (voor de Gutenberg Block Editor) of de Text Editor (als je WordPress Classic gebruikt) in.
Plak of typ deze tags ergens in de editor; voeg de code die je wilt weergeven nog niet in. Voeg in plaats daarvan een spatie toe tussen de tags.
<code> </code>
Schakel over naar de Visual Editor (ongeacht of je in Gutenberg of Classic WordPress zit).
Je ziet een kleine grijze ruimte binnen de visuele inhoud. Klik om je cursor binnen die grijze ruimte te plaatsen. Hier kun je de code voor weergave plakken of typen.
Terwijl je typt, breidt de grijze ruimte zich uit om het codefragment te plaatsen. Klik op de knop Publish of Update voor dat bericht.
Aan de frontend van het bericht zie je nu de code bewaard zoals het hoort, en zonder vreemde activiteiten (zoals het toevoegen van een break aan je content).
De opmaak van deze <code> tags is meestal wat kaal, maar het hangt vaak af van de styling van je thema. Ons voorbeeld verandert bijvoorbeeld alleen het lettertype, maar bevat geen grijze achtergrond.
Optie 2: Gebruik <pre> tags voor langere codeblokken
Langere stukjes code verdienen hun eigen blokken, gescheiden van de inhoud die je in paragrafen schrijft. Daarvoor raden we aan om <pre> tags te gebruiken.
Het toevoegen van een <pre> tag gaat net als bij de <code> tags, maar je hebt meer ruimte om mee te werken bij het invoegen van je code.
Ga naar een bericht en open de Code (Gutenberg) of Text (Classic WordPress Editor). Plak of typ de code die je wilt weergeven. Omring de code vervolgens met deze tags:
<pre> </pre>
Schakel over naar de Visual Editor om te zien hoe het eruit ziet. Je zult zien dat het tekstgedeelte een label “Preformatted” krijgt, en dat is precies waar de tag <pre> voor bedoeld is.
Klik op Publish of Update, en schakel dan over naar de frontend om je code in zijn oorspronkelijke vorm te zien. In vergelijking tot <code> tags, zijn <pre> tags belabberd qua opmaak, dus je blijft achter met een zo eenvoudig mogelijk uiterlijk. Er zijn echter manieren om deze zelf te stylen.
Tips voor het stylen van <pre> tags
De <pre> tags zijn minder stabiel dan <code> tags, dus je kunt moeilijkheden ondervinden, afhankelijk van het type code dat je probeert te tonen.
Gebruik deze tips om het uiterlijk te verbeteren:
- Doe je best om regeleinden te verwijderen, of helemaal te vermijden, omdat de
<pre>tag deze vaak niet herkent. In het algemeen reageert hij slecht op te veel regeleinden. - Overweeg in je CSS een attribute
overflow-x:auto;toe te voegen om de code van de<pre>tag te laten scrollen. Dit helpt bij overvolle inhoud, want de<pre>tag alleen laat je code van de pagina aflopen. - Blijf bij monospaced fonts.
Je kunt ook de tekstopmaak en het kader achter de code stylen. Hier is een startingtemplate die je kunt toevoegen aan je CSS bestand:
article pre{
background:#ffffff;
border:3px #eee solid;
border-top:30px #eee solid;
font-family:Consolas, courier;
font-size:0.8em;
white-space:pre;
overflow-x:auto;
}Methode 6: Een markdown editor gebruiken die verbinding maakt met WordPress
Markdown editors bieden de mogelijkheid om niet alleen sneller te typen en op te maken, maar veel ervan maken direct verbinding met WordPress om direct vanuit de editor te publiceren.
Veel schrijvers wenden zich tot markdown editors vanwege dit snelle proces voor het maken van content. En gelukkig bieden sommige van die editors markdown voor codeblokken, wat betekent dat je code kunt weergeven in de markdown editor, en die dan meteen naar WordPress kunt sturen om te publiceren.
Bedenk wel dat normale teksteditors (zoals Sublime Text) de integriteit van de code niet behouden als ze worden overgezet voor publicatie op WordPress. En HTML editors, hoewel uitstekend voor het schrijven en opslaan van code, bieden ook niet de markeerfuncties die nodig zijn om code te bewaren voor WordPress publicatie.
Er zijn genoeg markdown editors om uit te kiezen, maar de ideale oplossingen hebben twee eigenschappen gemeen:
- Rechtstreeks exporteren naar WordPress
- Markdown voor het markeren van code
Je kunt echter kiezen voor een markdown editor met HTML export, als je niet dol bent op directe export naar WordPress.
De beste markdown editors met beide functies zijn:
Ulysses en ByWord zijn premium apps, terwijl Obsidian zowel gratis als premium versies heeft.
Voor de volgende tutorial gebruiken we Ulysses.
Stap 1: Voeg een Longform Code blok toe in Ulysses
Typ tijdens het opstellen van een document in Ulysses " markdown – dat zijn twee apostrofs – wanneer je onmiddellijk een codeblok wilt toevoegen in een document.
Deze markdown methode is voor langere blokken code. Het is niet bruikbaar in het midden van een paragraaf, dus je moet een nieuwe regel maken om de markdown te activeren.
Zodra de code markdown verschijnt, kun je er van alles in typen of plakken.
Een andere manier om het codeblok in te schakelen is door te klikken op het menu-item Markdown (drie horizontale puntjes) en dan de optie Code te kiezen.
Nadat je op dit menu-item hebt geklikt, verschijnt het codestreepveld waar de cursor het laatst was.
Om codefragmenten binnen alinea’s te plaatsen, wend je je tot de `` markdown (die er bijna hetzelfde uitziet, maar het zijn eigenlijk twee accent aigu’s in plaats van apostrofs).
Stap 3: Exporteer naar WordPress
Als je je document klaar hebt, is het tijd om alles te exporteren naar WordPress.
Het mooie van markdown editors die verbinding maken met WordPress is dat ze de codeblokken gedurende de overdracht handhaven. Je ziet dus mooi opgemaakte code highlighters, klaar om in WordPress te publiceren.
Ga in Ulysses naar de bovenkant van het document om de werkbalk te vinden. Klik op de knop Publishing Preview.
Dit brengt een dropdown menu tevoorschijn om een platform en website te selecteren waarop je wilt publiceren. Je kunt ook de optie Manage Accounts in datzelfde menu gebruiken om in te loggen op een WordPress website voordat je exporteert.
Zodra je de juiste website hebt, klik je op de knop Publish.
Vul de titel van het bericht in, de planning, en alle andere informatie die je wilt, zoals categorieën, tags en uitgelichte afbeeldingen.
Het belangrijkste is echter dat je de Status op Draft zet, zodat je het bericht niet publiceert zonder het eerst op WordPress te bekijken.
Klik op OK om verder te gaan.
Binnen een paar seconden plaatst Ulysses het hele document in een nieuw WordPress bericht (het kan zijn dat je moet inloggen in je WordPress admin als het verschijnt).
Je ziet de codeblokken al geconfigureerd en klaar om te publiceren. Klik op de knop Publish om het live te zetten.
Aan de frontend zie je dat de inline codefragmenten en grotere codeblokken mooi gemarkeerd zijn, en dat de opmaak van die code bewaard is gebleven.
Samenvatting
Er zijn verschillende methoden om code goed weer te geven op WordPress, en het hangt vaak af van de gebruikte WordPress editor, de codetaal die je wilt weergeven, en hoe je die code wilt weergeven en opmaken. Kiezen voor een plugin zal bijvoorbeeld zeker een creatievere opmaakervaring opleveren dan het standaard Code blok in de WordPress Gutenberg Editor.
In dit artikel hebben we veel verschillende methoden behandeld die illustreren hoe je code in WordPress kunt weergeven.
We raden typisch aan om te beginnen met methode 1 en je erdoorheen te werken. Methode 2 is geschikt als je op zoek bent naar meer stylingopties, en methoden 3-5 zijn alleen nuttig in bijzondere situaties. Methode 6 is ietwat een bonusoplossing, bedoeld voor degenen die de voorkeur geven aan markdown editors boven rechtstreeks schrijven in WordPress.
Welke methode je ook kiest, een betrouwbare hostingprovider kan je helpen je site nog verder te verbeteren. De WordPress Hosting oplossingen van Kinsta bieden pakketten voor sites van alle soorten en maten, en het gebruiksvriendelijke platform – MyKinsta, een zelfgebouwd admindashboard – maakt het bewerken van elk deel van je site en zijn bestanden een makkie. Bovendien krijg je de extra voordelen van Kinsta’s snelheid, beveiliging en ondersteuning van wereldklasse.
Heb je al eens geprobeerd om code in WordPress weer te geven? Zo ja, welke methode werkte voor jou het beste? Laat het ons weten in de commentsectie hieronder.
Laat een reactie achter