特殊格式#

非常术无的提示框#

1
:::shuwu
2
这里是术无
3
:::

输出：

SHUWU
这里是术无

AI提示框#

1
:::ai
2
这里是ChatGPT
3
:::

输出：

AI
这里是ChatGPT

如何配置自定义提示框#

本博客基于 Astro + Expressive Code + Fuwari，提示框系统由三部分组成：remark 插件解析语法 → rehype 组件生成 HTML → Stylus 样式渲染。

涉及的文件#

文件	作用
`src/plugins/rehype-component-admonition.mjs`	提示框 HTML 组件，定义类型和渲染结构
`astro.config.mjs`	注册 rehype 组件映射，将 `:::类型名` 绑定到组件
`src/styles/variables.styl`	定义每种类型的 CSS 颜色变量
`src/styles/markdown-extend.styl`	定义每种类型的边框、背景、图标样式

第一步：添加类型到组件#

打开 src/plugins/rehype-component-admonition.mjs，在第 9 行的类型联合中添加新类型名：

1
/**
2
 * @param {('tip'|'note'|'important'|'caution'|'warning'|'info'|'shuwu'|'ai')} type
3
 */

第二步：注册组件映射#

打开 astro.config.mjs，在 rehypeComponents 的 components 对象中添加映射：

1
shuwu: (x, y) => AdmonitionComponent(x, y, "shuwu"),
2
ai: (x, y) => AdmonitionComponent(x, y, "ai"),

这行代码的意思是：当 Markdown 中遇到 :::shuwu 时，调用 AdmonitionComponent 并传入类型名 "shuwu"。

第三步：定义颜色变量#

打开 src/styles/variables.styl，在 define({...}) 块中添加：

1
--admonitions-color-shuwu: oklch(0.7 0.08 220) oklch(0.8 0.08 220)
2
--admonitions-color-ai: oklch(0.55 0.01 0) oklch(0.65 0.01 0)

每个变量有两个值，分别是 浅色模式 和 深色模式 的 oklch 颜色。

oklch(亮度饱和度色相) — 色相 220 = 蓝色，0 = 灰色

第四步：编写样式#

打开 src/styles/markdown-extend.styl，在 blockquote.admonition 内添加：

1
&.bdm-shuwu
2
  border-color: var(--admonitions-color-shuwu)
3
  background: oklch(0.95 0.04 220)
4

5
  .dark &
6
    background: oklch(0.25 0.04 220)
7

8
  .bdm-title
9
    color: var(--admonitions-color-shuwu)
10

11
    &:before
12
      background: var(--admonitions-color-shuwu)
13
      mask-image: url("data:image/svg+xml,...")  /* SVG 图标 */

图标可以是 SVG 内联数据，也可以用本地图片：

1
/* 使用本地图片作为图标 */
2
&.bdm-shuwu
3
  .bdm-title
4
    &:before
5
      background: none
6
      background-image: url("/favicon/logo.png")
7
      background-size: contain
8
      background-repeat: no-repeat
9
      mask-image: none

使用方式#

在 Markdown 中直接写：

1
:::shuwu[标题]
2
内容
3
:::
4

5
:::ai
6
内容
7
:::

加 [标题] 会自定义标题文字，不加则默认显示类型名大写。