前言

個人比較喜歡使用markdown寫筆記，用過vs code，也用過作業部落，但是都沒有自己喜歡的側邊欄顯示目錄效果，所以就打算自己寫一個web來解析自己的markdown筆記，以下內容記錄一下自己使用到的和參考的工具和資料。

解析markdown文字

參考連結

選用的工具以及使用方法

• 使用方法：如果是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.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>

側邊欄目錄

參考連結