五分鐘搭建一個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，代碼以下：