vue使用showdown并實(shí)現(xiàn)代碼區(qū)域高亮的示例代碼

更新時(shí)間：2019年10月17日 15:01:21 作者：N_餅干

這篇文章主要介紹了vue使用showdown并實(shí)現(xiàn)代碼區(qū)域高亮的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(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('# 這是一個(gè)標(biāo)題')
    }
  }
}
</script>

最終展示效果

但是這時(shí)有個(gè)問題出現(xiàn)，如果我們?nèi)ヌ砑哟a塊兒時(shí)，代碼是統(tǒng)一顏色，代碼塊也沒有背景色，同時(shí)也沒有高亮樣式，接下來我們解決代碼沒有高亮問題。

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