Markdown 组件示例
本篇演示 src/components/Markdown/setup.ts 中启用的各项能力。
目录
标题与锚点
在每个标题后都会自动生成 # 形式的锚链接，点击即可复制当前位置。slugify 兼容中文：
这是一个中文小节
This is an English section
代码高亮（Shiki）
行内代码：const answer = 42。
interface User {
id: number
name: string
}
function greet(user: User): string {
return `Hello, ${user.name}!`
}行标注与差异
function sum(a: number, b: number) {
return a - b
return a + b
}单词标注
// Vite 是下一代前端工具。Vite 很快。GitHub Alerts
Note
强调用户在快速浏览文档时也应注意的信息。
Tip
让事情变得更顺利的小贴士。
Important
用户完成任务必须了解的关键信息。
Warning
因为潜在风险，用户应该立即注意的信息。
Caution
某些操作的负面后果。
链接
列表与表格
- 有序项一
- 有序项二
- 嵌套无序项
- 嵌套无序项
| 特性 | 插件 |
|---|---|
| 代码高亮 | @shikijs/markdown-it |
| 锚点 | markdown-it-anchor |
| 告警块 | markdown-it-github-alerts |
数学公式
行内公式：当 时， 的解为 。
块级公式：
括号彩虹
function compose<T>(fns: Array<(x: T) => T>) {
return (input: T) => fns.reduce((acc, fn) => fn(acc), input)
}自动链接
纯文本链接会自动识别：https://vuejs.org 。
引用
"Premature optimization is the root of all evil." — Donald Knuth
至此，setup.ts 中启用的能力已全部覆盖，可作为新建文章时的模板参考。