这也许是最强势的 所见即所得 Markdown 编辑器 - V2EX
V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
laobubu
V2EX    Markdown

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

  laobubu 2018-06-14 15:10:27 +08:00 16928 次点击
这是一个创建于 2682 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

HyperMD Markdown Editor

这是一个 Markdown 编辑器组件,基于 CodeMirror,目标是:

打破 Markdown 写作预览次元壁

在线体验 | GitHub 项目地址

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


先大致看一下 在线体验

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

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

overview.gif


还有许多不同的体验……

上传图片(甚至是文件)

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

insert-file.gif

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

click.gif

复制网页,直接粘贴成 Markdown

这个基于第三方库做的

paste.gif

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

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

table.gif

math.gif

list.gif

html.gif


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

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

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

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

63 条回复    2019-05-16 22:41:11 +08:00
AltairT
    1
AltairT  
   2018-06-14 15:15:01 +08:00 via iPhone
支持 po 主的作品,看起来作为线上即时渲染的 md 编辑器挺不错的
diggerdu
    2
diggerdu  
   2018-06-14 15:22:21 +08:00 via iPhone
支持
zst
    3
zst  
   2018-06-14 15:28:35 +08:00
很不错诶 之前想给 pelican 做个后台,找了很多好像都不支持公式....
不过有个问题...在页面最下方编辑公式的时候那个 math preview 会跑到下面去被遮住....
laobubu
    4
laobubu  
OP
   2018-06-14 15:31:34 +08:00
@zst Math Preview 是演示页添加的功能。实际应用中,要自己处理公式预览的问题。

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

(没有写公式预览功能,而且渲染引擎是 MathJax 而不是 KaTeX )
autulin
    5
autulin  
   2018-06-14 15:32:21 +08:00 via iPhone
挺美的,支持
moposx
    6
moposx  
   2018-06-14 15:35:36 +08:00 via Android
挺棒的,支持
my101du
    7
my101du  
   2018-06-14 15:36:46 +08:00
个人感觉,的确是最强的!我可以搭个 php 后台来存储数据,管理自己的 markdown 笔记了。

一直在用 MWeb,在作者没有发布 3.0 正式版之前,我要换软件了。MWeb 一直有内容太多导致卡顿的问题。
lhx2008
    8
lhx2008  
   2018-06-14 15:37:46 +08:00 via Android
和语雀比怎么样,手写 md 一直不习惯,在寻找实时的
LittleYangYang
    9
LittleYangYang  
   2018-06-14 15:38:13 +08:00
支持一波! star 送上~
Desiree
    10
Desiree  
   2018-06-14 15:40:29 +08:00
支持大佬!
agagega
    11
agagega  
   2018-06-14 15:42:22 +08:00
CodeMirror 有坑吗?
laobubu
    12
laobubu  
OP
   2018-06-14 15:44:48 +08:00
@lhx2008 这个只是一个编辑器组件,输入 /输出 是 Markdown 文本,没有文档管理功能。
你可以把语雀的 Markdown 文本复制进来,编辑后,全选,再复制出去。参考: https://yuque.com/yuque/help/lnobo9
laobubu
    13
laobubu  
OP
   2018-06-14 15:46:42 +08:00
@agagega 现在很多网站的源代码编辑器都是用的 CodeMirror 改的(包括 V2EX 发帖页)。我这个 HyperMD 要求 CodeMirror 版本新一点 v5.37 及以上
topthink
    14
topthink  
   2018-06-14 15:51:52 +08:00
挺棒的,支持~
zst
    15
zst  
   2018-06-14 15:53:49 +08:00
@laobubu 我在那个最小 demo 里面一输入```再按一个键就卡死了,还有就是```好像渲染完没被去掉?
loliyu
    16
loliyu  
   2018-06-14 15:56:34 +08:00
支持 加油~
zthxxx
    17
zthxxx  
   2018-06-14 15:59:21 +08:00   1
说最强势的可能有人不服,
Typora 喵喵喵?
MarkText 喵喵喵?

https://typora.io
https://github.com/marktext/marktext
laobubu
    18
laobubu  
OP
   2018-06-14 16:01:09 +08:00
@zst 尴尬, 最小 demo 漏了一个 script 标签 <script src="https://cdn.jsdelivr.net/npm/codemirror/mode/meta.js"></script>
(果然还是用打包器来解决依赖最方便啊)

代码块的 ``` 确实没去掉,不确定用什么方式渲染会好一点
we000
    19
we000  
   2018-06-14 16:05:00 +08:00
不错, 支持.

东半球最强势的.
zst
    20
zst  
   2018-06-14 16:07:39 +08:00
@laobubu 还是要支持一波的.........2333333
menc
    21
menc  
   2018-06-14 16:09:01 +08:00
@zthxxx
人家这是前端组件,不是一个软件
exception
    22
exception  
   2018-06-14 16:14:48 +08:00
不错
airyland
    23
airyland  
   2018-06-14 16:33:06 +08:00   1
看到 26 个收藏,没有一个感谢,给楼主补了一个。
ofooo
    24
ofooo  
   2018-06-14 16:48:47 +08:00
表格处理怎么样? 平常用 typera,如果好的话换一下试试. 所见即所得,快捷键插入表格等等.
cy97cool
    25
cy97cool  
   2018-06-14 16:51:09 +08:00
求一个 Ctrl+V 就传图的功能 监听页面的 paste 事件 发起上传请求后把得到的 URL 插入到当前光标位置
fy
    26
fy  
   2018-06-14 16:54:04 +08:00
虽然挺好的,但是……

为什么都是 CodeMirror 呢
xupefei
    27
xupefei  
   2018-06-14 16:58:35 +08:00
LaTeX 在线编辑平台 Overleaf 也有类似的所见即所得功能。看起来不错但实际上很不好用。
考虑到 Markdown 比 LaTeX 简单不少,前者的所见即所得好不好用还不好说……
cy97cool
    28
cy97cool  
   2018-06-14 16:59:15 +08:00
忽视我上一条 果然大佬已经实现了这个功能 666
laobubu
    29
laobubu  
OP
   2018-06-14 17:00:29 +08:00
@fy CodeMirror 吼啊,用户的输入输出都是源代码字符串,开发者还能定制各种样式和插件,大家都爱用。

@ofooo 表格的话,只能是大概能用,毕竟用的编辑器后端限制还是挺多的。
JohnChiu
    30
JohnChiu  
   2018-06-14 17:01:18 +08:00 via iPhone
很强大,支持一下
cy97cool
    31
cy97cool  
   2018-06-14 17:08:32 +08:00
https://laobubu.net/HyperMD/docs/examples/ai1.html

这个 all in one 的页面还是引入了太多依赖的 js。。。

不想折腾前端的表示能不能提供个真正的 all in one 的 js 文件,这个 js 不要再载入其他 js (自己包含 code mirror 等等),便于部署到内网(不能访问 CDN )

搞个网站让我来选择需要的扩展功能、填好配置项提交就能得到一个省心的 js 就更好了 例如并不想要 MathJax
laobubu
    32
laobubu  
OP
   2018-06-14 17:22:02 +08:00
@cy97cool
使用纯 HTML 的话,手动引入所有依赖是不可避免的。如果受不了手写依赖,请参考文档中“使用打包器”的部分: http://laobubu.net/HyperMD/?directOpen#./docs/zh-CN/index.md

再次一点,可以 使用 RequireJS 模块加载器
cy97cool
    33
cy97cool  
   2018-06-14 17:26:46 +08:00 via Android
@laobubu 我的想法是打包过程我不想了解
你的网站直接按需提供你打包好的 js 给我下载就完美了
OSF2E
    34
OSF2E  
   2018-06-14 17:27:15 +08:00
不熟悉你的项目的目录结构,问几个伸手党性质的问题:
目前市面上的常见的 MD 编辑器中的 MD 语法解析库是开发者自己造的轮子还是使用的第三方开源库?(是或否)
如果是使用的第三方库,那么能否多推荐几个?
如果是轮子,能否告知下轮子的在该项目仓库中的位置?
laobubu
    35
laobubu  
OP
   2018-06-14 17:35:05 +08:00
@cy97cool
如果不需要第三方库(例如 MathJax ),删掉它们,以及对应的 PowerPack 就行了。
例如 MathJax 对应的是 powerpack/fold-math-with-mathjax

ai1.html 里 [(optional) PowerPacks ] 那部分可以全部删掉的。
LeungJZ
    36
LeungJZ  
   2018-06-14 17:40:05 +08:00
emmmm 确实不错的,我想用在我的博客上了。
zuolan
    37
zuolan  
   2018-06-14 17:45:41 +08:00
第一感受很棒, 保持关注.
hdyl
    38
hdyl  
   2018-06-14 17:47:17 +08:00
支持一下
laobubu
    39
laobubu  
OP
   2018-06-14 17:51:32 +08:00 via Android
@OSF2E 基本都用的轮子啊。HyperMD 最初也是造了半个轮子,但是后面放弃了(见 feature-new-mode 分支),改为在 CodeMirror 的 Markdown Mode 上打补丁。

Markdown 语法非常简单,自己练手写一个也可以。这个网站收录了很多 Markdown 引擎,随便输入段 Markdown 试试看: http://johnmacfarlane.net/babelmark2/
OSF2E
    40
OSF2E  
   2018-06-14 18:08:38 +08:00
@laobubu 谢谢,这个问题困扰我好久了
6IbA2bj5ip3tK49j
    41
6IbA2bj5ip3tK49j  
   2018-06-14 18:10:17 +08:00 via Android
战略收藏
ambeta
    42
ambeta  
   2018-06-14 18:46:13 +08:00
可以 看起来不错
easychen
    43
easychen  
   2018-06-14 18:52:31 +08:00
po 主,这个组件我之前就看过,挺好的。样式上能不能参考下 Bear,把 H1 之类的给标一下,list 给点亮成主题色。或者支持下自定义?
easychen
    44
easychen  
   2018-06-14 18:53:42 +08:00
忘了贴图了,这个是 Bear 的样式
1daydayde
    45
1daydayde  
   2018-06-14 18:54:52 +08:00
不错不错
laobubu
    46
laobubu  
OP
   2018-06-14 19:16:22 +08:00   1
@easychen 这个颜色看起来不错。
主题定义在 https://github.com/laobubu/HyperMD/blob/master/theme/hypermd-light.scss 里面,文件有点长,等以后看情况要不要拆分一下。
(关于标题,还有一种隐藏的玩法: https://github.com/laobubu/HyperMD/issues/28
zhaojjxvi
    47
zhaojjxvi  
   2018-06-14 20:01:54 +08:00 via iPhone
内嵌的好像用的 sm.ms 的图床
这样合适吗?
arsom
    48
arsom  
   2018-06-14 20:04:09 +08:00 via Android
战略 mark
xiangyuecn
    49
xiangyuecn  
   2018-06-14 20:15:30 +08:00
战略 性 mark

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

一听到所见即所得就想到 HyperText Markup Language,不是说好了要专注于文字而不是排版咩~
theEric
    50
theEric  
   2018-06-14 20:16:44 +08:00
cool
thunderbuddy
    51
thunderbuddy  
   2018-06-15 11:51:48 +08:00
战略 Mark
scorpius
    52
scorpius  
   2018-06-15 12:54:15 +08:00
cool
phoenixlzx
    53
phoenixlzx  
   2018-06-15 13:11:55 +08:00
cool

star 已送
mokeyjay
    54
mokeyjay  
   2018-06-15 13:28:18 +08:00
不错,但是真的不考虑鸣谢一下 sm.ms 图床?
ccino
    55
ccino  
   2018-06-15 14:01:08 +08:00
收藏先。。。
panlilu
    56
panlilu  
   2018-06-15 14:23:16 +08:00
挺好,支持一波
xupefei
    57
xupefei  
   2018-06-15 15:11:42 +08:00   1
LZ...你 Github Repo 那一句简短介绍英文有三个错误。正确的是
A WYSIWYG Markdown Editor for browsers. Break the Wall between writing and previewing.
wxkvEX
    58
wxkvEX  
   2018-06-15 15:16:56 +08:00
很强大,如果能支持 vim 模式就更好了。
vim 的市场好像不是很大,太麻烦的话可以不考虑。
laobubu
    59
laobubu  
OP
   2018-06-16 16:21:24 +08:00   1
@zhaojjxvi 现在已经把 sm.ms 从基础功能里去掉了,主页也在上传图片时加了说明。用这个作为默认的文件上传服务确实不太好,已修改。

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

@wxkvEX CodeMirror 自带 VIM 模式支持的。(但是估计体验不会很好,毕竟 VIM 模式还是在编辑源代码的时候更合适…
vmarsed
    60
vmarsed  
   2018-06-18 09:32:47 +08:00
可以可以, 这才是 markdown 编辑器, 等了好几年了, 其他的都是辣鸡
200551310
    61
200551310  
   2018-06-25 10:12:11 +08:00
什么时候根据这个集成一个软件多好呀,mac 上还是习惯端上写作,但是很多软件的流畅度基本上达不到我的要求。
laobubu
    62
laobubu  
OP
   2018-07-09 20:10:49 +08:00
@200551310 #61 如果是 App 端的话,可以试试 Typora ?
aliangddd
    63
aliangddd  
   2019-05-16 22:41:11 +08:00 via iPhone
收藏在哪里?
关于     帮助文档     自助推广系统     博客     API     FAQ     Solana     2799 人在线   最高记录 6679       Select Language
创意工作者们的社区
World is powered by solitude
VERSION: 3.9.8.5 34ms UTC 07:04 PVG 15:04 LAX 00:04 JFK 03:04
Do have faith in what you're doing.
ubao msn snddm index pchome yahoo rakuten mypaper meadowduck bidyahoo youbao zxmzxm asda bnvcg cvbfg dfscv mmhjk xxddc yybgb zznbn ccubao uaitu acv GXCV ET GDG YH FG BCVB FJFH CBRE CBC GDG ET54 WRWR RWER WREW WRWER RWER SDG EW SF DSFSF fbbs ubao fhd dfg ewr dg df ewwr ewwr et ruyut utut dfg fgd gdfgt etg dfgt dfgd ert4 gd fgg wr 235 wer3 we vsdf sdf gdf ert xcv sdf rwer hfd dfg cvb rwf afb dfh jgh bmn lgh rty gfds cxv xcv xcs vdas fdf fgd cv sdf tert sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf shasha9178 shasha9178 shasha9178 shasha9178 shasha9178 liflif2 liflif2 liflif2 liflif2 liflif2 liblib3 liblib3 liblib3 liblib3 liblib3 zhazha444 zhazha444 zhazha444 zhazha444 zhazha444 dende5 dende denden denden2 denden21 fenfen9 fenf619 fen619 fenfe9 fe619 sdf sdf sdf sdf sdf zhazh90 zhazh0 zhaa50 zha90 zh590 zho zhoz zhozh zhozho zhozho2 lislis lls95 lili95 lils5 liss9 sdf0ty987 sdft876 sdft9876 sdf09876 sd0t9876 sdf0ty98 sdf0976 sdf0ty986 sdf0ty96 sdf0t76 sdf0876 df0ty98 sf0t876 sd0ty76 sdy76 sdf76 sdf0t76 sdf0ty9 sdf0ty98 sdf0ty987 sdf0ty98 sdf6676 sdf876 sd876 sd876 sdf6 sdf6 sdf9876 sdf0t sdf06 sdf0ty9776 sdf0ty9776 sdf0ty76 sdf8876 sdf0t sd6 sdf06 s688876 sd688 sdf86