highlight.js
Add professional syntax highlighting to any website or application. Supports 190+ languages, automatic detection, and numerous themes with zero dependencies.
What is highlight.js
highlight.js is a popular open-source JavaScript library created to add syntax highlighting to code snippets on websites and web applications. Its main purpose is to make code easy to read and understand by coloring different parts of the syntax, such as keywords, comments, and strings. It works directly in the browser or on a server with Node.js. The library is not a company product but a community-driven project maintained by many contributors. It is known for its simplicity, extensive language support, and having no external dependencies, which makes it easy to integrate into any project.
highlight.js Features
- Automatic Language Detection: highlight.js can automatically detect the programming language of a code block. This saves time as you do not need to manually specify the language for every snippet.
- Multi-Language Support: It supports a very large number of programming languages, with over 190 languages available. This makes it suitable for almost any technical documentation or blog.
- Many Style Themes: The library comes with over 500 different themes. You can choose a style that matches your website's design, from light themes to dark themes.
- No Dependencies: highlight.js is a standalone library. It does not require any other JavaScript libraries like jQuery to function, which keeps your project light.
- Framework Compatible: It can be used with any modern JavaScript framework, including React, Vue, and Angular, making it flexible for web developers.
- Server-Side Highlighting: The library can run on Node.js and Deno servers. This allows you to highlight code on the server before sending the HTML to the client, which can improve performance.
- Easy Implementation: You can add it to your website by simply including a CSS and JS file from a CDN and calling a single function.
highlight.js Pricing Plans
highlight.js is a completely free and open-source software. It is distributed under the BSD 3-Clause License, which permits free use in both personal and commercial projects. There are no pricing plans, premium versions, or paid features. The entire library, including all languages and themes, is available for everyone to use at no cost.
highlight.js Free Plan
As an open-source project, highlight.js does not have a 'free plan' because the entire tool is free. There are no limitations on its use. You get full access to all features, including:
- All 192 supported languages.
- All 512 available themes.
- Automatic language detection.
- Use in unlimited personal and commercial projects.
There is no trial period or need to sign up. You can download or link to the library and start using it immediately.
How to use highlight.js
There are two common ways to start using highlight.js.
1. Using a CDN for a simple website:
This is the easiest method for adding highlighting to a static website or blog.
- Step 1: Add a theme's stylesheet to the
<head>of your HTML file. You can choose any theme you like. For example, the default theme:<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/default.min.css"> - Step 2: Add the highlight.js script just before the closing
</body>tag:<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script> - Step 3: Add an initialization script to find and highlight all code blocks on the page:
<script>hljs.highlightAll();</script> - Step 4: Structure your code snippets using
<pre><code>tags. You can let the library auto-detect the language or specify it in the class attribute:<pre><code class="language-javascript">console.log('Hello, World!');</code></pre>
2. Using npm for a Node.js project:
This method is for developers building applications with Node.js.
- Step 1: Install the package using npm or yarn:
npm install highlight.js - Step 2: Import the library into your project. You can import all languages or just the ones you need to keep your application small.
import hljs from 'highlight.js/lib/core';import javascript from 'highlight.js/lib/languages/javascript';hljs.registerLanguage('javascript', javascript); - Step 3: Use the
highlightfunction to process your code string:const code = "console.log('Hello!');";const highlightedCode = hljs.highlight(code, { language: 'javascript' }).value;
Pros and Cons of highlight.js
Pros:
- Completely Free: Being open-source, it costs nothing to use in any project.
- Very Easy to Use: The CDN method allows for quick setup with just a few lines of code.
- Extensive Support: The huge number of supported languages and themes covers most needs.
- No Dependencies: It is lightweight and won't conflict with other libraries.
- Active Community: The project is actively maintained by a community of developers.
Cons:
- Bundle Size: Including all languages can result in a large JavaScript file, which may slow down website loading. It is better to import only the languages you need.
- Detection Accuracy: Automatic language detection can sometimes be incorrect for very short or ambiguous code snippets.
- Limited Functionality: It is only a syntax highlighter, not a full code editor like CodeMirror.
highlight.js integrations
highlight.js is a library, so it does not have direct integrations with SaaS applications like Salesforce or Outlook. Instead, it is designed to be integrated into other software projects. It works well with:
- JavaScript Frameworks: It can be easily used inside React, Vue, and Angular components to display highlighted code.
- Content Management Systems (CMS): There are plugins and easy methods to integrate highlight.js into systems like WordPress, Ghost, and Joomla.
- Static Site Generators: Developers using tools like Jekyll, Hugo, or Next.js can include highlight.js to format code blocks in their generated websites.
- Documentation Tools: It is often used in documentation generators like Docusaurus and MkDocs to make code examples clear.
highlight.js Alternatives
- Prism.js: A popular and lightweight alternative. Prism's core is smaller, and you add languages and features through plugins. It is known for being very extensible.
- Shiki: A modern syntax highlighter that uses TextMate grammars, the same ones used by VS Code. This results in very accurate highlighting that looks exactly like it does in the popular editor.
- CodeMirror: More than just a highlighter, CodeMirror is a full-featured in-browser code editor. It is a good choice if you need users to edit code, not just view it.
- Ace Editor: Similar to CodeMirror, Ace is another powerful code editor component for the web. It provides syntax highlighting along with editing capabilities and is designed for building complex applications.
highlight.js API
highlight.js provides a JavaScript API for developers to use its features programmatically. It is not a web API, so you do not need an API key. You can use the API directly in your JavaScript code after importing the library.
The main API functions are:
hljs.highlight(code, {language}): Highlights a string of code for a specific language.hljs.highlightAuto(code): Highlights a string of code, automatically detecting the language.hljs.registerLanguage(name, language): Registers a language so it can be used for highlighting.hljs.highlightAll(): Applies highlighting to all<pre><code>elements on a webpage.
Here is a basic developer example in a Node.js environment:
// Import the core library and the XML language
import hljs from 'highlight.js/lib/core';
import xml from 'highlight.js/lib/languages/xml';
// Register the language
hljs.registerLanguage('xml', xml);
const codeSnippet = '<span>Hello World!</span>';
// Use the API to highlight the code
const result = hljs.highlight(codeSnippet, { language: 'xml' });
console.log(result.value);
// Outputs: <span class="hljs-tag"><<span class="hljs-name">span</span>></span>Hello World!<span class="hljs-tag"></<span class="hljs-name">span</span>></span>
For more details, developers can consult the official API documentation on the highlight.js website.
highlight.js Affiliate program
highlight.js does not have an affiliate program. As a free, open-source project, there are no products to sell, so there is no commission-based system for referrals. The project is supported by its community of users and contributors. If you wish to support the project, you can contribute by reporting bugs, improving documentation, or submitting code changes on its GitHub repository. Some open-source projects also accept donations, which is the most direct way to provide financial support.
Similar to highlight.js
