Halo 代码块支持

背景#

在其他博客平台（如 Halo）使用 tips:xxx 语法编写提示块，复制到 Astro 博客时需要手动改格式。为了实现跨平台无缝迁移，决定在 Astro 博客中添加 ```halo 代码块支持。

实现方案#

1. 添加 Rehype 插件#

创建 src/plugins/rehype-halo-code-block.mjs：

1
import {visit} from 'unist-util-visit';
2
import { h } from 'hastscript';
3

4
const TIPS_TO_ADMONITION = {
5
    'info': 'note',
6
    'warn': 'warning',
7
    'danger': 'caution',
8
    'success': 'tip',
9
    'tip': 'tip',
10
    'note': 'note',
11
    'important': 'important',
12
};
13

14
export function rehypeHaloCodeBlock() {
15
    return (tree) => {
16
        const toReplace = [];
17

18
        visit(tree, (node, index, parent) => {
19
            if (node.tagName !== 'pre') return;
20
            if (!node.children || !node.children[0]) return;
21
            const codeEl = node.children[0];
22
            if (codeEl.tagName !== 'code') return;
23
            if (codeEl.properties?.className?.[0] !== 'language-halo') return;
24

25
            const textContent = codeEl.children?.[0]?.value || '';
26
            const lines = textContent.trim().split('\n');
27
            if (lines.length === 0) return;
28

29
            const firstLine = lines[0];
30
            if (!firstLine.startsWith('tips:')) return;
31

32
            const tipsType = firstLine.replace('tips:', '').trim();
33
            const admonitionType = TIPS_TO_ADMONITION[tipsType] || 'note';
34
            const body = lines.slice(1).join('\n').trim();
35

36
            const title = admonitionType.toUpperCase();
37
            const admonitionEl = h(`blockquote.admonition.bdm-${admonitionType}`, [
38
                h('span.bdm-title', title),
39
                h('div', body.split('\n').map(line => h('p', line)))
40
            ]);
41

42
            if (parent && typeof index === 'number') {
43
                toReplace.push({ parent, index, newNode: admonitionEl });
44
            }
45
        });
46

47
        for (const { parent, index, newNode } of toReplace) {
48
            parent.children.splice(index, 1, newNode);
49
        }
50
    };
51
}

2. 配置 Astro#

在 astro.config.mjs 中：

引入插件
配置 expressive-code 忽略 halo 语言
添加 rehype 插件

1
import { rehypeHaloCodeBlock } from "./src/plugins/rehype-halo-code-block.mjs";
2

3
// expressive-code 配置中添加
4
ignoreLang: ["halo"],
5

6
// rehypePlugins 中添加
7
rehypeHaloCodeBlock,

3. 修复样式冲突#

src/styles/markdown.css 中原有一规则会让所有 blockquote 显示灰色左边条，需要排除 admonition：

1
/* 原来 */
2
blockquote { ... }
3

4
/* 修改后 */
5
blockquote:not(.admonition) { ... }

使用方式#

NOTE
这是一条信息提示

TIP
这是一条提示

TIP
这是一条成功提示

WARNING
这是一条警告

CAUTION
这是一条危险警告

映射规则#

tips 语法	admonition 类型
`tips:info`	note
`tips:success`	tip
`tips:warn`	warning
`tips:danger`	caution
`tips:tip`	tip
`tips:note`	note
`tips:important`	important

文件变更#

新增：src/plugins/rehype-halo-code-block.mjs
修改：astro.config.mjs
修改：src/styles/markdown.css