Vue 단일 페이지 응용 프로그램에서 Markdown 렌더링

이전에 Markdown을 렌더링할 때 필자는 mavon Editor의 미리보기 모드를 사용했는데 사용하기에 비교적 시원하고 구성 요소만 도입하면 되지만 최근의 개발에서 어려움을 겪었다.
주요 문제는 단일 페이지로 응용할 때 사이트 내 링크는 루트-link로 점프해야 하며, mavonEditor에서 기본적으로 렌더링된 a 라벨을 사용하면 페이지를 다시 불러올 수 있어 사용자 체험이 좋지 않다는 것이다.

동적 렌더링

전방에서 사용자 내용에 따라 동적으로 루트-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" rel="external nofollow" >
<script src="//cdn.jsdelivr.net/gh/highlightjs/[email protected]/build/highlight.min.js"></script>

github-markdown-css

markdown 스타일

설치

npm install github-markdown-css --save

가져오기

메인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 렌더링에 관한 자료는 저희 다른 관련 글을 주목해 주십시오!