vue使用showdown并實(shí)現(xiàn)代碼區(qū)域高亮的示例代碼
更新時(shí)間：2019年10月17日 15:01:21 作者：N_餅干
這篇文章主要介紹了vue使用showdown并實(shí)現(xiàn)代碼區(qū)域高亮的示例代碼，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
前言：當(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)文章
vuex中遇到的坑,vuex數(shù)據(jù)改變,組件中頁(yè)面不渲染操作
這篇文章主要介紹了vuex中遇到的坑,vuex數(shù)據(jù)改變,組件中頁(yè)面不渲染操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-11-11
這篇文章主要介紹了Vue3?Reactive響應(yīng)式原理邏輯詳解，文章圍繞主題展開(kāi)詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，需要的小伙伴可以參考一下2022-07-07
vue添加錨點(diǎn),實(shí)現(xiàn)滾動(dòng)頁(yè)面時(shí)錨點(diǎn)添加相應(yīng)的class操作
這篇文章主要介紹了vue添加錨點(diǎn),實(shí)現(xiàn)滾動(dòng)頁(yè)面時(shí)錨點(diǎn)添加相應(yīng)的class操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-08-08
vue中的render函數(shù),它返回的是一個(gè)虛擬節(jié)點(diǎn)vnode,也就是我們要渲染的節(jié)點(diǎn),下面這篇文章主要給大家介紹了關(guān)于Vue中render函數(shù)的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-09-09
Vue動(dòng)態(tài)組件與異步組件超詳細(xì)講解
這篇文章主要介紹了Vue動(dòng)態(tài)組件與異步組件，動(dòng)態(tài)組件是根據(jù)數(shù)據(jù)的變化，可以隨時(shí)切換不同的組件，比如咱們現(xiàn)在要展示一個(gè)文本框和輸入框，我們想要根據(jù)我們data中定義的值去決定是顯示文本框還是輸入框2023-03-03
Vue獲取初始化數(shù)據(jù)是放在created還是mounted解讀
這篇文章主要介紹了Vue獲取初始化數(shù)據(jù)是放在created還是mounted的問(wèn)題解讀，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-03-03
vue項(xiàng)目登錄成功后退出時(shí)清空sessionId和userId的問(wèn)題
這篇文章主要介紹了vue項(xiàng)目登錄成功后退出時(shí)清空sessionId和userId的問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-12-12
vue3利用customRef實(shí)現(xiàn)防抖
防抖就是對(duì)于頻繁觸發(fā)的事件添加一個(gè)延時(shí)同時(shí)設(shè)定一個(gè)最小觸發(fā)間隔,防抖大家都學(xué)過(guò),但是如何在?Vue3?里中將防抖做到極致呢,下面小編就來(lái)和大家詳細(xì)講講2023-10-10
這篇文章主要介紹了vue-cli3.0使用及部分配置詳解，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-08-08
本文主要介紹了vue3使用flv.js播放推流視頻的示例代碼，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-05-05