Marked

目前 Marked 已经停止更新。

安装

$ npm install marked

# 或者保存依赖项到 package.json 文件中
$ npm install marked --save

HTML中使用

可以在 HTML 文件中引用 marked.js 文件，在线进行处理 Markdown 内容：

<!doctype html>
<html>

<head>
    <meta charset="utf-8" />
    <title>Marked in the browser</title>
    <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="javascripts/marked.js"></script>
</head>

<body style="padding:15px">
    <div id="content"></div>
    <script>
        marked.setOptions({
            renderer: new marked.Renderer(),
            gfm: true,
            tables: true,
            breaks: true,
            pedantic: false,
            sanitize: true,
            smartLists: true,
            smartypants: false
        });

        //增加的代码，用于个性化输出table
        var renderer = new marked.Renderer();
        renderer.table = function (header, body) {
            return '<table class="table table-striped">' + header + body + '</table>'
        };

        var md = '# Marked Demo';
        md += '\n\n';
        md += '\n\n这是一个Marked库使用的例子。';
        md += '\n\n';
        md += '\n\n> A full-featured markdown parser and compiler, written in JavaScript.';
        md += '\n\n> Built for speed.';
        md += '\n\n';
        md += '\n\n![NPM version](https://badge.fury.io/js/marked.png)[badge]';
        md += '\n\n';
        md += '\n\n## Install';
        md += '\n\n';
        md += '\n\n```';
        md += '\n\n npm install marked --save';
        md += '\n\n```';
        md += '\n\n';

        var data = marked(md, {
            renderer: renderer
        });
        document.getElementById('content').innerHTML = data;
    </script>
    <script src="http://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script src="http://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>

</html>

或许可以考虑将 Markdown 内容存放到数据库，然后通过在线处理模式解析并显示。

命令行使用

参数说明：

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

使用命令行来处理 markdown 的文件。

本示例使用 Express 项目实现。marked 安装在本地目录。

新建 demo.md 文件，其中包括文字、代码、段落、列表等格式。

Marked Demo
======================

这是一个Marked库使用的例子。

> A full-featured markdown parser and compiler, written in JavaScript. 
> Built for speed.

![NPM version](https://badge.fury.io/js/marked.png)[badge]

## Install

``` bash
npm install marked --save
```

## 列表测试

+ 列表测试，行1
+ 列表测试，行2
+ 列表测试，行3
+ 列表测试，行4

## 表格测试

A | B | C
--|--|--
A1 | B1 | C1
A2 | B2 | C2
A3 | B3 | C3

使用命令行生成HTML。

$ node_modules/.bin/marked -i demo.md

输出结果：

<h1 id="marked-demo">Marked Demo</h1>
<p>这是一个Marked库使用的例子。</p>
<blockquote>
<p>A full-featured markdown parser and compiler, written in JavaScript. 
Built for speed.</p>
</blockquote>
<p>[<img src="https://badge.fury.io/js/marked.png" alt="NPM version">][badge]</p>
<h2 id="install">Install</h2>
<pre><code class="lang-bash">npm install marked --save
</code></pre>
<h2 id="-">列表测试</h2>
<ul>
<li>列表测试，行1</li>
<li>列表测试，行2</li>
<li>列表测试，行3</li>
<li>列表测试，行4</li>
</ul>
<h2 id="-">表格测试</h2>
<table>
<thead>
<tr>
<th>A</th>
<th>B</th>
<th>C</th>
</tr>
</thead>
<tbody>
<tr>
<td>A1</td>
<td>B1</td>
<td>C1</td>
</tr>
<tr>
<td>A2</td>
<td>B2</td>
<td>C2</td>
</tr>
<tr>
<td>A3</td>
<td>B3</td>
<td>C3</td>
</tr>
</tbody>
</table>

增加-o的参数，输出到指定文件中：

$ node_modules/.bin/marked -i demo.md -o demo.html

增加-t的参数，以token形式输出：

$ node_modules/.bin/marked -t -i demo.md -o demo.json

API 使用

调用 marked API 解析 markdown 文本。新建 parse.js

// parse.js
var marked = require('marked');
console.log(marked('I am using __markdown__.'));

运行脚本：

$ node parse.js

输出结果：

<p>I am using <strong>markdown</strong>.</p>

下面再用 API 读取 demo.md 的文本，进行解析，然后输出为HTML，新建 parse2.js 文件。

// parse2.js
var marked = require('marked')
    ,fs = require("fs")
    ,http = require('http');

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

fs.readFile('demo.md', 'utf-8', function (err, data) {
    if (err) throw err;
    server(marked(data));
});

function server(html){
    http.createServer(function (req, res) {
        res.writeHead(200, {'Content-Type': 'text/html;charset=utf-8'});
        res.end(html);
    }).listen(8080, '127.0.0.1');
    console.log('Server running at http://127.0.0.1:8080/');
}

启动服务：

$ node parse2.js

输出结果：

$ node parse2.js
Server running at http://127.0.0.1:8080/

打开浏览器，浏览 http://127.0.0.1:8080/。

个性化渲染

接下来，我们引入 bootstrap 的样式，修饰一下页面。新建 parse3.js 文件：

var marked = require('marked'),
    fs = require("fs"),
    http = require('http');

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

fs.readFile('demo.md', 'utf-8', function (err, data) {
    //增加HTML的页头
    var header = '<!DOCTYPE html>' +
        '<html lang="zh-CN">' +
        '<head>' +
        '<title>Marked Demo</title>' +
        '<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">' +
        '</head><body style="padding:10px">';

    //增加HTML的页底
    var footer = '<script src="http://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>' +
        '<script src="http://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>' +
        '</body></html>';

    if (err) throw err;
    server(header + marked(data) + footer);
});

function server(html) {
    http.createServer(function (req, res) {
        res.writeHead(200, {
            'Content-Type': 'text/html;charset=utf-8'
        });
        res.end(html);
    }).listen(8080, '127.0.0.1');
    console.log('Server running at http://127.0.0.1:8080/');
}

启动服务：

$ node parse3.js

但是，美中不足的是表格 table，没有样式化。检查 bootstrap 的表格样式，需要在 table 的 class 属性增加 table table-striped 的样式。

<table class="table table-striped">
  ...
</table>

我们在使用 marked 渲染 markdown 的过程是自动完成的，现在我们要增加 css 就需要个性化的渲染，通过API改变渲染的过程。修改 parse3.js 文件为：

var marked = require('marked'),
    fs = require("fs"),
    http = require('http');

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

//增加的代码，用于个性化输出 table
var renderer = new marked.Renderer();
renderer.table = function (header, body) {
    return '<table class="table table-striped">' + header + body + '</table>'
}

fs.readFile('demo.md', 'utf-8', function (err, data) {
    //增加HTML的页头
    var header = '<!DOCTYPE html>' +
        '<html lang="zh-CN">' +
        '<head>' +
        '<title>Marked Demo</title>' +
        '<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">' +
        '</head><body style="padding:10px">';

    //增加HTML的页底
    var footer = '<script src="http://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>' +
        '<script src="http://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>' +
        '</body></html>';

    if (err) throw err;
    // 使用自定义渲染
    var body = marked(data, {
        renderer: renderer
    });
    server(header + body + footer);
});

function server(html) {
    http.createServer(function (req, res) {
        res.writeHead(200, {
            'Content-Type': 'text/html;charset=utf-8'
        });
        res.end(html);
    }).listen(8080, '127.0.0.1');
    console.log('Server running at http://127.0.0.1:8080/');
}

整合到 Express 项目中

尝试根据用户浏览的路径选择性地读取 md 文件，解析后输出到响应流中。在 Express 项目的 routes 目录中添加 mark.js 文件：

var express = require('express');
var router = express.Router();
var marked = require('marked'),
    fs = require("fs");

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

var renderer = new marked.Renderer();
renderer.table = function (header, body) {
    return '<table class="table table-striped">' + header + body + '</table>'
}

/* GET users listing. */
router.get('/', function (req, res, next) {

    // 来自于 parse3.js
    // TODO：根据请求选择文件读取
    fs.readFile('demo.md', 'utf-8', function (err, data) {
        //增加HTML的页头
        var header = '<!DOCTYPE html>' +
            '<html lang="zh-CN">' +
            '<head>' +
            '<title>Marked Demo</title>' +
            '<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">' +
            '</head><body style="padding:10px">';

        //增加HTML的页底
        var footer = '<script src="http://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>' +
            '<script src="http://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>' +
            '</body></html>';

        if (err) throw err;
        var body = marked(data, {
            renderer: renderer
        });
        res.send(header + body + footer);
    });
});

module.exports = router;

修改 app.js 文件，添加 mark 的路由处理：

var mark = require('./routes/mark');
app.use('/mark', mark);

启动项目：

$ npm start

在浏览器中输入：http://127.0.0.1:3000/mark 查看运行效果。

marked

Marked

安装

HTML中使用

命令行使用

API 使用

个性化渲染

整合到 Express 项目中

results matching ""

No results matching ""