highlight.js
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.
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}
}
]