Highlight js is a library to highlight the syntax of programming languages like HTML, CSS js, java,c, c++, etc. There is no proper documentation for react to implement highlight js.
npm i highlight.jsHow to use highlight js in react component
After installing the package import highlight js and call in use effect hook as it will be applied on the code after the dom content is loaded. You can also override the CSS according to your own.
import "highlight.js/styles/github.css";
import hljs from "highlight.js";
import { useEffect } from "react";
const demo = () => {
useEffect(() => {
hljs.highlightAll();
}, []);
return (
<>
<code>
<pre>
<div class="main">
<div class="post">
<button class="readmore">read more</button>
<button>read more1</button>
<button>read more2</button>
<button>read more3</button>
</div>
</div>
</pre>
</code>
</>
);
};
export default demo;
by default, highlight js selects <code> tag to highlight but you can configure your own element also to highlight code if you are placing the code in any other tag instead of the code tag.
We strongly recommend
highlight js<pre><code>wrapping for code blocks. It’s quite semantic and “just works” out of the box with zero fiddling
How to ignore code block to highlight
You can use nohighlight class to ignore the code block to highlight.
<pre><code class="nohighlight">...</code></pre>Highlighting code with specific language
To highlight code with a specific language, use highlight in the following way
html = hljs.highlight('<h1>Hello World!</h1>', {language: 'xml'}).valueHighlighting code after dom content load
To initiate highlight.js after dom content loads call it after the dom content loaded event
document.addEventListener('DOMContentLoaded', (event) => {
document.querySelectorAll('pre code').forEach((el) => {
hljs.highlightElement(el);
});
});To highlight custom code blocks manually:
// first, find all the div.code blocks
document.querySelectorAll('div.code').forEach(el => {
// then highlight each
hljs.highlightElement(el);
});