Rumah > hujung hadapan web > View.js > teks badan

Cara Vue3 menghuraikan penurunan harga dan melaksanakan penyerlahan kod

王林
Lepaskan: 2023-05-20 16:16:24
ke hadapan
3719 orang telah melayarinya

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

Cara Vue3 menghuraikan penurunan harga dan melaksanakan penyerlahan kod

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   //用于代码高亮显示
Salin selepas log masuk

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)
  })
})
Salin selepas log masuk
 <!-- 正文输出 -->
<div class="entry-content">
  <div v-highlight v-html="article"  id="content"></div>
</div>
Salin selepas log masuk
4 dan Kesan penonjolan kod

Gaya yang dipetik dalam contoh ialah Cara Vue3 menghuraikan penurunan harga dan melaksanakan penyerlahan kod

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!

Label berkaitan:
sumber:yisu.com
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan