NL

Syntax highlighter

Met deze syntax highlighter kleur je broncode zonder iets te installeren: plak je code, kies de taal en een licht of donker kleurenschema en kopieer de kant-en-klare HTML. De kleuren zitten in de code zelf, zodat die in blogs, mails en documenten goed te zien is zonder extra stylesheet.

Bron: WCAG 2.2 – Success Criterion 1.4.3 Contrast (Minimum): 4,5:1 voor tekst (kleuren van beide thema's gecontroleerd). Bijgewerkt: .

Plak broncode. De kleuring in het voorbeeld wordt bij elke wijziging bijgewerkt.

Je tekst blijft in je browser: hij wordt niet verstuurd, niet opgeslagen en niet in de adresbalk gezet.

Voorbeeld

// Een begroeting tonen
function greet(name) {
  const text = "Hallo, " + name + "!";
  console.log(text);
  return text.length;
}

greet("wereld");
Mijn toolbox

Resultaat

Gekleurde HTML
<pre style="background:#ffffff;color:#1f2328;padding:12px 14px;border-radius:6px;overflow:auto;font:13px/1.5 ui-monospace,SFMono-Regular,Menlo,Consolas,'Liberation Mono',monospace;tab-size:4;margin:0"><code style="font:inherit"><span style="color:#57606a;font-style:italic">// Een begroeting tonen</span> <span style="color:#cf222e">function</span> <span style="color:#8250df">greet</span>(name) { <span style="color:#cf222e">const</span> text = <span style="color:#0a3069">"Hallo, "</span> + name + <span style="color:#0a3069">"!"</span>; console.<span style="color:#8250df">log</span>(text); <span style="color:#cf222e">return</span> text.length; } <span style="color:#8250df">greet</span>(<span style="color:#0a3069">"wereld"</span>);</code></pre>
Herkend
JavaScript / TypeScript, 8 regels, 148 tekens
De HTML bevat de kleuren als style-attributen en kan overal worden geplakt waar HTML is toegestaan. De herkenning is een benadering op basis van patronen, geen volledige parser; bij ongebruikelijke schrijfwijzen kan een stuk ongekleurd blijven. De code wordt alleen in je browser verwerkt, niet opgeslagen en niet verstuurd.

Zo wordt het berekend

Syntax highlighting geeft de bouwstenen van broncode een kleur: sleutelwoorden, tekenreeksen, getallen, commentaar en functienamen krijgen elk hun eigen kleur. Zo is code beter leesbaar, vooral in teksten, documentatie en mails, waar geen editor met kleurenschema beschikbaar is.

Wat de highlighter kan

Veilig en zonder verlies

De broncode wordt niet gewijzigd, alleen in stukken verdeeld en met kleurinformatie omgeven. Tekens als < en & worden vervangen, zodat code met HTML-fragmenten de rest van de pagina niet beïnvloedt. Wil je code vooraf opschonen, gebruik dan de JSON-formatter, de SQL-formatter of de HTML-formatter.

Veelgestelde vragen

Hoe kleur ik code voor een blogbericht?

Plak de code, kies taal en kleurenschema en kopieer de HTML uit het resultaatveld. Voeg die in de blogeditor in als HTML-blok. De kleuren zitten in de code, een extra stylesheet is niet nodig.

Kan ik de gekleurde code in Word of een mail plakken?

Ja, meestal via het voorbeeld: selecteren, kopiëren en plakken, de kleuren blijven behouden. In programma’s die geen HTML accepteren helpt een schermafbeelding van het voorbeeld.

Welke talen worden ondersteund?

JavaScript en TypeScript, JSON, HTML met ingesloten script en stijl, CSS, SQL, Python en Bash. Kies voor elke andere taal “Platte tekst”; dan blijft alleen de opmaak van het blok over.

Wordt mijn code opgeslagen of verstuurd?

Nee. De verwerking gebeurt in je browser. De code staat niet in de adresbalk en wordt niet opgeslagen.

Waarom zijn sommige stukken niet gekleurd?

De highlighter herkent patronen als sleutelwoorden, tekenreeksen en commentaar, maar is geen volledige parser. Ongebruikelijke schrijfwijzen of taalvarianten blijven daarom soms zwart.

Bronnen en wettelijke basis

Bijgewerkt op: · Redactioneel beleid

Vergelijkbare tools