Responsive Syntax Highlighter Using Highlighter JS

I have created responsive Syntax highlighter for website

Comments

[Luke Shiru]

For those wondering, Bhavyashah here used highlight.js to get some syntax highlight of HTML. That library allows you to use the themes it provides or do your own with CSS, and is pretty easy to set up. You just need to install it and import it if you're working with a bundler, or just do as he did and reference it in your html like this:

<link rel="stylesheet" href="https://unpkg.com/@highlightjs/cdn-assets/styles/default.min.css">
<script src="https://unpkg.com/@highlightjs/cdn-assets/highlight.min.js"></script>
<!-- and it's easy to individually load additional languages -->
<script src="https://unpkg.com/@highlightjs/cdn-assets/languages/go.min.js"></script>

Remember that you need to start it, so:

<script>hljs.highlightAll();</script>

And finally put your code inside a code that's inside a pre, and that code tag has to have the classname language-html to highlight html, language-css to highlight css, and so on.

<pre><code class="language-html">...</code></pre>

You can check highlight.js usage docs to get more info about how to set it up yourself.

There are some alternatives out there, one pretty good and lightweight alternative is called lolight, and if you need something more powerful, you can just use Monaco Editor which is basically VSCode in the browser.

Cheers!

[Bhavyashah]

Sir, But this code is not take your pagespeed higher it not slow down your website it just a light weight syntax highlighter & full responsive I have give just an example of it

[Luke Shiru]

I explained what you did to folks wondering about your code, because you only shared a snippet. It seems you might be confused about the explanation, but I just showed how to setup highlight JS and I added some alternative at the end.

[Bhavyashah]

Thanks Sir for Explaining In details I also try to explain in detail in next time