这也许是最强势的 所见即所得 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 文档、组件设计之类的。（如果这个项目有关注度的话，也许可以梳理一下里面的技术？）

[6IbA2bj5ip3tK49j]

战略收藏

[ambeta]

可以 看起来不错

[easychen]

po 主，这个组件我之前就看过，挺好的。样式上能不能参考下 Bear，把 H1 之类的给标一下，list 给点亮成主题色。或者支持下自定义？

[easychen]

忘了贴图了，这个是 Bear 的样式

[0312birdzhang]

不错不错

[laobubu]

@easychen 这个颜色看起来不错。
主题定义在 https://github.com/laobubu/HyperMD/blob/master/theme/hypermd-light.scss 里面，文件有点长，等以后看情况要不要拆分一下。
（关于标题，还有一种隐藏的玩法： https://github.com/laobubu/HyperMD/issues/28

[zhaojjxvi]

内嵌的好像用的 sm.ms 的图床
这样合适吗？

[arsom]

战略 mark

[xiangyuecn]

战略 性 mark

写 md 还是感觉用 notepad 这种纯文本来的直观清爽

一听到所见即所得就想到 HyperText Markup Language，不是说好了要专注于文字而不是排版咩~

[theEric]

cool

[thunderbuddy]

战略 Mark

[scorpius]

cool

[phoenixlzx]

cool

star 已送

[mokeyjay]

不错，但是真的不考虑鸣谢一下 sm.ms 图床？

[ccino]

收藏先。。。

[panlilu]

挺好，支持一波

[xupefei]

LZ...你 Github Repo 那一句简短介绍英文有三个错误。正确的是
A WYSIWYG Markdown Editor for browsers. Break the Wall between writing and previewing.

[wxkvEX]

很强大，如果能支持 vim 模式就更好了。
vim 的市场好像不是很大，太麻烦的话可以不考虑。

[laobubu]

@zhaojjxvi 现在已经把 sm.ms 从基础功能里去掉了，主页也在上传图片时加了说明。用这个作为默认的文件上传服务确实不太好，已修改。

@mokeyjay 我的疏忽。那段代码是从几乎最早的版本里一直留下来的，一直忙着填别的坑，连文档都还没来得及整理，但并不是不愿意鸣谢。让你不开心了我很抱歉

@wxkvEX CodeMirror 自带 VIM 模式支持的。（但是估计体验不会很好，毕竟 VIM 模式还是在编辑源代码的时候更合适…

[vmarsed]

可以可以, 这才是 markdown 编辑器, 等了好几年了, 其他的都是辣鸡