markdown-stylize

在 VuePress 站点中为内容添加样式。

使用方法

npm i -D @vuepress/plugin-markdown-stylize@next

.vuepress/config.ts
import { markdownStylizePlugin } from '@vuepress/plugin-markdown-stylize'

export default {
  plugins: [
    markdownStylizePlugin({
      // 配置项
    }),
  ],
}

语法

对齐内容

你可以使用 left center right justify 来对齐文本。

:::: preview

左对齐的内容

居中的内容

右对齐的内容

两端对齐的内容

::::

添加属性

你可以使用语法 {attrs} 来为 Markdown 元素添加属性。

比如，如果你想要一个 id 为 say-hello-world，文字为 Hello World 的二级标题，你可以使用:

## Hello World {#say-hello-world}

如果你想要一个有 full-width Class 的图片，你可以使用:

![img](link/to/image.png) {.full-width}

同时也支持其他属性:

一个包含文字的段落。 {#p .a .b align=center customize-attr="content with spaces"}

会被渲染为:

<p id="p" class="a b" align="center" customize-attr="content with spaces">
  一个包含文字的段落。
</p>

完整的示例请参考 @mdit/plugin-attrs。

高亮内容

你可以使用 == == 来通过 <mark> 标记内容。请注意标记两侧需要有空格。

::: preview

VuePress 非常强大!

:::

创建剧透

你可以使用 !! !! 标记剧透文字。请注意标记两侧需要有空格。

::: preview

VuePress 非常强大。

:::

上下标

你可以使用 ^ 来标记上标，~ 来标记下标。

::: preview

H₂O 是液体，2¹⁰ 是 1024.

:::

创建自己的样式化

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

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

例如，你可以使用以下配置将 *推荐* 转换为徽章推荐：

.vuepress/config.js
import { markdownStylizePlugin } from '@vuepress/plugin-markdown-stylize'

export default {
  plugins: [
    markdownStylizePlugin({
      custom: [
        {
          matcher: '推荐',
          replacer: ({ tag }) => {
            if (tag === 'em')
              return {
                tag: 'Badge',
                attrs: { type: 'tip' },
                content: '推荐',
              }

            return null
          },
        },
      ],
    }),
  ],
}

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

.vuepress/config.js
import { markdownStylizePlugin } from '@vuepress/plugin-markdown-stylize'

export default {
  plugins: [
    markdownStylizePlugin({
      custom: [
        {
          matcher: /^(不|没)/,
          replacer: ({ tag, attrs, content }) => {
            if (tag === 'em')
              return {
                tag: 'span',
                attrs: { ...attrs, style: 'color: red' },
                content,
              }

            return null
          },
        },
      ],
    }),
  ],
}