Cara Vue3 menghuraikan penurunan harga dan melaksanakan penyerlahan kod

Vue melaksanakan bahagian hadapan blog dan perlu melaksanakan penghuraian markdown Jika terdapat kod, ia perlu melaksanakan penyerlahan kod.
Vue mempunyai banyak pustaka penghuraian markdown, seperti markdown-it, vue-markdown-loader, marked, vue-markdown, dsb. Perpustakaan ini semuanya sangat serupa. Ditanda digunakan di sini, dan highlight.js digunakan sebagai pustaka penonjolan kod.

Langkah pelaksanaan khusus adalah seperti berikut:

1 Pasang pustaka bergantung

Buka tetingkap arahan di bawah projek vue dan masukkan arahan berikut

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

Salin selepas log masuk

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)
  })
})

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

Gaya yang dipetik dalam contoh ialah

import 'highlight.js/styles/atom-one-dark.css'

Atas ialah kandungan terperinci Cara Vue3 menghuraikan penurunan harga dan melaksanakan penyerlahan kod. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!