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

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

我这里是使用的marked

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

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

1.安装marked

1
npm install marked --save

2.引用

1
var marked = require('marked')

3.转换为html

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

一些参数说明

1
2
3
4
5
6
7
8
9
10
11
12
13
14
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攻击

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

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

1
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)

举一个栗子🌰：

默认的渲染a标签为当前窗口打开，如果我想让它新窗口打开，可以如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
var md = '[http://baidu.com](baidu.com "百度")'

// 默认的渲染结果
var a = marked(a)
// 得到的a为<a href="http://baidu.com" title="百度">baidu.com</a>

// 添加自定义渲染
var rendererMD = new marked.Renderer()

rendererMD.link = function (href, title, text) {
    return `<a href="${href}" title="${title || text}" target="_blank">${text}</a>`
}

marked.setOptions({ renderer: rendererMD })

var _blankA = marked(a)
// 得到的_blankA为<a href="http://baidu.com" title="百度" target="_blank">baidu.com</a>

不声明renderer时，默认为new Renderer()

6.语法高亮

需要安装highlight.js

1
npm install highlight.js --save

设置语法高亮(为了正常显示，页面需要引入highlight.js的css)

1
2
3
4
5
6
7
const highlight = require('highlight.js')

marked.setOptions({
    highlight: function(code) {
        return highlight.highlightAuto(code).value
    }
})

以上！！！