js加载Markdown文件并解析

原因

因为之前的项目都将.md文件放到了GitHub或者Coding上,这两个平台会有自动解析md文件的能力,但是最近突发奇想,想把这个Wiki也同步显示到我自己的后台上,于是搞了搞JS解析和PHP自动加载

框架及使用到的插件

Marked.js 解析MarkDown
CDN地址:http://www.bootcdn.cn/marked/

highlight.js 语法高亮(只需src目录就可以)
地址:https://github.com/isagalaev/highlight.js

ThinkPHP框架

Bootstrap3.0

使用详情

引用 mark.js highlight.js default.css
以自己的路径为准
引用js
有多种样式,请自行引用
引用css
实例化代码

js加载Markdown文件并解析_第1张图片
加载文件

PHP代码

protected $wikiMenu = "./Wiki/"; //错误日志所在目录

public function indexAction(){
        $markdown = file_get_contents($this->wikiMenu."README.md"); #读取指定目录下的README.md文件
        $markdown = json_encode($markdown,JSON_UNESCAPED_UNICODE|JSON_PRETTY_PRINT); #将获取到的内容转化成JSON
        $this->assign("html",$markdown); #传到前台
        $this->display();
}

public function _empty(){
        $markdown = file_get_contents($this->wikiMenu.ACTION_NAME.".md");
        $markdown = json_encode($markdown,JSON_UNESCAPED_UNICODE|JSON_PRETTY_PRINT);
        $this->assign("html",$markdown);
        $this->display("Doc/index");
}
js加载Markdown文件并解析_第2张图片
示例图
js加载Markdown文件并解析_第3张图片
效果图

这里遇到个问题,TABLE并没有被转换掉,修改方法如下:

marked.js 第825行
table添加一个class="table table-hover"

修改图

最终效果图:

js加载Markdown文件并解析_第4张图片
最终效果图

你可能感兴趣的:(js加载Markdown文件并解析)