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

rreeeArahan itu dilaksanakan Anda kemudiannya boleh melihat nombor versi yang dipasang dalam fail konsol atau package.json

2. Perkenalkan highlight.js dan gaya ke dalam fail main.js dan buat arahan global tersuai

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

membolehkan anda menggunakan v-highlight untuk merujuk kaedah penyerlahan kod dalam komponen vue.

3. Gunakan penghuraian bertanda dan penyerlahan kod dalam komponen Vue

Contoh kod adalah seperti berikut:

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>

4 dan Kesan penonjolan kod

Gaya yang dipetik dalam contoh ialah

Banyak gaya sebenarnya disediakan dalam highlight.js/styles, anda boleh pilih mengikut mengikut pilihan anda sendiri.

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!