前言

趁着年轻，我自认为还是有点激情的，总想着在开源社区发出点声音。但是，一直没有找到一个优雅的代码预览方案让我如鲠在喉，而这是技术类文档必不可少的一环。

学前端一年多来，我以Vue为中心，体验过VuePress\VitePress\Nuxt.js等许多可以开发以内容为中心的网站的工具，但是没有一个项目在官方支持类似于代码预览的功能，前几天，我在用 Vue Playground 的时候，突然来了灵感：可不可以做一个可以在线编辑的代码预览？我花时间评估了一下，有实现的可能，说干就干！

预览

探索

技术调研

作为学生，我脸皮向来是挺厚的，该抄就抄。我先去翻了翻 Vue Playground 的源代码，发现它依赖了另一个仓库 @vue/repl，当我一点开，好家伙，我因为对Vue.js的源码还不是太熟悉，所以之前一直没想明白 md 的组件字符串如何转成一个真正的组件，尤其是 style 模块的插入问题，但是，尤雨溪在这里已经给了我答案。那么最大的难点已经有了解决方案了，我要做的就是在此基础上做一层改造、封装。

开发历程

Vue组件封装

作为一个代码预览组件，使用方式自然和 Vue Playground 有所区别，比如：

• 不用考虑新建文件，不用考虑组件导入
• 布局要从左右布局调整为上下布局
• 支持折叠代码、复制代码
• ……

CodeMirror升级

CodeMirror 是一个极其优秀的代码编辑器，正好看到它发布了大版本6，就一边熟悉新的CodeMirror架构，一边升一下级（@vue/repl 用的 CodeMirror@5）。不得不提一嘴，CodeMirror@6 相较 CodeMirror@5 而言，可以完全算是两个东西，这个一个颠覆式的版本升级。（如果Vue2升到Vue3差别也这么大，早就被骂死了）

Vite插件开发

首先，为什么还要开发 Vite 插件呢，Vue应用里用Vue组件不是直接导入就完事了吗？啊对对对。不过，在VitePress中可不行，这个插件也是为VitePress准备的，只有配上插件，才能在VitePress中快乐使用。 说实话，我之前并没有写过Vite插件，还好不难，不然这项目就破产了。这个插件的核心逻辑就是：扫描md文件中预定义的有preview标记的vue代码块，并用组件替换掉，代码块如下：

    ```vue preview
        省略
    ```

显然，这个逻辑是在 Vite 插件的 transform 钩子中实现的，正则匹配 + 替换，搞定收工！别，千万别，其实这里有个很重要的点容易漏掉！！！假如代码预览组件为 VuePreview，初始化代码 props 用的 code，那么替换之后的代码类似于<VuePreview code="str"></VuePreview>，这个 str 就是替换前md中的需要预览的代码内容。呵，试想一下，假如需要预览的内容里也有 " 引号呢，这段代码还能正常解析吗？'、` 同理，所以这个 str 的内容需要做转义，转义到什么程度呢？转译到全部为 Ascii，只有这样，才能保证解析符合预期。

项目

前面水了那么多，终于到了介绍项目的环节了：GitHub地址 / 文档

• 支持Vue/Vitepress项目
• 支持代码预览/在线编辑
• 代码折叠/复制

后话

这篇水文在于记录记录一下开发历程，同时也对这个项目做个小介绍。其实真正完成之后，感觉也没什么重难点了。就好像写业务，写完之后感觉这么简单，但是，没有几次是真正按时且保质的完成的。

感谢浪费几分钟看我的水文，感谢 Star🫣