推荐关注
› Meteor
› JSLint - a JavaScript code quality tool
› jsFiddle
› D3.js
› WebStorm
推荐书目
› JavaScript 权威指南第 5 版
› Closure: The Definitive Guide
› Closure: The Definitive Guide
我是不是弱爆了，打算自己动手写个 markdown 渲染器，望而却步了 。。。
ericling · 2017-10-22 10:40:28 +08:00 · 8325 次点击这是一个创建于 2614 天前的主题，其中的信息可能已经有所发展或是发生改变。
用了不少 markdown 的渲染器，都不怎么满意，然后想自己去动手写个，找了个参照来看源码： https://github.com/StackExchange/pagedown
主要就是这三个文件：
Markdown.Converter.js
Markdown.Editor.js
Markdown.Sanitizer.js
打开源码一看，要写这么复杂的正则，考虑这么多种情况下的渲染，就感觉自己弱爆了，根本没敢动手（=_=!!）。知道就算是强行写出来了，也是漏洞百出，没有实用价值。
学 js 的同学，有多少小伙伴，自觉达到了能写出这个级别轮子的 js 水平哇？
 |
1
nl101531 2017-10-22 10:44:14 +08:00 via Android
规则是有点复杂。
|
 |
2
cyr1l 2017-10-22 10:55:22 +08:00 via iPhone  2
可以首先明确你对现在的渲染器哪里不满意，然后对已有的渲染器 fork 并改进。不一定要上来就造新轮子。
|
 |
3
tlday 2017-10-22 10:55:27 +08:00 via Android
复杂的正则问题不大，太多边际情况在没有经验的时候，以出现一个改一个，不断迭代的方法就好。做这种东西关键需要毅力。
|
 |
4
CasualYours 2017-10-22 11:09:01 +08:00
你可以先从简单入手嘛，比如先写 n 级标题的正则。
|
 |
5
duan602728596 2017-10-22 11:22:00 +08:00 via iPhone
你可以试一试，在写的过程中，肯定会碰到很多问题需要解决，即使最后写不出来，在写的过程中也会有收获。如果写出来了，你就会想，原来这东西是这么实现的啊
|
 |
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>"); |
 |
7
BBCCBB 2017-10-22 11:33:18 +08:00
fork+修改 + 1， 我也写不出来，哈哈
|
 |
8
anuan 2017-10-22 11:36:21 +08:00
搭车求
推荐一款好用的 web 端 markdow 渲染库 |
 |
9
loading 2017-10-22 12:05:09 +08:00 via Android
还好，你没进 wysiwyg，大公司大坑。
|
 |
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 基本就能达到不错的效果了，最近在搭博客，正好在找这些东西 |
 |
11
hantsy 2017-10-22 12:11:14 +08:00
这些只是 Render 而已，还不是 IDE 语法分析。
|
|
12
hantsy 2017-10-22 12:14:05 +08:00
可视化编辑： https://simplemde.com/
Render 还是喜欢 Marked |
 |
13
ericgui 2017-10-22 12:23:48 +08:00
|
 |
14
dbw9580 2017-10-22 12:31:58 +08:00 via Android
这种事情 lexer 比正则好用吧
|
 |
15
tamlok 2017-10-22 12:38:43 +08:00 via Android
我是对现在的笔记软件和 md 编辑器不满意，然后从头撸了一个 md 笔记软件。其实，做开了后也不是很复杂，就是很繁琐而已。VNote 默认使用的是 markdown-it 引擎来渲染，效果挺不错！
https://github.com/tamlok/vnote/ |
|
16
tamlok 2017-10-22 12:39:54 +08:00 via Android
@anuan 试试 markdown-it 吧，VNote 默认引擎，感觉挺不错的，比 marked 要规范不少。
|
 |
18
qdwang 2017-10-22 13:20:27 +08:00
小兄弟，你可以不用正则，换个方式来实现，就不用感到害怕了
|
|
19
tamlok 2017-10-22 13:35:57 +08:00 via Android
@fy marked 基本不怎么维护了，很多 bug 都没 fix，还是有一些不规范的，之前开发 VNote 的时候遇到过一些，一时记不起来。编辑器试试 VNote 吧😁😁😁
|
 |
20
pinsily 2017-10-22 13:40:25 +08:00
哈哈，也有这个想法，typecho 的文章样式还是有点不习惯的，想着还是改改算了
|
 |
21
jadeity 2017-10-22 13:44:06 +08:00
错了又能怎么样，试着来呗，他们也未必是一口气写出来的。
|
 |
23
ChopMoun 2017-10-22 13:48:31 +08:00
我也能看看，完全写不出来。。。
|
 |
24
mcfog 2017-10-22 13:55:12 +08:00
满屏的正则是写不好 markdown 渲染的，好好学编译原理吧少年
|
 |
25
sexrobot 2017-10-22 17:08:34 +08:00
惊不惊喜，意不意外
|
 |
26
hanzichi 2017-10-22 17:39:39 +08:00
我之前也想着看看 segmentfault 的 markdown 编辑器 hyperdown，看了之后发现完全看不下去 ...
|
 |
28
Biwood 2017-10-22 17:45:10 +08:00
每个人的实现方式不一样，你要实现某个功能最好是按照自己的思路去实现，都是为了实现某个功能而导致逻辑复杂的，而不是为了复杂而复杂。
|
 |
29
boboliu 2017-10-22 17:48:28 +08:00 via Android
我本来也想写，回来一看已经有现成的轮子可用了，需求足够，然后。。。
|
 |
30
srlp 2017-10-22 19:17:14 +08:00
|
|
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 够用且比较小 选他了 |
 |
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 |
Select Language