Vue单页面应用中的Markdown渲染
source link: http://www.cnblogs.com/youxam/p/vue-markdown-render.html
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
之前渲染 Markdown 的时候, 笔者使用的是 mavonEditor 的预览模式, 使用起来比较爽, 只需要引入组件即可, 但是在最近的开发中, 遇到了困难.
主要问题在于作为单页面应用, 站内链接必须是使用 router-link
跳转, 如果使用 mavonEditor 默认渲染的 a
标签, 就会重新加载页面, 用户体验较差.
动态渲染
想要实现在前端动态地根据用户内容渲染 router-link
, 需要使用动态渲染, 根据 官方文档
, 直接修改 vue.config.js
即可:
// vue.config.js module.exports = { runtimeCompiler: true }
渲染 Markdown
笔者使用的是 markdown-it , 配置过程如下:
安装
npm install markdown-it --save # 本体 npm install markdown-it-highlightjs --save # 代码高亮 npm install markdown-it-katex --save # latex 支持
这里还另外安装了两个语法插件, 如果有其他需要的话, 可以在 npm 上搜索
静态文件导入
highlight.js
通过 cdn 导入, 在 index.html
中加入:
<link rel="stylesheet" href="//cdn.jsdelivr.net/gh/highlightjs/[email protected]/build/styles/default.min.css"> <script src="//cdn.jsdelivr.net/gh/highlightjs/[email protected]/build/highlight.min.js"></script>
github-markdown-css
markdown 的样式
安装
npm install github-markdown-css --save
导入
在 main.js
文件中添加
import 'github-markdown-css/github-markdown.css'
katex
通过 cdn 导入, 在 index.html
中加入:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.5.1/katex.min.css">
使用
首先在 components
目录下创建 Markdown.vue
文件,
<template> <components :is="html" class="markdown-body"></components> </template> <script> import MarkdownIt from 'markdown-it' import hljs from 'markdown-it-highlightjs' import latex from 'markdown-it-katex' export default { name: 'Markdown', props: { content: String }, data: () => ({ md: null }), computed: { // 使用 computed 才能在动态绑定时动态更新 html: function () { let res = this.md.render(this.content) // 使用正则表达式将站内链接替换为 router-link 标签 res = res.replace(/<a href="(?!http:\/\/|https:\/\/)(.*?)">(.*?)<\/a>/g, '<router-link to="$1">$2</router-link>') // 使用正则表达式将站外链接在新窗口中打开 res = res.replace(/<a href="(.*?)">(.*?)<\/a>/g, '<a href="$1" target="_blank">$2</a>') return { // 注意模板必须在一个标签内, 所以要套一个 div template: '<div>' + res + '</div>' } } }, created () { this.md = new MarkdownIt() this.md.use(hljs).use(latex) } } </script>
然后在想使用的地方导入即可
<template> <div> <Markdown :content="content"/> </div> </template> <script> import Markdown from '@/components/Markdown.vue' export default { name: 'Home', components: { Markdown }, data: () => ({ content: '' }), created () { this.content = '# 测试' } } </script>
参考
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK