DEV Community

Kazuki Baba
Kazuki Baba

Posted on

2

lume land code highlight setting

lume.land is my most favorite static site generator, but I was not able to figure out how to use code_highlight plugin.

Since there was no document, I will write it here.

_config.js:

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

// import your favorite language
import lang_javascript from "https://unpkg.com/@highlightjs/cdn-assets@11.6.0/es/languages/javascript.min.js";
import lang_bash from "https://unpkg.com/@highlightjs/cdn-assets@11.6.0/es/languages/bash.min.js";

const site = lume();

// download your favorite theme
site.remoteFile(
  "_includes/css/code.css",
  "https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.6.0/build/styles/github.min.css"
);
site.use(
  code_highlight({
    languages: {
      javascript: lang_javascript,
      bash: lang_bash,
    },
  })
);

export default site;
Enter fullscreen mode Exit fullscreen mode

Because you got _includes/css/code.css, you need to load this file in style.css (which is loaded in a HTML file):

@import "css/code.css";
Enter fullscreen mode Exit fullscreen mode

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read more →

Top comments (0)

Postmark Image

Speedy emails, satisfied customers

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Sign up