loading
Zai30
搜 索
登录 | 注册

如何使用Marked.js+highlight.js让你的网站支持Markdown

如何使用Marked.js+highlight.js让你的网站支持Markdown

时间:2016/04/17


如何使用Marked.js+highlight.js让你的网站支持Markdown。首先解释下两个javascript文件的作用:

  1. Marked.js作用:解析markdown语法为HTML
  2. highlight.js作用:将HTML中代码高亮显示,这样更美观

用事实说话,先看效果

如何使用Marked.js+highlight.js让你的网站支持Markdown
如何使用Marked.js+highlight.js让你的网站支持Markdown

左边是你输入的Markdown,右边是实时解析出来的HTML

实现步骤

1、在网站中引入Marked.js+highlight.js文件

Marked.js

 <script src="http://cdn.bootcss.com/marked/0.3.5/marked.js"></script>

highlight.js

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.3.0/styles/default.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.3.0/highlight.min.js"></script>

2、HTML示例

<div>
<textarea id="text-input" placeholder="正文" oninput="this.editor.update()" style=""></textarea>
</div>
<div id="divMarkDownHtml">
    <div id="preview"></div>
</div>

id="text-input"中输入你的Markdown;
通过oninput="this.editor.update()" 将在id="preview"中会实时显示解析后的HTML

3、JavaScript

<script type="text/javascript">
 var renderer_zai30 = new marked.Renderer();
marked.setOptions({
    renderer: renderer_zai30,
    gfm: true,
    tables: true,
    breaks: true,//回车换成br
    pedantic: false,
    sanitize: true,
    smartLists: true,
    smartypants: false
});

//
function Editor(input, preview) {
    this.update = function () {
        //marked(input.value); 解析Markdown为HTML
        preview.innerHTML = marked(input.value);
    };
    input.editor = this;
    this.update();
}
var $markdown = function (id) { return document.getElementById(id); };
new Editor($markdown("text-input"), $markdown("preview"));
 </script>

Markdown常用语法教程示例
MarkDown学习笔记 - 语法详细分析

  • 阅读2290
  • 评论 8
陈莉 给我写代码的同事有用。
2016/07/07 08:59:25 回复
陈前胜 回复 陈莉 恩。希望你使用的舒服。
2016/07/14 13:43:43 回复
王奕凡 非常不错哦。
2016/04/17 16:27:57 回复
陈前胜 回复 王奕凡 谢谢。
2016/07/14 13:43:25 回复
李莉莉 完整,很好用的Marked教程。
2016/04/17 15:57:02 回复
陈前胜 回复 李莉莉 希望对你有帮助。
2016/07/14 13:43:19 回复
刘格 非常好用。谢谢。
2016/04/17 15:55:36 回复
陈前胜 回复 刘格 不客气。
2016/07/14 13:43:10 回复

最专业的职业问答社交网站

Copyright@2016 www.zai30.com 版权所有 鄂ICP备15023318号