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

推荐关注

› Meteor

› JSLint - a JavaScript code quality tool

› jsFiddle

› D3.js

› WebStorm

推荐书目

› JavaScript 权威指南第 5 版

› Closure: The Definitive Guide

This topic created in 3299 days ago, the information mentioned may be changed or developed.

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

主要就是这三个文件：

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

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

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

Markdown

源码

动手

正则

32 replies • 2017-10-23 09:38:24 +08:00

nl101531

Oct 22, 2017 via Android

规则是有点复杂。

cyr1l

Oct 22, 2017 via iPhone

可以首先明确你对现在的渲染器哪里不满意，然后对已有的渲染器 fork 并改进。不一定要上来就造新轮子。

tlday

Oct 22, 2017 via Android

复杂的正则问题不大，太多边际情况在没有经验的时候，以出现一个改一个，不断迭代的方法就好。做这种东西关键需要毅力。

CasualYours

Oct 22, 2017

你可以先从简单入手嘛，比如先写 n 级标题的正则。

duan602728596

Oct 22, 2017 via iPhone

你可以试一试，在写的过程中，肯定会碰到很多问题需要解决，即使最后写不出来，在写的过程中也会有收获。如果写出来了，你就会想，原来这东西是这么实现的啊

lxy

Oct 22, 2017

用一整屏的注释解释了两条正则……
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

Oct 22, 2017

fork+修改 + 1，我也写不出来，哈哈

anuan

Oct 22, 2017

搭车求
推荐一款好用的 web 端 markdow 渲染库

loading

Oct 22, 2017 via Android

还好，你没进 wysiwyg，大公司大坑。

jtn007

Oct 22, 2017

年少的我曾经也有这种想法。。。

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

基本就能达到不错的效果了，最近在搭博客，正好在找这些东西

hantsy

Oct 22, 2017

这些只是 Render 而已，还不是 IDE 语法分析。

hantsy

Oct 22, 2017

可视化编辑： https://simplemde.com/
Render 还是喜欢 Marked

ericgui

Oct 22, 2017

@cyr1l 已感谢

其实这个方法论，不仅适用于这个 markdown 的轮子
也适用于其他任何轮子
不一定要从头开始
可以就某一点做一些改变
日拱一卒嘛

dbw9580

Oct 22, 2017 via Android

这种事情 lexer 比正则好用吧

tamlok

Oct 22, 2017 via Android

我是对现在的笔记软件和 md 编辑器不满意，然后从头撸了一个 md 笔记软件。其实，做开了后也不是很复杂，就是很繁琐而已。VNote 默认使用的是 markdown-it 引擎来渲染，效果挺不错！

https://github.com/tamlok/vnote/

tamlok

Oct 22, 2017 via Android

@anuan 试试 markdown-it 吧，VNote 默认引擎，感觉挺不错的，比 marked 要规范不少。

Oct 22, 2017

@tamlok #16 marked 没啥明显的不规范吧。

其实我觉更缺少的是编辑器，simplemde 后继无人

qdwang

Oct 22, 2017

小兄弟，你可以不用正则，换个方式来实现，就不用感到害怕了

tamlok

Oct 22, 2017 via Android

@fy marked 基本不怎么维护了，很多 bug 都没 fix，还是有一些不规范的，之前开发 VNote 的时候遇到过一些，一时记不起来。编辑器试试 VNote 吧😁😁😁

pinsily

Oct 22, 2017

哈哈，也有这个想法，typecho 的文章样式还是有点不习惯的，想着还是改改算了

jadeity

Oct 22, 2017

错了又能怎么样，试着来呗，他们也未必是一口气写出来的。

bramblex

Oct 22, 2017 via iPhone

@qdwang 不用正则更恶心呀

ChopMoun

Oct 22, 2017

我也能看看，完全写不出来。。。

mcfog

Oct 22, 2017

满屏的正则是写不好 markdown 渲染的，好好学编译原理吧少年

sexrobot

Oct 22, 2017

惊不惊喜，意不意外

hanzichi

Oct 22, 2017

我之前也想着看看 segmentfault 的 markdown 编辑器 hyperdown，看了之后发现完全看不下去 ...

bramblex

Oct 22, 2017

@mcfog

大哥，一看你就没学好编译原理啊，markdown 就是正则文法啊。连 CFG 都用不上。

Biwood

Oct 22, 2017

每个人的实现方式不一样，你要实现某个功能最好是按照自己的思路去实现，都是为了实现某个功能而导致逻辑复杂的，而不是为了复杂而复杂。

boboliu

Oct 22, 2017 via Android

我本来也想写，回来一看已经有现成的轮子可用了，需求足够，然后。。。

srlp

Oct 22, 2017

并没有那么简单，你需要的是编译原理，而不是无脑用正则匹配。

参考 https://github.com/commonmark/commonmark.js

anuan

Oct 23, 2017

感谢 @jtn007 @tamlok
搜到一个博客　比较了 Marked CommonMark Markdown-it Remarkable Showdown
http://tools.42du.cn/p/markdown-parser

Marked 够用且比较小　选他了

Mutoo

Oct 23, 2017

把 Markdown 的语法规则写出来，然后用 Nearley.js 生成解析器，再用这个解析器去渲染 html
https://nearley.js.org

另附 nearley 官网上提供了一个相关的轮子：
https://github.com/bobbybee/uPresent/blob/master/uPresent.ne

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

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