这也许是最强势的 所见即所得 Markdown 编辑器 🤟🏻

[laobubu]

这个去年发过，但是当时算是一个写得挺乱的实验品。 上个月我重新拾起来这个项目，好好地用 TypeScript ~~重构~~ 重写了一番。

这是一个 Markdown 编辑器组件，基于 CodeMirror，目标是：

打破 Markdown 写作 和 预览 的 次元壁！

在线体验 | GitHub 项目地址

这个编辑器组件很容易集成到网页中，具体可以参考 https://laobubu.net/HyperMD/docs/ HyperMD 的文档

---

先大致看一下 在线体验 页

能够自动隐藏、渲染许多 Markdown 元素。几乎是所见即所得！

大家可以随便找几个 Markdown 文件，把内容复制进去试试看。

---

还有许多不同的体验……

上传图片（甚至是文件）

演示页不支持上传文件，但是图片还是可以试试的。

Ctrl+点击，打开链接，跳转脚注，改变 TODO 状态

复制网页，直接粘贴成 Markdown

这个基于第三方库做的

支持表格、列表、数学公式等、甚至一些内嵌的 HTML 元素

• 对于代码块，能够自动载入语法高亮规则
• 可以用 Tab 和 Shift-Tab 编辑表格和列表
• 可以嵌入 HTML，实现居中显示和自定义元素等（虽说这个功能还有一点问题）

---

说明一下，这个是只是个编辑器组件，因此下面这些功能都不支持：

• 读取、保存内容
• 云同步笔记
• 文档管理
• 上传文件到云盘（除非自定义一个上传回调函数）
• 管理 Jekyll 或者其他博客的文章

如果有兴趣的话，可以考虑基于这个编辑器组件，一起来搞个新项目。

另外，这个项目里也有一些有意思的地方，比如用 TypeScript 自动生成 API 文档、组件设计之类的。（如果这个项目有关注度的话，也许可以梳理一下里面的技术？）

[AltairT]

支持 po 主的作品，看起来作为线上即时渲染的 md 编辑器挺不错的

[diggerdu]

支持

[zst]

很不错诶 之前想给 pelican 做个后台，找了很多好像都不支持公式....
不过有个问题...在页面最下方编辑公式的时候那个 math preview 会跑到下面去被遮住....

[laobubu]

@zst Math Preview 是演示页添加的功能。实际应用中，要自己处理公式预览的问题。

最小 Demo 在这里： https://laobubu.net/HyperMD/docs/examples/ai1.html

（没有写公式预览功能，而且渲染引擎是 MathJax 而不是 KaTeX ）

[autulin]

挺美的，支持

[moposx]

挺棒的，支持

[my101du]

个人感觉，的确是最强的！我可以搭个 php 后台来存储数据，管理自己的 markdown 笔记了。

一直在用 MWeb，在作者没有发布 3.0 正式版之前，我要换软件了。MWeb 一直有内容太多导致卡顿的问题。

[lhx2008]

和语雀比怎么样，手写 md 一直不习惯，在寻找实时的

[LittleYangYang]

支持一波！ star 送上~

[Desiree]

支持大佬！

[agagega]

CodeMirror 有坑吗？

[laobubu]

@lhx2008 这个只是一个编辑器组件，输入 /输出 是 Markdown 文本，没有文档管理功能。
你可以把语雀的 Markdown 文本复制进来，编辑后，全选，再复制出去。参考： https://yuque.com/yuque/help/lnobo9

[laobubu]

@agagega 现在很多网站的源代码编辑器都是用的 CodeMirror 改的（包括 V2EX 发帖页）。我这个 HyperMD 要求 CodeMirror 版本新一点 v5.37 及以上

[topthink]

挺棒的，支持~

[zst]

@laobubu 😂我在那个最小 demo 里面一输入```再按一个键就卡死了，还有就是```好像渲染完没被去掉？

[loliyu]

支持 加油~

[zthxxx]

说最强势的可能有人不服，
Typora 喵喵喵？
MarkText 喵喵喵？

https://typora.io
https://github.com/marktext/marktext

[laobubu]

@zst 尴尬， 最小 demo 漏了一个 script 标签 <script src="https://cdn.jsdelivr.net/npm/codemirror/mode/meta.js"></script>
（果然还是用打包器来解决依赖最方便啊）

代码块的 ``` 确实没去掉，不确定用什么方式渲染会好一点

[we000]

不错, 支持.

东半球最强势的.

[zst]

@laobubu 还是要支持一波的.........2333333