Install the package from NPM:
$ npm install --save highlight-html-syntax
Import the CSS for highlighting:
@import 'node_modules/highlight-html-syntax/syntax.css'
Require the Highlight package in your project:
var Highlight = require('highlight-html-syntax')
Then use it in your code!
var html = '<p>hello world!</p>';
var result = Highlight(html);
console.log(result);
/* <span class="method"><p</span>
<span class="method">></span>
hello world!
<span class="method"></p</span>
<span class="method">></span> */
In your frontend:
var code = document.getElementById('code').value;
var syntax = Highlight(code);
var result = document.getElementById('result');
result.innerText = syntax;
This HTML code
<form>
<input type="text" placeholder="John Doe"/>
</form>
Turns into ->
<span class="method"><form<span class="method">></span></span> <span class="global">
<span class="method"><input</span> type=<span class="string">"text"</span> placeholder</span>=<span class="string">"John Doe"</span><span class="method">/></span>
<span class="method"></form<span class="method">></span></span>
Which looks like this