DEV Community

Bhavyashah
Bhavyashah

Posted on

Responsive Syntax Highlighter Using Highlighter JS

I have created responsive Syntax highlighter for website

Discussion (4)

Collapse
lukeshiru profile image
LUKESHIRU

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>
Enter fullscreen mode Exit fullscreen mode

Remember that you need to start it, so:

<script>hljs.highlightAll();</script>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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!

Collapse
bhavyashah profile image
Bhavyashah Author

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

Collapse
lukeshiru profile image
LUKESHIRU

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.

Thread Thread
bhavyashah profile image
Bhavyashah Author • Edited on

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