Code Highlight

Options

extensions string[]

The list of extensions this plugin applies to

Default:

[ ".html" ]

languages record

Register languages on the Highlight.js context.

options object

Options passed to highlight.js.

See https://highlightjs.readthedocs.io/en/latest/api.html#configure

Default:

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

theme object object[]

The theme or themes to download

See https://highlightjs.org/examples

Description

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

Installation

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;

Languages

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();

site.use(
  code_highlight({
    languages: {
      javascript: lang_javascript,
      bash: lang_bash,
    },
  }),
);

export default site;

Themes

To properly highlight the syntax of your code, you need CSS code compatible with Highlight.js classes. This library provides some pre-made themes that you can download automatically with the theme option:

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

const site = lume();

site.use(highlight({
  theme: {
    name: "atom-one-dark", // The theme name to download
    cssFile: "/styles.css", // The destination filename
    placeholder: "/* insert-theme-here */", // Optional placeholder to replace with the final code
  },
}));

export default site;

If you want to use different themes (for example for dark and light mode), you can provide an array of themes:

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

const site = lume();

site.use(highlight({
  theme: [
    {
      name: "atom-one-light",
      cssFile: "/styles.css",
      placeholder: "/* light-theme-here */"
    },
    {
      name: "atom-one-dark",
      cssFile: "/styles.css",
      placeholder: "/* dark-theme-here */"
    },
  ]
}));

export default site;