五分钟搭建一个MarkDown文档解析器

时间 2019-11-10

标签五分 5分搭建一个 markdown 文档解析栏目 Markdown 繁體版

原文原文链接

字数：790javascript

阅读时间：5分钟css

前言

本文的旨在讲述如何从零开始搭建一个MarkDown文档展现工具。整个过程很是简单，咱稍微花五分钟就能够搭建一个定制化的MD文档解析器，是否是很酷呀！html

首先咱们晒一张成果图看看效果吧：前端

<br/>java

正文

1.环境准备

①marked插件jquery

一款最受欢迎的markdown文件解析插件。插件地址：https://github.com/chjj/markedgit

②highlight插件github

格式化显示各类语言的前端插件，用来显示文档中代码部分。插件地址：http://highlightjs.readthedoc...ajax

③JQuery插件bootstrap

④ZUI插件

这是一款基于bootstrap封装的GUI框架，这个是笔者常常用的一个框架，随意选择它。这里咱们只是使用了它的样式，是可选项，你们能够选择本身喜欢的GUI框架来展现。插件地址：http://zui.sexy/#javascript/m...

<br/>

2.工具搭建

环境准备完毕，那就开始搭建吧！

先建立一个index.html文件，代码以下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="jquery-1.9.1.js"></script>
  <script src="marked/lib/marked.js"></script>
  <script src="highlight/highlight.pack.js"></script>
  <link rel="stylesheet" href="highlight/styles/vs2015.css">
  <link rel="stylesheet" href="zui.css">
  <script src="test.js"></script>
  <link rel="stylesheet" href="test.css">
</head>
  <body>

  </body>
</html>

页面引入刚才准备的资源JQuery、marked、highlight和zui。这里highlight插件有许多可选样式文件，你们能够随意选择 styles 文件夹下任意一款喜欢的样式。

<br/>

而后建立一个test.js 文件，代码以下：

$(function(){
    //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;
        }
    });

    $.ajax({
        type:"get",
        url : "前端编年史.md",
        async : false,
        dataType:"text",
        success : function(response,status,request) {
            document.body.innerHTML = marked(response);

            //渲染文档中代码部分
            hljs.initHighlighting();

            //给生成的文档中统一添加样式
            $("table").addClass("table");
        }
    });
});

代码解释如代码注释所述，这里只是使用了marked和highlight插件的基本用法，详细用法见环境准备中的插件地址中文档介绍。

最后建立一个样式文件test.css，代码以下：

body{
  padding: 50px;
}

这里只是写了一个简单的样式以做示例。你们能够经过样式控制md文档的显示方式。

至此，整个工具搭建完毕，只须要将页面运行起来就能够看到效果了。这是一款彻底属于咱们本身的md解析工具，咱们能够按照本身的喜爱方式随意修改文档的展现方式，很酷吧！

<br/>

欢迎大伙关注个人微信公众号，和老司机一块儿撸代码：