🏳️highlight.js

Website faviconhighlightjs.org

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

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

`# The Greeter class class Greeter   def initialize(name)     @name = name.capitalize   end    def salute     puts "Hello #{@name}!"   end end  g = Greeter.new("world") g.salute`Language:Ruby

Trusted by

----------

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](https://github.com/highlightjs/highlight.js#getting-started) 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](https://www.npmjs.com/package/highlight.js):

`npm install highlight.js # or yarn add highlight.js`Language: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' } ).value`Language:JavaScript

For more details, see [the "Importing the Library" section of our README](https://github.com/highlightjs/highlight.js#importing-the-library).

### As HTML Tags

cdnjsjsDeliverunpkgSelf hosted

`<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