Docusaurus 代码片段

Docusaurus 代码块(高亮展示) 提供了在Markdown文档中嵌入代码的基本能力，但是有时候我需要在多个文档中引用相同的代码片段，类似 Sphinx展示代码 提供的 代码包含 ( literalinclude:: ) 指令。

引用本地文件

google gemini提到了使用 raw-loader 可以实现直接加载代码文件

  • 先安装 raw-loader :

安装 raw-loader
npm install --save raw-loader

  • 编写 .mdx 文档，这里我编写了一个 proxy.mdx ，引用了一个 ../_code/os/proxy/environment 文件:

使用 raw-loader 加载本地文件
import CodeBlock from '@theme/CodeBlock';
import MyCode from '!!raw-loader!../_code/os/proxy/environment';

<CodeBlock language="bash">{MyCode}</CodeBlock>

amazing 果然可以实现加载代码片段，这样就可以在不同的 mdx 文档中引用相同的代码片段

备注

不过， markdown 格式实在太简陋了，完全没有做到 Sphinx文档 的各种引用功能，需要通过 MDX 扩展来使用react的功能，对撰写文档非常不友好。

应用GitHub公开仓库代码

参考