How to add highlight.js to your Doks website.

1. Enable

highlight.js support is switched on per default.

Like Chroma — the Hugo default code highlighter — better? Deactivate highlight.js support by setting highLight = false in ./config/_default/params.toml.

2. Pick style

Use the default Doks style, or use one of the other available higlight.js themes.


If you would like to use the Dracula style, in ./assets/scss/app.scss uncomment the default doks style, and add the Dracula style, like so:

/** Import highlight.js */
@import "highlight.js/scss/dracula";


// @import "components/doks";

3. Configure

Customize Doks’ default configuration (if needed) in ./assets/js/highlight.js:

import hljs from 'highlight.js/lib/core';

import javascript from 'highlight.js/lib/languages/javascript';
import json from 'highlight.js/lib/languages/json';
import bash from 'highlight.js/lib/languages/bash';
import htmlbars from 'highlight.js/lib/languages/htmlbars';
import ini from 'highlight.js/lib/languages/ini';
import yaml from 'highlight.js/lib/languages/yaml';
import markdown from 'highlight.js/lib/languages/markdown';

hljs.registerLanguage('javascript', javascript);
hljs.registerLanguage('json', json);
hljs.registerLanguage('bash', bash);
hljs.registerLanguage('html', htmlbars);
hljs.registerLanguage('ini', ini);
hljs.registerLanguage('toml', ini);
hljs.registerLanguage('yaml', yaml);
hljs.registerLanguage('md', markdown);

document.addEventListener('DOMContentLoaded', () => {
  document.querySelectorAll('pre code').forEach((block) => {


// Default Doks style
    "title": "apples",
    "count": [12000, 20000],
    "description": {"text": "...", "sensitive": false}
    "title": "oranges",
    "count": [17500, null],
    "description": {"text": "...", "sensitive": false}


Edit this page on GitHub