HTMLshl

A lightweight HTML syntax highlighter

How to use

Add a module tag in your HTML:

<script src="./HTMLshl.js" type="module"></script>

or import it in your main.js file;

import {HTMLshl} from "./HTMLshl.js";

You can use HTMLshl in your JavaScript code with:

var highlightedHTML = HTMLshl.highlight("<html></html>");

Which returns:

<pre><span class="tag">&lt;html&gt;</span><span class="tag">&lt;/html&gt;</span></pre>

Now you can add this highlighted HTML to your page and style it with CSS:

.tag{
  color:red;
}
.attribute{
  color:white;
}
.property{
  color:green;
}
.comment{
  color:grey;
}

Reference:

In <a href="#">link</a><!-- Comment --> is

part	class
<a	.tag
href="	.tag .attribute
#	.tag .attribute .property
"	.tag .attribute
>	.tag
link	no class
</a>	.tag
<!-- Comment -->	.comment