Implementierung des Markdown-Renderings in einer Vue-Einzelseitenanwendung

// vue.config.js
modul.exporte = {
 LaufzeitCompiler: true
}

npm install markdown-it --save # Markdown-it-Hauptteil npm install markdown-it-highlightjs --save # Code-Hervorhebung npm install markdown-it-katex --save # Latex-Unterstützung

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

npm installiere github-markdown-css --save

importiere „github-markdown-css/github-markdown.css“

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

<Vorlage>
 <Komponenten: ist = "html" Klasse = "markdown-body"></Komponenten>
</Vorlage>

<Skript>
importiere MarkdownIt von „markdown-it“
importiere hljs aus „markdown-it-highlightjs“
Latex aus „markdown-it-katex“ importieren
Standard exportieren {
 Name: "Markdown",
 Requisiten: {
  Inhalt: Zeichenfolge
 },
 Daten: () => ({
  md:null
 }),
 berechnet: {
  //Verwende computed, um HTML während der dynamischen Bindung dynamisch zu aktualisieren: function () {
   let res = dies.md.render(dieser.Inhalt)
   // Verwenden Sie reguläre Ausdrücke, um In-Site-Links durch Router-Link-Tags zu ersetzen. res = res.replace(/<a href="(?!http:\/\/|https:\/\/)(.*?)" rel="external nofollow" >(.*?)<\/a>/g, '<router-link to="$1">$2</router-link>')
   // Verwenden Sie reguläre Ausdrücke, um externe Links in neuen Fenstern zu öffnen. res = res.replace(/<a href="(.*?)" rel="external nofollow" >(.*?)<\/a>/g, '<a href="$1" rel="external nofollow" target="_blank">$2</a>')
   zurückkehren {
    Vorlage: '<div>' + res + '</div>'
   }
  }
 },
 erstellt () {
  this.md = neues MarkdownIt()
  dies.md.verwenden(hljs).verwenden(latex)
 }
}
</Skript>

<Vorlage>
  <div>
    <Markdown :content="Inhalt"/>
  </div>
</Vorlage>

<Skript>
Importieren Sie Markdown aus „@/components/Markdown.vue“.
Standard exportieren {
 Name: "Home",
 Komponenten:
  Markdown
 },
 Daten: () => ({
  Inhalt: ''
 }),
 erstellt () {
  dieser.Inhalt = '# Test'
 }
}
</Skript>