早些时间就折腾了 Hexo 与 Obsidian 联合工作的问题。将 Obsidian 上好用的新语法移植到 Hexo 往往只差一个 markdown 渲染环节。

在苦苦的搜寻和探索过程中，我解决了 Obsidian 中 Callouts 语法问题，同时接触了 markdown-it-plugin。正是 这篇文章 为我打开了一扇新世界的大门。后来，我的目光一直从 hexo-plugin 和 markdown-it-plugin 之间徘徊，甚至萌生脚本全文替换的想法。出于易用性和普遍性的考虑，我最终决定直接开发一款 markdown-it-plugin 解决 Obsidian 语法问题。

入手 markdown-it 插件开发其实并不简单，虽说存在官方文档，但阅读门槛较高。

image.png

经过资料查阅，大多数的中英文博客文章（甚至是 markdown-it 本 it）都建议从模仿开始入手，官方并没有心思写过于详细的手把手教程（有趣的是，关于这个问题，官方仓库论坛甚至可以看到 开发者骂街🤭）

markdown-it 的官方文档只是给了一部分案例，用于指导如何使用它的 API，将它接入到 Web 程序中，但是光看它的文档，我并没有找到写插件的头绪。因此，写插件的最好办法就是抄别人的代码。——widcardw

Q: There are no any documentation or tutorial on how to write syntax plugins for Markdown-it, neither in this repository nor in internet.
A: Yes, at current time it’s better to look into parser src, or existing pugins. I will add more examples & explanations, but do not expect it to be in top priority.
——How to write plugins? #10

有了这条明确的方向，我的插件开发探索开始了。

  1. 首先，我需要明白 markdown-it 插件基本结构与开发方法。这一点官方是提供了一个基本概念和文档的。一口气肯定不能读完读懂，但阅读的过程中可以对基本渲染部件有所了解。
  2. 接下来，开始简单的插件源码阅读。当然是挑最简单的来读啦，我看了官方写的上标插件，看懂了又好像没看懂。复杂的地方就是 state、rule 这些。背后的机理还是没完全明白，不管了我要抓紧时间啊！
  3. 然后，找到合适的插件进行模仿和修改。我尝试阅读多款功能相近的插件，最终选出 @peaceroad/markdown-it-renderer-image 作为我大改的目标。
  4. 有了模仿目标后就着手进行开发。这个项目不算远古项目，近期也有一定的下载量。此外，项目包含测试，以填补我 npm 插件开发盲区。整个程序代码不复杂，有些变量命名和逻辑可以进行优化。我做的工作主要是裁剪不需要的功能，写一个正则替换就行。为了项目二次开发，我把测试用例写得更好看些。
  5. 完成测试后就是发布环节了。发布流程也很简单，大概十几分钟后，我就能通过 npm 仓库下载自己的包开始用了，整个使用流程也十分顺利。

读源码和写代码的过程中，大模型们（New Bing、ChatGPT3.5、星火认知）确实有参与，但作用不算很大，胡说八道占一半，对它的内容我都半信半疑，不如自己上网搜。

在校学习之余完成插件的整个开发过程，包括调研和总结，耗时 2~3 天。这次的成功也让我产生更多的开发想法，苦于在校没时间，只能期待以后尝试咯。

最后放上本文相关项目：uuanqin/markdown-it-obsidian-imgsize: Obsidian图片大小处理插件 (github.com)，期待你的小⭐⭐😋！

Readme Card