Tips (Total 1)
# Tips-1) How to syntax highlighter code for html css xml style
Here has an easy way to view code in your html page with css color style.
Full Example Code for syntax highlighter code
Follow the Example
index.html
Example:
HTML
<link rel="stylesheet" href="https://unpkg.com/@highlightjs/[email protected]/styles/default.min.css">
<script src="https://unpkg.com/@highlightjs/[email protected]/highlight.min.js"></script>
<!-- and it's easy to individually load additional languages -->
<script src="https://unpkg.com/@highlightjs/[email protected]/languages/go.min.js"></script>
<script>hljs.highlightAll();</script>
<pre><code class="language-html">
<xmp>
<canvas id="myCanvas">
Your browser does not support the canvas tag.
</canvas>
<script>
let canvas = document.getElementById("myCanvas");
let ctx = canvas.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0, 0, 80, 80);
</script>
</xmp>
</code></pre>
Output should be:
How to print HTML code with colors syntax highlighting on a HTML page
I'd recommend using highlightjs as it supports a large number of languages and comes with many color themes. For HTML code specifically, you need to escape HTML tags. There're many tools online to help you in achieving that.
Here's a quick demo for that using highlighjs:
index.html
Example:
HTML
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.6/styles/darkula.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.6/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
<pre><code class="hljs html">
<ul>
<li ng-repeat="list in lists" class="input">
{{list}}
</li>
</ul>
</code></pre>
Output should be:
