JavaScript前端前端开发是一门艺术

js加载Markdown文件并解析

2016-12-01  本文已影响7450人  yieldHL

原因

因为之前的项目都将.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
实例化代码
<script>
        hljs.initHighlightingOnLoad(); #实例化高亮
        $(document).ready(function(){
            $("#content").html(marked({$html})); #此处的$html代指json数据,详情看后面
        })
</script>
加载文件

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");
}
示例图 效果图

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

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

修改图

最终效果图:

最终效果图
上一篇 下一篇

猜你喜欢

热点阅读