Introduction to Highlight.js
Highlight.js is a popular JavaScript library used for syntax highlighting of code in web pages. It’s simple to use and supports many programming languages. Syntax highlighting is essential for enhancing code readability and is a must-have for any developer-focused website.
Getting Started
To get started with Highlight.js, you can include the library via a CDN or install it using npm.
Using CDN
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.4.0/styles/default.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.4.0/highlight.min.js"></script>
<script>hljs.highlightAll();</script>
Using npm
$ npm install highlight.js
Then, include it in your project:
import hljs from 'highlight.js';
import 'highlight.js/styles/default.css';
document.addEventListener('DOMContentLoaded', (event) => {
hljs.highlightAll();
});
Basic Usage
To apply syntax highlighting, simply wrap your code blocks in <pre> and <code> tags. Highlight.js will automatically detect the language.
<pre><code class="html">
<p>Hello, World!</p>
</code></pre>
Specifying Languages
While Highlight.js can auto-detect languages, you can also specify the language manually using class names. This ensures that the correct syntax highlighting is applied.
<pre><code class="javascript">
console.log('Hello, World!');
</code></pre>
Customizing Styles
Highlight.js offers various themes that you can use to customize the appearance of your code blocks. Simply replace the link to the CSS file with your preferred style.
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.4.0/styles/monokai.min.css">
Highlighting Specific Code
You can highlight specific code blocks by calling the highlightElement function on the pre elements.
import hljs from 'highlight.js';
document.addEventListener('DOMContentLoaded', (event) => {
document.querySelectorAll('pre code').forEach((block) => {
hljs.highlightElement(block);
});
});
Using Highlight.js with Other Libraries
Highlight.js integrates with many other JavaScript libraries and frameworks effortlessly. Below is an example of integrating Highlight.js with React:
import React, { useEffect } from 'react';
import hljs from 'highlight.js';
import 'highlight.js/styles/github.css';
function App() {
useEffect(() => {
hljs.highlightAll();
}, []);
return (
<div>
<pre><code class="javascript">
console.log('Hello, React!');
</code></pre>
</div>
);
}
export default App;
Conclusion
Highlight.js is a robust and flexible library for syntax highlighting, providing a wide range of customization options and supporting numerous languages. It’s an invaluable tool for any developer looking to improve the readability of their code on the web.
App Example
Below is a complete example of a simple web page using Highlight.js to enhance code readability:
<html>
<head>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.4.0/styles/default.min.css">
</head>
<body>
<pre><code class="language-html">
<!DOCTYPE html>
<html>
<head>
<title>Highlight.js Example</title>
</head>
<body>
<p>Hello, World!</p>
<pre><code class="javascript">
console.log('Hello, World!');
</code></pre>
</body>
</html>
</code></pre>
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.4.0/highlight.min.js"></script>
<script>hljs.highlightAll();</script>
</body>
</html>
Hash: a4231ef20aea92e0b35aa0facbb0c9c7a3dc46df0119395fab8c64f4081982c3
