Realization of Markdown Rendering in Vue Single Page Application
- 2021-10-27 06:19:52
- OfStack
When rendering Markdown before, the author used the preview mode of mavonEditor, which is cool to use and only needs to introduce components. However, in the recent development, it has encountered difficulties.
The main problem is that as a single-page application, the in-site link must use router-link jump. If the a tag rendered by default of mavonEditor is used, the page will be reloaded, and the user experience is poor.
Dynamic rendering
If you want to dynamically render router-link according to user content at the front end, you need to use dynamic rendering. According to the official document, you can directly modify vue.config.js:
// vue.config.js
module.exports = {
runtimeCompiler: true
}
Render Markdown
The author used markdown-it, and the configuration process is as follows:
Installation
npm install markdown-it --save # Ontology
npm install markdown-it-highlightjs --save # Code highlighting
npm install markdown-it-katex --save # latex Support
There are two additional syntax plug-ins installed here. If you need anything else, you can search on npm
Static file import
highlight.js
Import through cdn, add in 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
Styles for markdown
Installation
npm install github-markdown-css --save
Import
Add in the main. js file
import 'github-markdown-css/github-markdown.css'
katex
Imported through cdn, in the
index.html
Add:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.5.1/katex.min.css" rel="external nofollow" >
Use
First of all,
components
Directory
Markdown.vue
Documents,
<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: {
// Use computed To update dynamically when dynamically bound
html: function () {
let res = this.md.render(this.content)
// Use regular expressions to replace intra-site links with router-link Label
res = res.replace(/<a href="(?!http:\/\/|https:\/\/)(.*?)" rel="external nofollow" >(.*?)<\/a>/g, '<router-link to="$1">$2</router-link>')
// Open outbound links in a new window using regular expressions
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>
Then import it where you want to use it
<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 = '# Test '
}
}
</script>
The above is the Vue single page application to achieve Markdown rendering details, more information about vue Markdown rendering please pay attention to other related articles on this site!