简介
在前端开发中，使用 Gatsby 时需要对 markdown 文件进行处理，如添加图片、链接等。而 gatsby-remark-generic-extensions 包就是用于扩展 markdown 的功能。
安装
首先需要安装 Gatsby 和 gatsby-transformer-remark 插件，以及 gatsby-remark-generic-extensions 包。
npm install gatsby gatsby-transformer-remark gatsby-remark-generic-extensions
使用方法
在 Gatsby 配置文件 gatsby-config.js 中添加以下插件：
{
resolve: `gatsby-transformer-remark`,
options: {
plugins: [
`gatsby-remark-generic-extensions`,
],
},
},添加完插件后，markdown 文件可以使用以下语法：
- 添加 tooltip
Hello [World!](tooltip:Hi there!)
- 添加脚注
This is a sentence with[^1] a footnote. [^1]: This is the footnote.
- 添加公式
The Pythagorean theorem is: $a^2 + b^2 = c^2$.
示例代码
tooltip 示例
Hello [World!](tooltip:Hi there!)
解析后：
<p>Hello <a href="#" title="Hi there!">World!</a></p>
脚注示例
This is a sentence with[^1] a footnote. [^1]: This is the footnote.
解析后：
-- -------------------- ---- -------
------- -- - -------- --------- -------------------------------- - -------------
---- ------------------
----
--- ----------
------- -- --- --------- -- --------------- ------------- -- ------------------
-----
-----
------公式示例
The Pythagorean theorem is: $a^2 + b^2 = c^2$.
解析后：
<p>The Pythagorean theorem is: <span class="inlineMath">\(a^2 + b^2 = c^2\)</span>.</p>
总结
以上是 npm 包 gatsby-remark-generic-extensions 的使用教程，通过对 markdown 进行扩展可以方便地实现一些在原生 markdown 中不支持的功能。需要注意的是，使用过程中要避免过分依赖扩展，保持 markdown 的简洁性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60065b47c6eb7e50355dbf24