Hoe te maken: Syntax highlighter

Leer hoe je een syntax highlighter kunt maken en gebruiken.

Syntax highlighter

Wanneer je enkele kleuren toevoegt aan codefragmenten, zijn ze gemakkelijker te lezen:

<!DOCTYPE html> <html> <body> <h1>Test een HTML Syntax Highlighter</h2> <p>Hello wereld!</p> <a href="https://www.codew3c.com">Terug naar School</a> </body> </html>









Hoe een syntax highlighter te maken


Eerste stap - Voeg HTML toe:


Bevat HTML-code in de <div>:


<div id="myDiv">
<!DOCTYPE html><br>
<html><br>
<body><br>
<br>
<h1>Test een HTML Syntax Highlighter</h2><br>
<p>Hello wereld!</p><br>
<a href="https://www.codew3c.com">Terug naar School</a><br>
<br>
</body><br>
</html>
</div>



Tweede stap - Voeg JavaScript toe:


Maak een functie genaamd "w3CodeColor" en gebruik een DIV-element als parameter om het te roepen:


w3CodeColor(document.getElementById("myDiv"));
function w3CodeColor(elmnt) {
  // klik "Probeer het zelf" om JavaScript te zien...
}



Probeer het zelf