Horje
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:

Full Example Code for syntax highlighter code

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:

How to print HTML code with colors syntax highlighting on a HTML page





Related Articles
How to syntax highlighter code for html css xml style HTML Syntax Highlighter Tutorial

Single Articles
Full Example Code for syntax highlighter codeHTML Syntax Highlighter Tutorial
How to print HTML code with colors syntax highlighting on a HTML pageHTML Syntax Highlighter Tutorial

Read Full:
HTML Syntax Highlighter Tutorial
Category:
Web Tutorial
Sub Category:
HTML Syntax Highlighter Tutorial
Uploaded by:
Admin
Views:
346