Code Highlight

Code syntax highlighting using highlight.js

Options See on deno.land

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
}

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

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 "https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.6.0/build/styles/github.min.css";

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
site.remoteFile(
  "_includes/css/code.css",
  "https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.6.0/build/styles/github.min.css",
);

/* Import the _includes/css/code.css (needs postCSS plugin) */
@import "css/code.css";

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