Vue單頁面應用中的Markdown渲染
阿新 • • 發佈:2021-02-13
之前渲染 Markdown 的時候, 筆者使用的是 [mavonEditor](https://github.com/hinesboy/mavonEditor) 的預覽模式, 使用起來比較爽, 只需要引入元件即可, 但是在最近的開發中, 遇到了困難.
主要問題在於作為單頁面應用, 站內連結必須是使用 `router-link` 跳轉, 如果使用 mavonEditor 預設渲染的 `a` 標籤, 就會重新載入頁面, 使用者體驗較差.
## 動態渲染
想要實現在前端動態地根據使用者內容渲染`router-link` , 需要使用動態渲染, 根據 [官方文件](https://cli.vuejs.org/config/#runtimecompiler), 直接修改`vue.config.js` 即可:
```javascript
// vue.config.js
module.exports = {
runtimeCompiler: true
}
```
## 渲染 Markdown
筆者使用的是 [markdown-it](https://github.com/markdown-it/markdown-it), 配置過程如下:
### 安裝
```bash
npm install markdown-it --save # 本體
npm install markdown-it-highlightjs --save # 程式碼高亮
npm install markdown-it-katex --save # latex 支援
```
這裡還另外安裝了兩個語法外掛, 如果有其他需要的話, 可以在 [npm](https://www.npmjs.com/search?q=keywords:markdown-it-plugin) 上搜索
### 靜態檔案匯入
#### highlight.js
通過 cdn 匯入, 在 `index.html` 中加入:
```html
```
#### github-markdown-css
markdown 的樣式
##### 安裝
```bash
npm install github-markdown-css --save
```
##### 匯入
在 `main.js` 檔案中新增
```javascript
import 'github-markdown-css/github-markdown.css'
```
#### katex
通過 cdn 匯入, 在 `index.html` 中加入:
```html
```
### 使用
首先在 `components` 目錄下建立 `Markdown.vue` 檔案,
```html
```
然後在想使用的地方匯入即可
```html
```
## 參考
1. https://cli.vuejs.org/config/#runtimecompiler
2. https://github.com/markdown-it/markdown-it
3. https://github.com/sindresorhus/github-markdown-css
4. https://www.npmjs.com/package/markdown-it-highlightjs
5. https://github.com/waylonflinn/markdown-