作为一名开发者每次写技术博客最烦的事情是什么对我来说不是排版不是配图而是粘贴代码。从编辑器复制一段代码贴到 CSDN 里格式乱了还得手动选中、点代码块、选语言。或者更原始一点自己敲三个反引号再补上python。一天写下来光是搞代码块就要浪费几分钟极其消磨耐心。为了解决这个摩擦我花了一段时间写了一个轻量级的浏览器扩展——CodeFencer。今天开源出来希望能帮到同样被这个问题困扰的朋友。它能干什么简单来说它让你在写博客时只用一个快捷键就能完成代码块的转换。核心功能有三个CtrlShiftV粘贴即代码块复制代码后按下自动读取剪贴板、识别语言、加上围栏写回剪贴板。CtrlShiftF选中转代码块选中已输入的文字原地加上围栏。CtrlShiftX去围栏选中代码块一键去掉外面的。内置了十几种常见语言的自动检测bash、python、javascript、typescript、java、cpp、go、sql、json、html、css、php、csharp基本覆盖日常写作需求。⚠️关于 CSDN 使用体验的坦诚说明必看这里必须坦诚地告诉大家一个技术上的限制。因为 CSDN 使用的是基于 ProseMirror 的富文本编辑器它的内部模型非常严格。任何绕过它直接修改 DOM 的行为都会被它覆盖或引发崩溃。所以我放弃了“强行注入”的思路选择了“剪贴板降级方案”。在 CSDN 这种MD编辑器里具体操作流程是复制代码。按下CtrlShiftV。此时插件会弹出提示“已转为代码块 [语言]请按 CtrlV 粘贴”。你只需要再按一次CtrlV它就会完美插入代码块。虽然多按了一次键盘但这保证了 100% 的可用性和稳定性不会把你辛辛苦苦写的文章搞崩。注在标准的 Markdown 编辑器如 GitHub、掘金 Markdown 模式下它是直接自动插入的不需要第二次CtrlV️ 目前还不太完善的地方一些真实的缺陷作为一个刚写出来的 v1.0.0 版本我必须诚实地承认它远非完美。目前已知的不足有语言检测并非 100% 准确如果是 TS 和 JS 混写或者写法比较小众的代码可能会检测错语言。目前我用了一套启发式的规则还需要慢慢喂养和完善。富文本编辑器体验割裂在 CSDN、知乎等地方目前只能做到“写回剪贴板 手动粘贴”多了一步操作没有达到真正的“一键”。受控组件支持有限如果你的页面用 React 或 Vue 封装了非常复杂的自定义编辑器直接修改value可能会失效。适配面还比较窄目前主要测试了 CSDN、GitHub、掘金和原生 textarea对于 Notion、Obsidian、飞书等复杂的编辑器尚未做专项适配。 未来计划 邀请大家共建一个人开发视野和精力总是有限的。这个项目我会持续维护下去。如果你在使用中遇到了 Bug或者有什么好的建议恳请大家不要直接在评论区骂我哈哈去 GitHub 提一个 Issue或者在这里留言告诉我。未来的迭代方向包括引入打分制算法把语言检测的准确率提上去。探索针对 ProseMirror 或者 Slate.js 等主流富文本框架的底层适配争取做到在 CSDN 里也能真正“一键插入”。听取大家的反馈适配更多个性化的编辑器环境。一人计短二人计长。大家的每一个建议都会成为它变好的阶梯。 安装使用扩展已经开源在 GitHub完全免费无任何依赖体积只有几十 KB。GitHub 地址https://github.com/jiangwensheng891-source/CodeFencer安装步骤打开上面的 GitHub 链接。在右侧找到Releases点击下载最新的CodeFencer-v1.0.0.zip。解压到一个你电脑上的固定文件夹。打开浏览器地址栏输入chrome://extensions/Edge 是edge://extensions/。打开右上角的“开发者模式”。点击左上角的“加载已解压的扩展程序”选择你刚才解压的文件夹。搞定现在你可以打开 CSDN复制一段代码按下CtrlShiftV试试了。开发背后的故事写这个插件的过程中踩了不少坑。尤其是针对 CSDN 富文本编辑器的适配尝试了execCommand、合成ClipboardEvent、直接改textContent最终发现“不跟它对抗退回剪贴板”才是最稳的方案。这也让我明白有时候在工程上“优雅降级”比“强行注入”更靠谱。写在最后如果你觉得这个小工具帮到了你欢迎去 GitHub 给我点一个 Star ⭐️这是对我最大的鼓励。如果在使用过程中遇到任何问题或者有适配其他编辑器的需求欢迎在 GitHub 提 Issue我会持续维护。感谢阅读祝大家写博客愉快