highlight.js

How to add highlight.js to your Doks website.

On this page

• 1. Enable
• 2. Pick style
  • Example
• 3. Configure
• Example
• Resources

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.

Example

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) => {
    hljs.highlightBlock(block);
  });
});

Example

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

Resources

• highlight.js