highlight.js (original) (raw)

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 fromnpm:

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

`

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