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

tinna 发布于2019-08-21 18:40 / 836人阅读

摘要：字数阅读时间分钟前言本文的旨在讲述如何从零开始搭建一个文档展示工具。整个过程非常简单，咱稍微花五分钟就可以搭建一个定制化的文档解析器，是不是很酷呀首先我们晒一张成果图看看效果吧正文环境准备插件一款最受欢迎的文件解析插件。

字数：790

阅读时间：5分钟

前言

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

首先我们晒一张成果图看看效果吧：

正文 1.环境准备

①marked插件

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

②highlight插件

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

③JQuery插件

④ZUI插件

这是一款基于bootstrap封装的GUI框架，这个是笔者经常用的一个框架，随意选择它。这里我们只是使用了它的样式，是可选项，大家可以选择自己喜欢的GUI框架来展示。插件地址：http://zui.sexy/#javascript/m...

2.工具搭建

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

先创建一个index.html文件，代码如下：




  
  Title

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

然后创建一个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解析工具，我们可以按照自己的喜好方式随意修改文档的展示方式，很酷吧！

欢迎大伙关注我的微信公众号，和老司机一起撸代码：

海外云主机服务器托管四五互联主机器 java 文档解析三五互联域名解析 php解析doc文档

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/90698.html

Django搭建个人博客：使用Markdown语法书写文章

摘要：重新打开一个命令行窗口，进入虚拟环境，安装是一种通用语法高亮显示器，可以帮助我们自动生成美化代码块的样式文件。上一章我们实现了文章详情页面。为了让文章正文能够进行标题、加粗、引用、代码块等不同的排版（像在Office中那样！），我们将使用Markdown语法。安装Markdown Markdown是一种轻量级的标记语言，它允许人们使用易读易写的纯文本格式编写文档，然后转换成有效的或...

沈建明 2019-07-30 17:53 评论0 收藏0
Django 博客开发教程 9 - 支持 Markdown 语法和代码高亮

摘要：注意如果你按照教程中的方法做完后发现代码依然没有高亮，请依次检查以下步骤确保在渲染文本时添加了拓展，详情见上文。有些样式文件可能对代码高亮没有作用，首先尝试用样式文件做测试。在支持语法和代码高亮追梦人物的博客的评论区留言。为了让博客文章具有良好的排版，显示更加丰富的格式，我们使用 Markdown 语法来书写我们的博文。Markdown 是一种 HTML 文本标记语言，只要遵循它约定...

zr_hebo 2019-07-31 10:57 评论0 收藏0
Element 一套优雅的 Vue 2 组件库是如何开发的

摘要：今年的大会上，受到作者现场开源项目的感染，我们也在现场宣布开源这套基于开发的组件库。一个文件夹下有所有的官方插件，直到发现他们用了一个叫的工具。那么如何写样式同时单独发布的组件如何引用样式文件也是我们要解决的问题。 showImg(https://segmentfault.com/img/bVDD9H?w=2502&h=1222); 今年的 JSConf 大会上，受到 gridcont...

lscho 2019-08-20 11:21 评论0 收藏0
26天学通前端开发（配资料）

摘要：网上有很多前端的学习路径文章，大多是知识点罗列为主或是资料的汇总，数据量让新人望而却步。天了解一个前端框架。也可以关注微信公众号晓舟报告，发送获取资料，就能收到下载密码，网盘地址在最下方，获取教程和案例的资料。前言好的学习方法可以事半功倍，好的学习路径可以指明前进方向。这篇文章不仅要写学习路径，还要写学习方法，还要发资料，干货满满，准备接招。网上有很多前端的学习路径文章，大多是知...

blair 2019-08-21 16:59 评论0 收藏0
手把手教你用vue搭建个人站

摘要：在我转前端以来，一直想要实现一个愿望自己搭建一个可以自动解析文档的个人站今天终于实现啦，先贴上我的地址确认需求其实一个最简单的个人站，就是许多的页面，你只要可以用写出来就可以，然后挂到上。在我转前端以来，一直想要实现一个愿望：自己搭建一个可以自动解析Markdown文档的个人站今天终于实现啦，先贴上我的blog地址确认需求其实一个最简单的个人站，就是许多的HTML页面，你只要...

xietao3 2019-08-02 10:58 评论0 收藏0