Wie Vue3 Markdown analysiert und Code-Hervorhebung implementiert

Vue implementiert das Blog-Frontend und muss die Markdown-Analyse implementieren. Wenn Code vorhanden ist, muss die Code-Hervorhebung implementiert werden.
Vue verfügt über viele Markdown-Parsing-Bibliotheken, wie z. B. markdown-it, vue-markdown-loader, markiert, vue-markdown usw. Diese Bibliotheken sind alle sehr ähnlich. Hier wird Markiert verwendet, und highlights.js wird als Code-Hervorhebungsbibliothek verwendet.

Die spezifischen Implementierungsschritte sind wie folgt:

1. Abhängige Bibliotheken installieren

Öffnen Sie das Befehlsfenster unter dem Vue-Projekt und geben Sie den folgenden Befehl ein

npm install marked -save    // marked 用于将markdown转换成html
npm install highlight.js -save   //用于代码高亮显示

Nachdem der Befehl ausgeführt wurde, können Sie die Installation in der Konsole sehen oder package.json-Datei Versionsnummer

2. Fügen Sie Highlight.js und Styles in die Datei main.js ein und erstellen Sie eine benutzerdefinierte globale Direktive

import hljs from 'highlight.js';
import 'highlight.js/styles/atom-one-dark.css' //样式

//创建v-highlight全局指令
Vue.directive('highlight',function (el) {
  let blocks = el.querySelectorAll('pre code');
  blocks.forEach((block)=>{
    hljs.highlightBlock(block)
  })
})

Auf diese Weise können Sie die Hervorhebungsmethode für den Referenzcode von v-highlight im Vue verwenden Komponente.

3. Markiertes Parsen und Code-Hervorhebung in der Vue-Komponente anwenden

Das Codebeispiel lautet wie folgt:

 <!-- 正文输出 -->
<div class="entry-content">
  <div v-highlight v-html="article"  id="content"></div>
</div>

4

Eigentlich bietet highlights.js/styles viele Stile, die nach Ihren eigenen Vorlieben ausgewählt werden können.

Das obige ist der detaillierte Inhalt vonWie Vue3 Markdown analysiert und Code-Hervorhebung implementiert. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!