Skk's Blog|

🤟 MDX用法扩展示例

代码高亮

来自@shikijs/rehype的代码高亮, 以及部分预配置的Transformers. 支持高亮某行代码, 代码Diff, 代码警告和错误显示, 代码块标题.

在要高亮的行后注释中加上[!code error]或[!code warning]标记代码错误或警告; 加上[!code ++]和[!code --]标记代码Diff; 加上[!code highlight]标记高亮行; 在Markdown代码块的元数据中加上title字段标记代码块标题.

demo
int main() { // 这是错误
	int a = 1; // 这是警告
	int b = 2; // 这是增加
	int c = a + b; // 这是删除
	return 0; // 这是高亮
}
```cpp title=demo // 这里是代码块标题
```cpp {1,3-5} // 也可以通过元数据来高亮行

容器

用Markdown的Directive语法:::实现的容器, 支持的类型为info, warning, danger, refer. 可以通过:::info {title=标题}来自定义容器的标题.

系统环境

本文使用的系统环境为Arch Linux, Ubuntu 24.04 LTS

错误

以下行为是不允许的:

  1. 在终端中输入:(){ :|:& };:命令
  2. 在终端中输入rm -rf /命令
警告

以下行为是不建议的:

  • 直接用root用户运行所有程序
  • 在.bashrc中exec一个不存在的命令
成功

以下行为是建议的:

  • 使用Valgrind检查内存泄漏
  • 为应用程序单独设置QT_IM_MODULE环境变量
参考

这篇文章参考了以下文档:

文件树

通过Markdown的Directive语法:::filetree实现的文件树, 在:::记号中使用Markdown的无序列表常规语法-来表示文件树的层级关系. 可以以/为结尾表示未展开的文件夹. 根据文件和文件夹的名称能显示对应的图标(通过正则匹配). 例如

:::filetree
- .next/
- app
	- showcase
		- page.tsx
	- page.tsx
	- layout.tsx
	- global.css
- package.json
- tsconfig.json
- next.config.ts

会生成

  • .next
  • app
    • showcase
      • page.tsx
    • page.tsx
    • layout.tsx
    • global.css
  • package.json
  • tsconfig.json
  • next.config.ts

数学公式

通过remark-math和rehype-mathjax实现的数学公式渲染, 支持语法.

流程图Mermaid

通过rehype-mermaid实现的流程图渲染, 支持Mermaid语法.

graph TD
	A((1)) --> B((2))
	A((1)) --> C((3))
	A((1)) --> D((4))
	C-->D
	E((5))

会生成

PDF展示

通过react-pdf实现的PDF展示, 支持PDF中Annotations的高亮和跳转. 通过<PDF src="" scale={} />来展示PDF, src为PDF的URL, scale为可选缩放比例. 该功能基于canvas绘制, 而非embed, 因此可能带来性能问题. 组件默认动态加载, 当按下加载按钮时才会加载PDF组件.

本页内容