如何在前端页面中使用Markdown_前端引入markdown格式

近期在自己的项目中加入了对Markdown的支持，主要用到的是markedjs这个项目。该项目托管在github上，地址为：https://github.com/markedjs/marked/

项目的安装

下载项目之后，在根目录下执行如下命令进行安装

$ npm install
1

安装完成之后最终项目的目录结构如下

我们看一下根目录下的package.json文件，部分内容如下

"scripts": {
    "test": "jasmine --config=jasmine.json",
    "test:all": "npm test && npm run test:lint",
    "test:unit": "npm test -- test/unit/**/*-spec.js",
    "test:specs": "npm test -- test/specs/**/*-spec.js",
    "test:lint": "eslint bin/marked .",
    "test:redos": "node test/vuln-regex.js",
    "test:update": "node test/update-specs.js",
    "rules": "node test/rules.js",
    "bench": "npm run rollup && node test/bench.js",
    "lint": "eslint --fix bin/marked .",
    "build:reset": "git checkout upstream/master lib/marked.js lib/marked.esm.js marked.min.js",
    "build": "npm run rollup && npm run minify",
    "build:docs": "node build-docs.js",
    "rollup": "npm run rollup:umd && npm run rollup:esm",
    "rollup:umd": "rollup -c rollup.config.js",
    "rollup:esm": "rollup -c rollup.config.esm.js",
    "minify": "uglifyjs lib/marked.js -cm  --comments /Copyright/ -o marked.min.js",
    "minifyMessage": "uglifyjs ext/onmpwmessage.js -cm  --comments /Copyright/ -o ext/onmpwmessage.min.js",
    "preversion": "npm run build && (git diff --quiet || git commit -am build)"
  }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

执行如下命令

$ npm run build
1

命令执行完成会生成marked.min.js文件

最后我们将 marked.min.js 文件拷贝到我们的项目中，然后就可以使用了

使用markedjs 解析编译Markdown内容

在页面中引入 marked.min.js 文件

<script type="text/javascript" src="/js/marked.min.js"></script>
1

接下来就是对内容的解析了，首先要初始化marked对象

marked.setOptions({
    renderer: new marked.Renderer(),
    gfm: true,
    tables: true,
    breaks: false,
    pedantic: false,
    sanitize: false,
    smartLists: true,
    smartypants: false,
    highlight: function (code,lang) {
        //使用 highlight 插件解析文档中代码部分
        return hljs.highlightAuto(code,[lang]).value;
    }
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14

然后调用marked函数进行解析，完整代码如下

<script type="text/javascript" src="marked.min.js></script>

<div class="markdown">
  ## URL
  * Google
  * Bing

  ## a标签
  [迹忆客](https://www.jiyik.com)
</div>

<script type="text/javascript">
marked.setOptions({
       renderer: new marked.Renderer(),
       gfm: true,
       tables: true,
       breaks: false,
       pedantic: false,
       sanitize: false,
       smartLists: true,
       smartypants: false,
       highlight: function (code,lang) {
            //使用 highlight 插件解析文档中代码部分
            return hljs.highlightAuto(code,[lang]).value;
       }
});

let text = marked($(".markdown").text());
$(".markdown").html(text);
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

实际情况中我们可以通过ajax从后台获取markdown的内容，然后通过marked解析成 html，将解析后的 html 内容放到页面中相应的地方即可。

该项目对a标签的解析不太完美，可能很多Markdown的Js都一样，就是不支持 a标签的target属性，也就是没法新窗口打开。

针对a标签target属性这一问题，本人对MarkedJs项目进行了一些优化，只要在中括号中文本的前面加一个叹号！ 就可以给a标签加上 target="_blank" 属性，使得其可以在新窗口打开链接。
例如 [!迹忆客](https://www.jiyik.com) 可以被解析成如下的a标签

<a href="https://www.jiyik.com" target="_blank">迹忆客</a>
1

有兴趣的可以参考这篇文章 《页面中使用markdown 并对a标签进行优化》