A lightweight HTML syntax highlighter
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"><html></span><span class="tag"></html></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 |