How TO - Create a Syntax Highlighter

Learn how to create and use a Syntax Highlighter.

Syntax Highlighter

Code snippets are easier to read when you add some color:

<!DOCTYPE html>
<html>
<body>

<h1>Testing an HTML Syntax Highlighter</h2>
<p>Hello world!</p>
<a href="https://www.w3schools.com">Back to School</a>

</body>
</html>

How To Create a Syntax Highlighter

Step 1) Add HTML:

Example

A <div> containing HTML code:

<div id="myDiv">
<!DOCTYPE html><br>
<html><br>
<body><br>
<br>
<h1>Testing an HTML Syntax Highlighter</h2><br>
<p>Hello world!</p><br>
<a href="https://www.w3schools.com">Back to School</a><br>
<br>
</body><br>
</html>
</div>

Step 2) Add JavaScript:

Example

Create a function called "w3CodeColor" and call it, using the DIV element as a parameter:

w3CodeColor(document.getElementById("myDiv"));

function w3CodeColor(elmnt) {
// click "Try it Yourself" to see the JavaScript...
}

Try it Yourself »

❮ Previous Next ❯