之前渲染 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-