vue使用showdown并實(shí)現(xiàn)代碼區(qū)域高亮的示例代碼
前言：當(dāng)我們想把makedown文檔轉(zhuǎn)譯為html在網(wǎng)頁(yè)上顯示，并且能漂亮的展示出自己想要的網(wǎng)頁(yè)形式，接下來(lái)我給大家介紹插件來(lái)達(dá)到我們所想要的功能。
注：下面安裝及使用方式是基于vue進(jìn)行滴。
1、安裝showdown
npm install showdown --save
2、將showdown引入到使用的頁(yè)面中
<template>
<div v-html="htms"></div>
</template>
<script>
import showdown from "showdown"
converter.setOption('tables', true); // 將表格顯示出來(lái)
export default {
data() {
return {
htms: ""
}
},
created() {
this.setMakedown()
},
methods: {
setMakedown() {
this.htms = converter.makeHtml('# 這是一個(gè)標(biāo)題')
}
}
}
</script>
最終展示效果
但是這時(shí)有個(gè)問(wèn)題出現(xiàn)，如果我們?nèi)ヌ砑哟a塊兒時(shí)，代碼是統(tǒng)一顏色，代碼塊也沒(méi)有背景色，同時(shí)也沒(méi)有高亮樣式，接下來(lái)我們解決代碼沒(méi)有高亮問(wèn)題。
1、安裝highlight
npm install highlight --save
2、 在main.js添加自定義指令
import hljs from "highlight.js"
import 'highlight.js/styles/default.css';
// 定義自定義指令 highlight 代碼高亮
Vue.directive('highlight',function (el) {
let blocks = el.querySelectorAll('pre code');
blocks.forEach((block)=>{
hljs.highlightBlock(block)
})
})
3、 將“ v-highlight ”添加到使用的div標(biāo)簽上
<template> <div v-html="htms" v-highlight></div> </template>
效果如下：
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
vue權(quán)限管理系統(tǒng)的實(shí)現(xiàn)代碼
這篇文章主要介紹了vue權(quán)限管理系統(tǒng)的實(shí)現(xiàn)代碼，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-01-01
vue flex 布局實(shí)現(xiàn)div均分自動(dòng)換行的示例代碼
這篇文章主要介紹了vue flex 布局實(shí)現(xiàn)div均分自動(dòng)換行,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-08-08
elementui彈窗頁(yè)按鈕重復(fù)提交問(wèn)題解決方法
本文主要介紹了elementui彈窗頁(yè)按鈕重復(fù)提交問(wèn)題解決方法,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-08-08
這篇文章主要介紹了Vue的自定義事件之組件通信工具詳解,Vue的自定義事件(Custom Events)是一種強(qiáng)大的工具,用于實(shí)現(xiàn)組件之間的通信和數(shù)據(jù)傳遞,本文將深入探討什么是Vue的自定義事件,以及如何自定義和使用它們,需要的朋友可以參考下2023-10-10
Vue tagsview實(shí)現(xiàn)多頁(yè)簽導(dǎo)航功能流程詳解
基本上后臺(tái)管理系統(tǒng)都需要有多頁(yè)簽的功能，但是因?yàn)橐恍┠_手架項(xiàng)目基本都把這個(gè)功能給集成好了，導(dǎo)致在學(xué)習(xí)或者修改的時(shí)候不知道該如何下手。今天這篇文章就來(lái)聊一聊，vue-element-admin項(xiàng)目是如何實(shí)現(xiàn)多頁(yè)簽功能的2022-09-09
Vant?UI中van-collapse下拉折疊面板默認(rèn)展開(kāi)第一項(xiàng)的方法
之前做項(xiàng)目的時(shí)候,使用了Collapse折疊面板,下面這篇文章主要給大家介紹了關(guān)于Vant?UI中van-collapse下拉折疊面板默認(rèn)展開(kāi)第一項(xiàng)的相關(guān)資料,需要的朋友可以參考下2022-03-03
淺談VUE單頁(yè)應(yīng)用首屏加載速度優(yōu)化方案
這篇文章主要介紹了淺談VUE單頁(yè)應(yīng)用首屏加載速度優(yōu)化方案，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-08-08
Vue中實(shí)現(xiàn)滾動(dòng)加載與無(wú)限滾動(dòng)
本文主要介紹了Vue中實(shí)現(xiàn)滾動(dòng)加載與無(wú)限滾動(dòng)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-06-06
本文通過(guò)實(shí)例代碼給大家介紹了Vue起步(無(wú)cli)的相關(guān)知識(shí)，非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友參考下吧2019-04-04
Vue提供了transition的封裝組件,可以給任何元素和組件添加進(jìn)入/離開(kāi)過(guò)渡,下面這篇文章主要給大家介紹了關(guān)于Vue中transition標(biāo)簽基本使用的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-08-08