marked.js简易手册
marked.js 简易手册
本文介绍的是 marked.js。秉持 “来之即用” 的原则，对它进行简要的翻译和归纳，
安装
在网上引用或者是引用本地文件即可。要么就用命令行：
npm install marked --save复制代码最简单用法
//基本设置
var rendererMD = new marked.Renderer();
marked.setOptions({
renderer: rendererMD,
gfm: true,
tables: true,
breaks: false,
pedantic: false,
sanitize: false,
smartLists: true,
smartypants: false
});
console.log(marked('I am using __markdown__.'));
// Outputs: <p>I am using <strong>markdown</strong>.</p>复制代码留意到，控制台打印出了带 html 文档标签的内容。
假使你的 html 页面中有一个<div>，可以做如下设定：
//省去声明...
document.getElementById('content').innerHTML = marked('# Marked in browser\n\nRendered by **marked**.');复制代码那么文字将以 innerHTML 的形式传入 #content 的 div 中。
marked 方法
marked(markdownString [,options] [,callback])复制代码markdownString是你渲染的内容，必须是字符串。
options是你渲染的设置——它是一个对象。当然，你用marked.setOptions也是可以的。
callback是回调函数。如果 options 参数没有定义，它就是第二个参数。
关于 Options
之前看到，options 有各种各样的设置。现在逐一分析。
highlight
这是一个函数，它可以让你文本的代码块实现语法高亮。
代码高亮基于 highlight.js，本文将重点看这个例子的实现：
在此之前，你需要引入 highlight.js 及其样式：
<link href="http://cdn.bootcss.com/highlight.js/8.0/styles/monokai_sublime.min.css" rel="stylesheet">
<script src="http://cdn.bootcss.com/highlight.js/8.0/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>复制代码然后输入如下代码
var rendererMD = new marked.Renderer();
marked.setOptions({
renderer: rendererMD,
gfm: true,
tables: true,
breaks: false,
pedantic: false,
sanitize: false,
smartLists: true,
smartypants: false
});
var markdownString = '```js\n console.log("hello"); \n```';
marked.setOptions({
highlight: function (code) {
return hljs.highlightAuto(code).value;
}
});
document.getElementById('content').innerHTML = marked(markdownString);
复制代码高亮的参数
完整的 highlight 方法包含三个参数：code，lang 和 callback
code——代码内容——是一个字符串。
lang——编程语言的种类——也是字符串。
callback 就是回调函数。
renderer（渲染）
render 存放的是一个对象，不声明时默认为new Renderer()。
自定义渲染方式
渲染选项允许你以自定义的方式渲染内容，并把之前的规则设置覆盖掉。——这是比较底层的方法了。
比如，我想渲染#heading+，但是默认的规则是：<h1></h1>，我想改为更为复杂的结构——
var rendererMD = new marked.Renderer();
rendererMD.heading = function (text, level) {
var escapedText = text.toLowerCase().replace(/[^\w]+/g, '-');
return '<h' + level + '>
<a name="' + escapedText + '" class="anchor" href="#' + escapedText + '">
<span class="header-link"></span>
</a>' + text + '</h' + level + '>';
}
console.log(marked('# heading+', { renderer: rendererMD }));
document.getElementById('content').innerHTML = marked('# heading+', { renderer: rendererMD });
复制代码渲染的结果是：
<h1>
<a >
<span class="header-link"></span>
</a>
heading+
</h1>复制代码以上就用了 heading 的渲染。
块级支持以下渲染
- 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)
flags 拥有以下属性：
{
header: true || false,
align: 'center' || 'left' || 'right'
}复制代码行级支持以下渲染：
- 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)
其它渲染参数
gfm
它是一个布尔值，默认为 true。
允许 Git Hub 标准的 markdown.
tables
它是一个布尔值，默认为 true。允许支持表格语法。该选项要求 gfm 为 true。
breaks
它是一个布尔值，默认为 false。允许回车换行。该选项要求 gfm 为 true。
pedantic
它是一个布尔值，默认为 false。
尽可能地兼容 markdown.pl的晦涩部分。不纠正原始模型任何的不良行为和错误。
sanitize
它是一个布尔值，默认为 false。
对输出进行过滤（清理），将忽略任何已经输入的 html 代码（标签）
smartLists
它是一个布尔值，默认为 false。
使用比原生 markdown 更时髦的列表。 旧的列表将可能被作为pedantic的处理内容过滤掉.
smartypants
它是一个布尔值，默认为 false。
使用更为时髦的标点，比如在引用语法中加入破折号。
使用 lexer 和 parser
如果你想，还可以使用词法分析器。通过它可以追加规则：
var tokens = marked.lexer('text');//把text解析为一个marked.js的内部对象
console.log(marked.parser(tokens));//又把这个对象转化为html字符串。（<p>text</p>）
var lexer = new marked.Lexer({sanitize: true});//放option信息
var tokens = lexer.lex('<h1>hello</h1>');//<p><h1>hello</h1></p>
console.log(marked.parser(tokens));
console.log(lexer.rules);//打出正则信息复制代码