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