System: Blog_Engine_v2.0

FIG-1145-206

Markdown扩展语法

NO.01_DESC ↓

RefactX主题中增强Markdown功能的完整指南

Date_Log

April 29, 1145

Data_Size

352 WORDS

Est_Time

提示框h2

通过rehype-callouts插件实现，配置位于plugins/index.ts。

若修改theme配置（默认：'vitepress'），需同步更新src/styles/pro.css中的CSS导入（@import 'rehype-callouts/theme/yourconfig'）。

<!-- 提示框类型名称不区分大小写 -->

<!-- 不可折叠提示框 -->
> [!note]
> 普通提示内容

> [!tip]
> 技巧提示内容

> [!important]
> 重要提示内容

> [!warning]
> 警告提示内容

> [!caution]
> 谨慎提示内容

<!-- 可折叠提示框 -->
> [!caution]- 可折叠提示框
> 谨慎提示内容

> [!note]+ 可折叠提示框
> 普通提示内容

NOTE

普通提示内容

TIP

技巧提示内容

IMPORTANT

重要提示内容

WARNING

警告提示内容

CAUTION

谨慎提示内容

可折叠提示框

谨慎提示内容

可折叠提示框

普通提示内容

增强代码块h2

通过astro-expressive-code实现，配合@expressive-code/plugin-collapsible-sections和@expressive-code/plugin-line-numbers插件提供高级功能。

语法高亮示例h4

console.log('这段代码会显示语法高亮!')

ANSI颜色示例：
- 常规色: 红 绿 黄
- 粗体: 红 绿

代码编辑器框架h5

// 使用`title="文件名"`添加标题
console.log('带标题的代码块示例')

标记代码行h5

// 第1行 - 通过行号标记
// 第4行 - 通过行号标记
// 第7-8行 - 通过范围标记

可折叠代码段h5

5 collapsed lines
// 这些样板代码会被折叠
import { boilerplate } from '@example/core'

// 默认可见的核心代码
runMainLogic()

// 这些辅助代码会被折叠
cleanupResources()

图片标注与链接h2

使用remark-directive-sugar的:::image指令实现高级图片功能。

带标题图片h3

:::image-figure[图片标题]
![](/assets/sample.jpg)(style: width:600px;)
:::

可点击图片h3

:::image-a{href="https://example.com"}
![](/assets/sample.jpg)
:::

视频嵌入h2

使用::video指令嵌入各平台视频：

::video-youtube{#视频ID}
::video-bilibili[custom title]{id=视频BV号}

样式化链接h2

使用:link指令创建带图标的链接：

:link[Vite]{id=@vitejs}
:link[npm包]{id=package-name}

Vite
RefactX

徽章h2

使用:badge指令创建状态标记：

:badge[新功能]{style="background-color: #bef264"}

新功能

折叠面板h2

:::details
::summary[点击展开]
- 项目1
- 项目2
:::

点击展开

项目1
项目2

再次感谢Stephanie Lin的开发，使本主题拥有如此优秀的扩展功能 💗。