使用marked解析markdown为html

前段时间玩了会儿hexo，发现用markdown写博客真的很爽，语法也十分的简介。

于是打算将博客的富文本编辑器换成markdown。

我这里是使用的marked

Markdown 是一种轻量级的「标记语言」，它的优点很多，目前也被越来越多的写作爱好者，撰稿者广泛使用。看到这里请不要被「标记」、「语言」所迷惑，Markdown 的语法十分简单。常用的标记符号也不超过十个，这种相对于更为复杂的 HTML 标记语言来说，Markdown 可谓是十分轻量的，学习成本也不需要太多，且一旦熟悉这种语法规则，会有一劳永逸的效果。

marked 是一个 JavaScript 编写的全功能 Markdown 解析和编译器。 marked 的目的是快速的编译超大块的Markdown文本而不必担心结果会出乎意料或者花费很长时间。 marked 最初是为 Node.JS编写，现在已完全兼容客户端浏览器。 新版本号称速度比C语言写的Markdown转换工具Discount 还要快。

1.安装marked

代码语言：javascript复制

npm install marked --save

2.引用

代码语言：javascript复制

var marked = require('marked')

3.转换为html

代码语言：javascript复制

var html = marked('### hello markdown') // <h3>hello markdown</h3>

一些参数说明

代码语言：javascript复制

var marked = require('marked');

marked.setOptions({
	renderer: new marked.Renderer(),
	gfm: true,
	tables: true,
	breaks: false,
	pedantic: false,
	sanitize: true,
	smartLists: true,
	smartypants: false
});

console.log(marked('I am using __markdown__.'));

• -o, –output [output]: 指定输出文件，默认为当前控制台
• -i, –input [input]: 指定输入文件或最后一个参数，默认为当前控制台输入
• -t, –tokens: 输出token流代替HTML
• –pedantic: 只解析符合markdown.pl定义的，不修正markdown的错误
• –gfm: 启动Github样式的Markdown
• –breaks: 支持Github换行符，必须打开gfm选项
• –tables: 支持Github表格，必须打开gfm选项
• –sanitize: 原始输出，忽略HTML标签
• –smart-lists: 优化列表输出
• –lang-prefix [prefix]: 设置前置样式
• –no-etc: 选择的反正标识
• –silent: 不输出错误信息
• -h, –help: 帮助信息

4.marked防注入

如下MD被编译为HTML时，会执行script里的代码，弹出xss攻击

代码语言：javascript复制

var html = marked('<script>alert("xss攻击")</script>')

设置sanitize为ture，即可过滤到script标签

代码语言：javascript复制

marked.setOptions({ sanitize: true })

5.自定义渲染

自定义渲染选项允许你以自定义的方式渲染内容，并把之前的规则设置覆盖掉。

块级标签支持以下渲染：

• code(string code, string language)
• blockquote(string quote)
• html(string html)
• heading(string text, number level)
• hr()
• list(string body, boolean ordered)
• listitem(string text)
• paragraph(string text)
• table(string header, string body)
• tablerow(string content)
• tablecell(string content, object flags)

行级标签支持以下渲染：

• strong(string text)
• em(string text)
• codespan(string code)
• br()
• del(string text)
• link(string href, string title, string text)
• image(string href, string title, string text)

markdown html github git 编程算法

0 人点赞