因為要編寫技術文件，考慮之後用md檔來寫是最快的，框架是Vue，
所以開始尋找可以把md檔import進vue，而且會自動轉譯成HTML的方法。
試了2個套件，還是不太貼近需求
最後選擇的是這個VUE-CLI3， vue-markdown-loader
以下記錄使用方式
安裝
npm i vue-markdown-loader -D
npm i vue-loader vue-template-compiler -D
# 樣式
npm i github-markdown-css -D
npm i highlight.js -D
配置
// vue.config.js 如果没有就在項目根目錄新建
module.exports = {
chainWebpack: config => {
config.module.rule('md')
.test(/\.md/)
.use('vue-loader')
.loader('vue-loader')
.end()
.use('vue-markdown-loader')
.loader('vue-markdown-loader/lib/markdown-compiler')
.options({
raw: true
})
}
}
使用
<template>
<!-- class markdown-body 必須加，否則標籤樣式會出現問題 -->
<div class="markdown-body">
<markdown />
</div>
</template>
<script>
// 引入 markdown 文件，引入後是一個组件，需要在 components 中註冊
import markdown from '@/assets/ApiDocument.md'
// 代碼樣式
import 'highlight.js/styles/github.css'
// 其他元素使用 github 的樣式
import 'github-markdown-css'
export default {
components: {
markdown
},
}
</script>
代碼塊中的語法高亮
輸入
``` js
export default {
name: 'MyComponent',
// ...
}
``` 輸出
export default {
name: 'MyComponent',
// ...
} 輸入
``` html
<ul>
<li
v-for="todo in todos"
:key="todo.id"
>
{{ todo.text }}
</li>
</ul>
``` 輸出
<ul>
<li
v-for="todo in todos"
:key="todo.id"
>
{{ todo.text }}
</li>
</ul>
備註
在安裝完後， npm run serve 後顯示錯誤，
原來是vue版本太舊，需要更新到版本 2.6.12
更新時也遇到問題，跑完更新後還是一直維持在 2.6.11，
後來PG大大直接心一橫，把package.json內的 "vue": "^2.6.11"，
直接改成 "vue": "^2.6.12"，
vue渲染後，就完美的把md檔轉譯成html啦～撒花～～撒花～～再撒花～～
