代码高亮

配置参数

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

描述

此插件使用 highlight.js 库来搜索并高亮任何 <pre><code> 元素的语法代码。

安装

在你的 _config.ts 文件中导入此插件以使用它：

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

const site = lume();

site.use(codeHighlight(/* 选项 */));

export default site;

语言

Highlight.js 默认支持多种语言。 你可以查看 支持语言列表。 使用 languages 键注册额外的语言：

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

// 导入你喜欢的语言
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;

主题

为了正确地高亮你的代码语法，你需要与 Highlight.js 类兼容的 CSS 代码。 这个库提供了一些 预制主题，你可以使用 theme 选项自动下载它们：

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", // 要下载的主题名称
    cssFile: "/styles.css", // 目标文件名
    placeholder: "/* insert-theme-here */", // 可选占位符，用于替换最终代码
  },
}));

export default site;

如果你想使用不同的主题（例如用于暗黑和明亮模式），你可以提供一个主题数组：

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;