Implementing Markdown rendering in Vue single-page application

When rendering Markdown before, I used the preview mode of mavonEditor, which was quite convenient to use. I only needed to import components, but I encountered difficulties in recent development.

The main problem is that as a single-page application, the links within the site must be redirected using router-link. If the a tag rendered by mavonEditor is used by default, the page will be reloaded, which will provide a poor user experience.

Dynamic Rendering

If you want to dynamically render router-link based on user content on the front end, you need to use dynamic rendering. According to the official documentation, you can directly modify vue.config.js:

// vue.config.js
module.exports = {
 runtimeCompiler: true
}

Rendering Markdown

The author uses markdown-it, the configuration process is as follows:

Install

npm install markdown-it --save # Markdown-it main body npm install markdown-it-highlightjs --save # Code highlight npm install markdown-it-katex --save # Latex support

Two additional syntax plugins are installed here. If you need any other plugins, you can search them on npm.

Static file import

highlight.js
Import via CDN and add in index.html:

<link rel="stylesheet" href="//cdn.jsdelivr.net/gh/highlightjs/[email protected]/build/styles/default.min.css" rel="external nofollow" >
<script src="//cdn.jsdelivr.net/gh/highlightjs/[email protected]/build/highlight.min.js"></script>

github-markdown-css

Markdown styles

Install

npm install github-markdown-css --save

Import

Add in main.js file

import 'github-markdown-css/github-markdown.css'

katex

Import via CDN and add in index.html :

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.5.1/katex.min.css" rel="external nofollow" >

use

First create the Markdown.vue file in the components directory,

<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 dynamically update HTML during dynamic binding: function () {
   let res = this.md.render(this.content)
   // Use regular expressions to replace in-site links with router-link tags res = res.replace(/<a href="(?!http:\/\/|https:\/\/)(.*?)" rel="external nofollow" >(.*?)<\/a>/g, '<router-link to="$1">$2</router-link>')
   // Use regular expressions to open external links in new windows 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 wherever 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 details of implementing Markdown rendering in Vue single-page application. For more information about vue Markdown rendering, please pay attention to other related articles on 123WORDPRESS.COM!

You may also be interested in:

Detailed explanation of Vue's SSR server-side rendering example
Vue+elementUI component recursively implements foldable dynamic rendering multi-level sidebar navigation
A brief discussion on the whole process of Vue's first rendering
Detailed explanation of incompatible changes in rendering functions in Vue3
Solution to the problem that Vue binding objects and array variables cannot be rendered after changing

<<: Summary of several important performance index calculation and optimization methods for MySQL

>>: Configure VIM as a C++ development editor in Ubuntu