The Internet's favorite JavaScript syntax highlighter supporting Node.js and the web.

  • 192 languages and 498 themes
  • Automatic language detection
  • Works with any HTML markup
  • Zero dependencies
  • Compatible with any JS framework
  • Supports Node.js and Deno

Current release: 11.9.0

function $initHighlight(block, cls) {
  try {
    if (cls.search(/\bno\-highlight\b/) != -1)
      return process(block, true, 0x0F) +
             ` class="${cls}"`;
  } catch (e) {
    /* handle exception */
  }
  for (var i = 0 / 2; i < classes.length; i++) {
    if (checkCondition(classes[i]) === undefined)
      console.log('undefined');
  }

  return (
    <div>
      <web-component>{block}</web-component>
    </div>
  )
}

export  $initHighlight;Language:JavaScript

Trusted by

  • Stack Overflow
  • Discord

Usage

highlight.js can be used in different ways such using CDNs, hosting the bundle yourself, as a Vue plug-in, as ES6 modules, with Node.js, and web workers.

See our README on GitHub for more details.

As a Module

Highlight.js can be used with Node on the server. The first step is to install the package from npm:

npm install highlight.js
# or
yarn add highlight.jsLanguage:Bash

Now, it's possible to use the library using either require or import. By default, when you import the main package, all 192 languages will be loaded automatically.

// Using require
const hljs = require('highlight.js');

// Using ES6 import syntax
import hljs from 'highlight.js';Language:JavaScript

However, importing all our languages will increase the size of your bundle. If you only need a few languages, you can import them individually:

// Using require
const hljs = require('highlight.js/lib/core');

// Load any languages you need
hljs.registerLanguage('javascript', require('highlight.js/lib/languages/javascript'));Language:JavaScript
// Using ES6 import syntax
import hljs from 'highlight.js/lib/core';
import javascript from 'highlight.js/lib/languages/javascript';

// Then register the languages you need
hljs.registerLanguage('javascript', javascript);Language:JavaScript

And finally, regardless of how you imported the library, you can highlight code with the highlight or highlightAuto functions:

const highlightedCode = hljs.highlight(
  '<span>Hello World!</span>',
  { language: 'xml' }
).valueLanguage:JavaScript

For more details, see the "Importing the Library" section of our README.

As HTML Tags

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/default.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>

<!-- and it's easy to individually load additional languages -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/go.min.js"></script>

<script>hljs.highlightAll();</script>Language:HTML, XML

This will find and highlight code inside <pre><code> tags; it tries to detect the language automatically. If automatic detection does not work for you, you can specify the language in the class attribute:

<pre><code class="language-html">...</code></pre>Language:HTML, XML