解析markdown文本，高亮代码，目录侧边栏

前言

个人比较喜欢使用markdown写笔记，用过vs code，也用过作业部落，但是都没有自己喜欢的侧边栏显示目录效果，所以就打算自己写一个web来解析自己的markdown笔记，以下内容记录一下自己使用到的和参考的工具和资料。

解析markdown文本

参考链接

https://www.jianshu.com/p/60d8d51bed11
https://github.com/xitu/gold-miner/blob/master/TODO/choosing-right-markdown-parser.md

选用的工具以及使用方法

• Marked ： https://github.com/markedjs/marked
• 使用方法：如果是web的方式，那么后台可以将markdown文件读取之后发送给前端，前端使用Marked工具将文本数据转化为html即可，简单示例如下：

...
<script src="https://cdn.bootcss.com/marked/0.3.12/marked.js"></script>
...
<div id="content" >
    ${fileContent}
</div>
...
<script type="text/javascript">
    $(document).ready(function(){
        $("#content").html( marked($("#content").html()));
    });
</script>

使用highlight高亮代码

工具地址

• highlight官网：https://highlightjs.org/
• highlight的github地址:https://github.com/isagalaev/highlight.js

参考链接

https://zlxstar.me/blog/2014/04/05/shi-yong-highlightjs-gao-liang/

曾经遇到的低级问题

一开始并没有从官网中下载highlight.js，而是直接拿github中的src目录下highlight.js来使用，结果当然无法正确处理啦~~~

示例代码

<link rel="stylesheet"
      href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/default.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>

侧边栏目录

参考链接

http://blog.csdn.net/haleypku/article/details/51226704