样式化

大约 1 分钟

创建行内 snippet，对内联标记进行样式化，包括更改标签、添加属性和修改内容。

配置

import { defineUserConfig } from "vuepress";
import { hopeTheme } from "vuepress-theme-hope";

export default defineUserConfig({
  theme: hopeTheme({
    markdown: {
      stylize: [
        // options
      ],
    },
  }),
});

使用

stylize 接收一个数组，其中每个元素接受 2 个选项：

matcher：应为 string 或 RegExp。
replacer: 自定义匹配标记的函数

例如，你可以使用以下配置将 *Recommended* 转换为徽章 <Badge type="tip">Recommended</Badge>：

import { defineUserConfig } from "vuepress";
import { hopeTheme } from "vuepress-theme-hope";

export default defineUserConfig({
  theme: hopeTheme({
    markdown: {
      stylize: [
        {
          matcher: "Recommended",
          replacer: ({ tag }) => {
            if (tag === "em")
              return {
                tag: "Badge",
                attrs: { type: "tip" },
                content: "Recommended",
              };
          },
        },
      ],
    },
  }),
});

另一个例子是你想要将所有的“不或者没”开头的强调词设置为红色，这样 设置它*没有*任何效果，请*不要*这样使用。变成：“设置它没有任何效果，请不要这样使用。"

import { defineUserConfig } from "vuepress";
import { hopeTheme } from "vuepress-theme-hope";

export default defineUserConfig({
  theme: hopeTheme({
    markdown: {
      stylize: [
        {
          matcher: /n't$/,
          replacer: ({ tag, attrs, content }) => {
            if (tag === "em")
              return {
                tag: "span",
                attrs: { ...attrs, style: "color: red" },
                content,
              };
          },
        },
      ],
    },
  }),
});

同时，你也可以在 frontmatter 总通过 stylize 选项来自定义此页面额外的匹配标记的函数。

性能

为避免性能影响，除非你需要，否则应尽量避免使用 RegExp 以获得更好的性能。

并且请尝试使用成本较低的 RegExp 创建片段，例如：以 ^ 开头或以 $ 结尾 RegExp 。

例如，如果你只想匹配 "SHOULD"、"MUST" 和 "MAY"，你应该写 /^(?:SHOULD|M(?:UST|AY))$/u 而不是 /SHOULD|MUST|MAY/u。第一个将和 1000 个字符的“A loo...oong content”只匹配 2 次，但第二个 RegExp 会匹配近 3000 次。