因為要編寫技術文件,考慮之後用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啦~撒花~~撒花~~再撒花~~