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 id="content">，可以做如下設定：
//省去聲明...
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是回調函數。I如果 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 name="heading-" class="anchor" href="#heading-">
<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);//打出正則信息