您好,登錄后才能下訂單哦!
怎么在vue中利用showdown實現(xiàn)代碼區(qū)域高亮?相信很多沒有經(jīng)驗的人對此束手無策,為此本文總結(jié)了問題出現(xià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)容,你們掌握怎么在vue中利用showdown實現(xiàn)代碼區(qū)域高亮的方法了嗎?如果還想學(xué)到更多技能或想了解更多相關(guān)內(nèi)容,歡迎關(guān)注億速云行業(yè)資訊頻道,感謝各位的閱讀!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。