Prism

Options

cssSelector string

The css selector to apply prism

Default:

"pre code"

autoloadLanguages boolean

Whether to autoload languages when necessary. If true, the autoloader plugin will be used and it will automatically load the languages used in the page when they are not already loaded.

Default:

false

theme object object[]

The theme or themes to download

See https://cdn.jsdelivr.net/npm/prismjs/themes/

Description

This plugin uses the Prism library to search and syntax highlight the 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 prism from "lume/plugins/prism.ts";

const site = lume();

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

export default site;

Configuration

Prism by default load the default languages markup, css, clike and javascript. You can load more languages in this way:

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

// Additional prism languages
import "npm:prismjs@1.29.0/components/prism-less.js";
import "npm:prismjs@1.29.0/components/prism-git.js";

const site = lume();
site.use(prism());

export default site;

Themes

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

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

const site = lume();

site.use(prism({
  theme: {
    name: "funky", // 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 prism from "lume/plugins/prism.ts";

const site = lume();

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

export default site;