Code Highlight

Code syntax highlighting using highlight.js

Options See on

extensions string[]

The list of extensions this plugin applies to

[ ".html" ]
languages record

Register languages on the Highlight.js context.

options object

Options passed to highlight.js.


  ignoreUnescapedHTML: false,
  noHighlightRe: /^$/i,
  languageDetectRe: /\blanguage-([\w-]+)\b/i,
  classPrefix: "hljs-",
  cssSelector: "pre code",
  languages: undefined


This plugin uses the highlight.js library to search and highlight the syntax code of any <pre><code> element.


Import this plugin in your _config.ts file to use it:

import lume from "lume/mod.ts";
import codeHighlight from "lume/plugins/code_highlight.ts";

const site = lume();

site.use(codeHighlight(/* Options */));

export default site;


Highlight.js has support for several languages by default. You can see a list of supported languages. Use the languages key to register additional languages:

import lume from "lume/mod.ts";
import code_highlight from "lume/plugins/code_highlight.ts";

// import your favorite language
import lang_javascript from "npm:highlight.js/lib/languages/javascript";
import lang_bash from "npm:highlight.js/lib/languages/bash";

const site = lume();

    languages: {
      javascript: lang_javascript,
      bash: lang_bash,

export default site;


You may need to load the CSS file of the color theme. The simplest way to load a theme is import it from a CDN in your CSS files. For example:

@import "";

As an alternative, you can define the CSS file it as a remote file:

// Define the _includes/css/code.css file as a remote file
/* Import the _includes/css/code.css (needs postCSS plugin) */
@import "css/code.css";

Test all available themes in the demo page. {.tip}