Vue单页面应用中实现Markdown渲染


Posted in Vue.js onFebruary 14, 2021

之前渲染 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/cdn-release@10.5.0/build/styles/default.min.css" rel="external nofollow" >
<script src="//cdn.jsdelivr.net/gh/highlightjs/cdn-release@10.5.0/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" rel="external nofollow" >

使用

首先在 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:\/\/)(.*?)" rel="external nofollow" >(.*?)<\/a>/g, '<router-link to="$1">$2</router-link>')
   // 使用正则表达式将站外链接在新窗口中打开
   res = res.replace(/<a href="(.*?)" rel="external nofollow" >(.*?)<\/a>/g, '<a href="$1" rel="external nofollow" target="_blank">$2</a>')
   return {
    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>

以上就是Vue单页面应用中实现Markdown渲染的详细内容,更多关于vue Markdown渲染的资料请关注三水点靠木其它相关文章!

Vue.js 相关文章推荐
vue 表单输入框不支持focus及blur事件的解决方案
Nov 17 Vue.js
实用的 vue tags 创建缓存导航的过程实现
Dec 03 Vue.js
如何在vue中使用kindeditor富文本编辑器
Dec 19 Vue.js
vue 动态生成拓扑图的示例
Jan 03 Vue.js
手写Vue源码之数据劫持示例详解
Jan 04 Vue.js
vue3弹出层V3Popup实例详解
Jan 04 Vue.js
Vue ​v-model相关知识总结
Jan 28 Vue.js
vue.js Router中嵌套路由的实用示例
Jun 27 Vue.js
SSM VUE Axios详解
Oct 05 Vue.js
Vue如何清空对象
Mar 03 Vue.js
vue cli4中mockjs在dev环境和build环境的配置详情
Apr 06 Vue.js
vue3.0 数字翻牌组件的使用方法详解
Apr 20 Vue.js
vue仿携程轮播图效果(滑动轮播,下方高度自适应)
Feb 11 #Vue.js
Vue+Bootstrap实现简易学生管理系统
Feb 09 #Vue.js
详解Vue的七种传值方式
Feb 08 #Vue.js
Vue中使用wangeditor富文本编辑的问题
Feb 07 #Vue.js
vue使用lodop打印控件实现浏览器兼容打印的方法
Feb 07 #Vue.js
vue如何使用rem适配
Feb 06 #Vue.js
如何管理Vue中的缓存页面
Feb 06 #Vue.js
You might like
轻松入门: 煮好咖啡的七个诀窍
2021/03/03 冲泡冲煮
ajax php 实现写入数据库
2009/09/02 PHP
php中函数的形参与实参的问题说明
2010/09/01 PHP
PHP实现四种基础排序算法的运行时间比较(推荐)
2016/08/11 PHP
Laravel模型间关系设置分表的方法示例
2018/04/21 PHP
php中青蛙跳台阶的问题解决方法
2018/10/14 PHP
把JS与CSS写在同一个文件里的书写方法
2007/06/02 Javascript
javascript截取字符串(通过substring实现并支持中英文混合)
2013/06/24 Javascript
jquery实现html页面 div 假分页有原理有代码
2014/09/06 Javascript
深入理解node exports和module.exports区别
2016/06/01 Javascript
js图片上传前预览功能(兼容所有浏览器)
2016/08/24 Javascript
Three.js如何实现雾化效果示例代码
2017/09/27 Javascript
JS实现模糊查询带下拉匹配效果
2018/06/21 Javascript
vue store之状态管理模式的详细介绍
2019/06/13 Javascript
layui 图片上传+表单提交+ Spring MVC的实例
2019/09/21 Javascript
微信小程序日历插件代码实例
2019/12/04 Javascript
实现一个Vue自定义指令懒加载的方法示例
2020/06/04 Javascript
js实现简易点击切换显示或隐藏
2020/11/29 Javascript
[49:30]DOTA2-DPC中国联赛正赛 Dragon vs Dynasty BO3 第二场 3月4日
2021/03/11 DOTA
微信跳一跳python代码实现
2018/01/05 Python
Python常见内置高效率函数用法示例
2018/07/31 Python
用Python将结果保存为xlsx的方法
2019/01/28 Python
解决python中用matplotlib画多幅图时出现图形部分重叠的问题
2019/07/07 Python
Django Rest framework三种分页方式详解
2019/07/26 Python
python实现静态服务器
2019/09/05 Python
python给指定csv表格中的联系人群发邮件(带附件的邮件)
2019/12/31 Python
Python基础之字符串操作常用函数集合
2020/02/09 Python
Python如何把十进制数转换成ip地址
2020/05/25 Python
python设置中文界面实例方法
2020/10/27 Python
Html5实现如何在两个div元素之间拖放图像
2013/03/29 HTML / CSS
Swisse官方海外旗舰店:澳大利亚销量领先,自然健康品牌
2017/12/15 全球购物
触发器(trigger)的功能都有哪些?写出一个触发器的例子
2012/09/17 面试题
运动会开幕式解说词
2014/02/05 职场文书
校车安全责任书
2014/08/25 职场文书
2014年学生会生活部工作总结
2014/11/07 职场文书
聋哑人盗窃罪辩护词
2015/05/21 职场文书