V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
推荐关注
Meteor
JSLint - a JavaScript code quality tool
jsFiddle
D3.js
WebStorm
推荐书目
JavaScript 权威指南第 5 版
Closure: The Definitive Guide
ericling
V2EX  ›  JavaScript

我是不是弱爆了,打算自己动手写个 markdown 渲染器,望而却步了 。。。

  •  
  •   ericling · 2017-10-22 10:40:28 +08:00 · 8300 次点击
    这是一个创建于 2587 天前的主题,其中的信息可能已经有所发展或是发生改变。

    用了不少 markdown 的渲染器,都不怎么满意,然后想自己去动手写个,找了个参照来看源码: https://github.com/StackExchange/pagedown

    主要就是这三个文件:

    Markdown.Converter.js
    Markdown.Editor.js
    Markdown.Sanitizer.js
    

    打开源码一看,要写这么复杂的正则,考虑这么多种情况下的渲染,就感觉自己弱爆了,根本没敢动手(=_=!!)。知道就算是强行写出来了,也是漏洞百出,没有实用价值。

    学 js 的同学,有多少小伙伴,自觉达到了能写出这个级别轮子的 js 水平哇?

    32 条回复    2017-10-23 09:38:24 +08:00
    nl101531
        1
    nl101531  
       2017-10-22 10:44:14 +08:00 via Android
    规则是有点复杂。
    cyr1l
        2
    cyr1l  
       2017-10-22 10:55:22 +08:00 via iPhone   ❤️ 2
    可以首先明确你对现在的渲染器哪里不满意,然后对已有的渲染器 fork 并改进。不一定要上来就造新轮子。
    tlday
        3
    tlday  
       2017-10-22 10:55:27 +08:00 via Android
    复杂的正则问题不大,太多边际情况在没有经验的时候,以出现一个改一个,不断迭代的方法就好。做这种东西关键需要毅力。
    CasualYours
        4
    CasualYours  
       2017-10-22 11:09:01 +08:00
    你可以先从简单入手嘛,比如先写 n 级标题的正则。
    duan602728596
        5
    duan602728596  
       2017-10-22 11:22:00 +08:00 via iPhone
    你可以试一试,在写的过程中,肯定会碰到很多问题需要解决,即使最后写不出来,在写的过程中也会有收获。如果写出来了,你就会想,原来这东西是这么实现的啊
    lxy
        6
    lxy  
       2017-10-22 11:33:05 +08:00   ❤️ 1
    用一整屏的注释解释了两条正则……
    text = text.replace(/(?=[^\r][*_]|[*_])(^|(?=\W__|(?!\*)[\W_]\*\*|\w\*\*\w)[^\r])(\*\*|__)(?!\2)(?=\S)((?:|[^\r]*?(?!\2)[^\r])(?=\S_|\w|\S\*\*(?:[\W_]|$)).)(?=__(?:\W|$)|\*\*(?:[^*]|$))\2/g, "$1<strong>$3</strong>");
    text = text.replace(/(?=[^\r][*_]|[*_])(^|(?=\W_|(?!\*)(?:[\W_]\*|\D\*(?=\w)\D))[^\r])(\*|_)(?!\2\2\2)(?=\S)((?:(?!\2)[^\r])*?(?=[^\s_]_|(?=\w)\D\*\D|[^\s*]\*(?:[\W_]|$)).)(?=_(?:\W|$)|\*(?:[^*]|$))\2/g, "$1<em>$3</em>");
    BBCCBB
        7
    BBCCBB  
       2017-10-22 11:33:18 +08:00
    fork+修改 + 1, 我也写不出来,哈哈
    anuan
        8
    anuan  
       2017-10-22 11:36:21 +08:00
    搭车求
    推荐一款好用的 web 端 markdow 渲染库
    loading
        9
    loading  
       2017-10-22 12:05:09 +08:00 via Android
    还好,你没进 wysiwyg,大公司大坑。
    jtn007
        10
    jtn007  
       2017-10-22 12:09:08 +08:00   ❤️ 1
    年少的我曾经也有这种想法。。。

    js 的 markdown 渲染库的话推荐这个
    https://github.com/chjj/marked
    然后搭配使用 github 的 md 的 css 式样
    https://github.com/sindresorhus/github-markdown-css

    基本就能达到不错的效果了,最近在搭博客,正好在找这些东西
    hantsy
        11
    hantsy  
       2017-10-22 12:11:14 +08:00
    这些只是 Render 而已,还不是 IDE 语法分析。
    hantsy
        12
    hantsy  
       2017-10-22 12:14:05 +08:00
    可视化编辑: https://simplemde.com/
    Render 还是喜欢 Marked
    ericgui
        13
    ericgui  
       2017-10-22 12:23:48 +08:00
    @cyr1l 已感谢

    其实这个方法论,不仅适用于这个 markdown 的轮子
    也适用于其他任何轮子
    不一定要从头开始
    可以就某一点做一些改变
    日拱一卒嘛
    dbw9580
        14
    dbw9580  
       2017-10-22 12:31:58 +08:00 via Android
    这种事情 lexer 比正则好用吧
    tamlok
        15
    tamlok  
       2017-10-22 12:38:43 +08:00 via Android
    我是对现在的笔记软件和 md 编辑器不满意,然后从头撸了一个 md 笔记软件。其实,做开了后也不是很复杂,就是很繁琐而已。VNote 默认使用的是 markdown-it 引擎来渲染,效果挺不错!


    https://github.com/tamlok/vnote/
    tamlok
        16
    tamlok  
       2017-10-22 12:39:54 +08:00 via Android
    @anuan 试试 markdown-it 吧,VNote 默认引擎,感觉挺不错的,比 marked 要规范不少。
    fy
        17
    fy  
       2017-10-22 13:07:58 +08:00
    @tamlok #16 marked 没啥明显的不规范吧。

    其实我觉更缺少的是编辑器,simplemde 后继无人
    qdwang
        18
    qdwang  
       2017-10-22 13:20:27 +08:00
    小兄弟,你可以不用正则,换个方式来实现,就不用感到害怕了
    tamlok
        19
    tamlok  
       2017-10-22 13:35:57 +08:00 via Android
    @fy marked 基本不怎么维护了,很多 bug 都没 fix,还是有一些不规范的,之前开发 VNote 的时候遇到过一些,一时记不起来。编辑器试试 VNote 吧😁😁😁
    pinsily
        20
    pinsily  
       2017-10-22 13:40:25 +08:00
    哈哈,也有这个想法,typecho 的文章样式还是有点不习惯的,想着还是改改算了
    jadeity
        21
    jadeity  
       2017-10-22 13:44:06 +08:00
    错了又能怎么样,试着来呗,他们也未必是一口气写出来的。
    bramblex
        22
    bramblex  
       2017-10-22 13:44:49 +08:00 via iPhone
    @qdwang 不用正则更恶心呀
    ChopMoun
        23
    ChopMoun  
       2017-10-22 13:48:31 +08:00
    我也能看看,完全写不出来。。。
    mcfog
        24
    mcfog  
       2017-10-22 13:55:12 +08:00
    满屏的正则是写不好 markdown 渲染的,好好学编译原理吧少年
    sexrobot
        25
    sexrobot  
       2017-10-22 17:08:34 +08:00
    惊不惊喜,意不意外
    hanzichi
        26
    hanzichi  
       2017-10-22 17:39:39 +08:00
    我之前也想着看看 segmentfault 的 markdown 编辑器 hyperdown,看了之后发现完全看不下去 ...
    bramblex
        27
    bramblex  
       2017-10-22 17:43:42 +08:00
    @mcfog

    大哥,一看你就没学好编译原理啊,markdown 就是正则文法啊。连 CFG 都用不上。
    Biwood
        28
    Biwood  
       2017-10-22 17:45:10 +08:00
    每个人的实现方式不一样,你要实现某个功能最好是按照自己的思路去实现,都是为了实现某个功能而导致逻辑复杂的,而不是为了复杂而复杂。
    boboliu
        29
    boboliu  
       2017-10-22 17:48:28 +08:00 via Android
    我本来也想写,回来一看已经有现成的轮子可用了,需求足够,然后。。。
    srlp
        30
    srlp  
       2017-10-22 19:17:14 +08:00
    并没有那么简单,你需要的是编译原理,而不是无脑用正则匹配。

    参考 https://github.com/commonmark/commonmark.js
    anuan
        31
    anuan  
       2017-10-23 08:32:17 +08:00
    感谢 @jtn007 @tamlok
    搜到一个博客 比较了 Marked CommonMark Markdown-it Remarkable Showdown
    http://tools.42du.cn/p/markdown-parser

    Marked 够用且比较小 选他了
    Mutoo
        32
    Mutoo  
       2017-10-23 09:38:24 +08:00   ❤️ 1
    把 Markdown 的语法规则写出来,然后用 Nearley.js 生成解析器,再用这个解析器去渲染 html
    https://nearley.js.org

    另附 nearley 官网上提供了一个相关的轮子:
    https://github.com/bobbybee/uPresent/blob/master/uPresent.ne
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2778 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 35ms · UTC 15:12 · PVG 23:12 · LAX 07:12 · JFK 10:12
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.