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