基于Vue的单页面应用的Markdown渲染
2024-09-03 12:42:56
之前渲染 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">
<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">
使用
首先在 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>
参考
- https://cli.vuejs.org/config/#runtimecompiler
- https://github.com/markdown-it/markdown-it
- https://github.com/sindresorhus/github-markdown-css
- https://www.npmjs.com/package/markdown-it-highlightjs
- https://github.com/waylonflinn/markdown-it-katex
最新文章
- eclipse调试(debug)的时候,出现Source not found,Edit Source Lookup Path,一闪而过
- Linux常用网络命令
- jquery技巧之让任何组件都支持类似DOM的事件管理
- Solr图形化界面banana:除Hue之外的选择
- JQuery源码解析--callbacks
- Yosemite 快速搭建 自带Apache+PHP5.6+MySQL 开发环境
- dedecms \plus\guestbook.php SQL Injection Vul By \plus\guestbook\edit.inc.php
- android中xmlns:tools属性详解
- [开发笔记]-jQuery获取checkbox选中项等操作及注意事项
- ViewPager的监听事件失效
- Lua代码解析-写给C和C++开发人员
- 设置Proxy Server和SQL Server实现互联网上的数据库安全
- 循环ip段 转载 出处不明
- NYOJ_23_取石子(一)
- NHibernate 慎用Session.Merge
- Ubuntu18.04格式化U盘为NTFS的方法
- python--第二十四天总结
- 我的C#跨平台之旅(一):从 Hello World 开始
- Python中使用class(),面向对象有什么优势 转自知乎
- nginx 限速最容易理解的说明
热门文章
- Docker-常用基建的安装与部署
- Vitis下载安装尝试
- 24V降压3.3V芯片,低压降线性稳压器
- TCP服务器程序
- VirtualBox Guest Additions 下载地址以及简介
- your service shouldn’t know anything about HTTP headers, or gRPC error codes 干净架构 服务不应知道 HTTP头、gRPC错误码 服务仅知道服务相关的
- (Sql Server)SQL FOR XML PATH
- Python学习【第3篇】:列表魔法
- vue项目在IE下报 [vuex] vuex requires a Promise polyfill in this browser错误
- Web信息收集之搜索引擎-Shodan Hacking