Prism

配置参数

extensions string[]

The list of extensions this plugin applies to

Default:

[ ".html" ]

cssSelector string

The css selector to apply prism

Default:

"pre code"

theme object object[]

The theme or themes to download

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

描述

此插件使用 Prism 库来搜索和语法高亮任何 <pre><code> 元素中的代码。

安装

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

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

const site = lume();

site.use(prism(/* Options */)); // 使用插件，可以传入配置项

export default site;

配置

Prism 默认加载 markup、css、clike 和 javascript 这些默认语言。你可以通过以下方式加载更多语言：

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

// 额外的 Prism 语言
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;

主题

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

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: "/* insert-theme-here */", // 可选的占位符，用于替换为最终代码
  },
}));

export default site;

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

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 */" // funky 主题的占位符
    },
    {
      name: "dark",
      cssFile: "styles.css",
      placeholder: "/* dark-theme-here */" // dark 主题的占位符
    },
  ]
}));

export default site;