markdown_views prism-atom-one-light">
近期在自己的项目中加入了对Markdown的支持,主要用到的是markedjs这个项目。该项目托管在github上,地址为:https://github.com/markedjs/marked/
项目的安装
下载项目之后,在根目录下执行如下命令进行安装
$ npm install
安装完成之后最终项目的目录结构如下
js项目目录结构" />
我们看一下根目录下的package.json文件,部分内容如下
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)"
}
执行如下命令
$ npm run build
命令执行完成会生成marked.min.js文件
最后我们将 marked.min.js
文件拷贝到我们的项目中,然后就可以使用了
js_Markdown_49">使用markedjs 解析编译Markdown内容
在页面中引入 marked.min.js 文件
<script type="text/javascript" src="/js/marked.min.js"></script>
接下来就是对内容的解析了,首先要初始化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;
}
});
然后调用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>
实际情况中我们可以通过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>
有兴趣的可以参考这篇文章 《页面中使用markdown 并对a标签进行优化》