Codevoorbeeld

Toont een stuk code netjes opgemaakt: met syntaxkleuren, een titelbalk, een kopieerknop en desgewenst regelnummers of inklapbaar. Alle codevoorbeelden op deze site — ook die hieronder — gebruiken dit block. De technische naam is Code.

Zet dit block overal waar je technische documentatie of implementatie-uitleg schrijft: API-voorbeelden, configuratiebestanden, terminalcommando's. De titelbalk maakt meteen duidelijk om welk bestand of welke taal het gaat, en de kopieerknop voorkomt tikfouten bij lezers die het voorbeeld willen overnemen. Op deze kennisbank wordt Code gebruikt voor elke "prompt"-sectie die bij een ander block hoort, zodat je meteen ziet hoe je dat block zelf zou aanvragen.

Voor lange configuraties of scripts zet je line-numbers aan, zodat je in de tekst naar een specifieke regel kunt verwijzen. Bij korte snippets laat je dat weg voor een rustiger beeld. Combineer dit block bijvoorbeeld met FAQ om technische vragen te beantwoorden met een direct uitvoerbaar voorbeeld.

Gebruiksscenario's per site-type

Bij een SaaS- of API-product zet je Code in de documentatie om integratievoorbeelden te tonen: een curl-commando, een JSON-response of een stukje configuratie. Een webshop met een eigen API voor voorraadkoppelingen gebruikt het block op dezelfde manier in de ontwikkelaarsdocumentatie. Bij een portfolio van een developer of bureau is Code juist het middel om technische vaardigheid te demonstreren: een uitgelicht stukje eigen werk, compleet met syntaxkleuren, oogt geloofwaardiger dan een screenshot. Een zakelijke dienstverlener die technische how-to's publiceert — bijvoorbeeld een IT-partij met een kennisbank — gebruikt het block voor stap-voor-stap terminalinstructies.

Samenspel met andere blocks

Binnen een FAQ is Code de aangewezen manier om een technische vraag te beantwoorden met een direct uitvoerbaar voorbeeld in plaats van een beschrijving in lopende tekst. In een kennisbankartikel over JSX-opbouw is dit block zelfs het fundament van de uitleg: elk concept wordt toegelicht met een bijbehorend codevoorbeeld.

Een veelgemaakte fout is te veel code in één blok proppen. Boven de ongeveer dertig regels wordt een codeblok minder leesbaar, zelfs met regelnummers; splits een lang voorbeeld dan liever in twee blokken met een korte uitleg ertussen. Kies de language-prop altijd bewust — naast correcte syntaxkleuring gebruiken schermlezers en zoekmachines dat gegeven soms ook om de inhoud goed te classificeren.

Voorbeeld

const greeting = 'Hallo Obelisk'; console.log(greeting);

De prompt voor dit voorbeeld

Zet dit stukje code op de pagina als codeblok met regelnummers en een kopieerknop.