Highlight.js: An Overview
Highlight.js is a versatile syntax highlighter implemented in JavaScript. Designed to make code snippets in web pages more readable, it supports both browser and server environments. Highlight.js operates independently of other frameworks and boasts automatic detection of code language, making it extremely useful for developers and website managers who wish to improve the readability of their code content.
Basic Usage
In the Browser
To integrate Highlight.js into a web page, one needs to link the library along with a chosen theme and execute the highlightAll() function. This operation scans for code blocks within <pre><code> tags and attempts automatic language detection. If automatic detection isn't successful, developers can specify languages manually using the class attribute.
<link rel="stylesheet" href="/path/to/styles/default.min.css">
<script src="/path/to/highlight.min.js"></script>
<script>hljs.highlightAll();</script>
To highlight specific code blocks, use:
<pre><code class="language-html">...</code></pre>
For plaintext or non-highlighted blocks, classes language-plaintext and nohighlight can be utilized respectively.
Node.js on the Server
On the server side, Highlight.js can be utilized by importing and using the library to highlight code snippets with specified languages or through language auto-detection.
// Load the library and all languages
const hljs = require('highlight.js');
const html = hljs.highlightAuto('<h1>Hello World!</h1>').value;
For performance-conservative applications, only common languages or specific languages can be imported.
Supported Languages
Highlight.js supports over 180 languages, catering to a wide range of programming needs. Additional third-party language definitions expand this list even further.
Custom Usage
Highlight.js allows customization through functions like highlightElement() and configure(). This flexibility grants developers greater control over what code gets highlighted and when the highlighting occurs.
Advanced Integration
Custom HTML
While <pre><code> tags are recommended for code blocks due to their semantic nature and simplicity, other HTML structures are also supported. Preservation of line breaks may require additional CSS, especially when not using wrapping tags like pre.
Using with Vue.js
For projects using Vue.js, a simple plugin is available to facilitate integration, offering straightforward implementation with minimal code alterations.
<div id="app">
<highlightjs autodetect :code="code" />
<highlightjs language='javascript' code="var x = 5;" />
</div>
Using Web Workers
For handling large code chunks without freezing the browser, Highlight.js supports running within a web worker, enhancing application performance during intensive operations.
Importing the Library
Highlight.js can be integrated into projects using various methods, whether as a Node.js module with require, an ES6 module, or via direct CDN fetching.
Getting the Library
Highlight.js is accessible via multiple channels — as prebuilt scripts available through CDNs, an NPM package for seamless installation, or direct download from its website for fully customized builds.
Requirements
Highlight.js is compatible with all modern web browsers and currently supported versions of Node.js. Developers aiming to contribute to the library should be equipped with Node.js >= 12.x and npm >= 6.x.
License
Released under the BSD License, Highlight.js invites modifications, provided users adhere to the license terms.
For further details or to access the community and documentation, visit the official library website or explore the associated links for more extensive guidance on API usage and language support.