Vue中使用highlight.js實現程式碼高亮顯示以及點選複製

阿新 • • 發佈：2022-01-07

效果如下

第一步安裝highlight.js

yarn add highlight.js

第二步在main.js中引入

import hl from 'highlight.js' // 匯入程式碼高亮檔案
import 'highlight.js/styles/a11y-dark.' // 匯入程式碼高亮樣式

// 自定義一個程式碼高亮指令
Vue.directive('highlight',function (el) {
  const blocks = el.querySelectorAll('pre code')
  blocks.forEach((block) => {
    hl.highlightBlock(block)
  })
})

第三步建立元件

<template>
  <div class="copy-code-container">
    <div class="copy-container flex-row">
        <a-tooltip>
          <template slot="title"> 複製程式碼 </template>
          <div class="ant-btn" @click="handleCopy(code,$event)"> <a-icon type="copy"></a-icon></div>
        </a-tooltip>

      <a-tooltip>
        <template slot="title"> 顯示程式碼 </template>
        <a-icon @click="handeShowCode" type="code" />
      </a-tooltip>
    </div>

    <div class="code-palce-container" :class="{ 'show-code': showCode }">
      <div class="code-box" v-highlight>
        <pre>
            <code class="scirpt">{[code]}</code>
        </pre>
      </div>
    </div>
  </div>
</template>

<script>
import clip from '@/utils/clipboard' // use clipboard directly

export default {
  data () {
    return {
      showCo 
de: false
    }
  },props: {
    code: {
      type: String,default: ''
    }
  },methods: {
    handeShowCode () {
      this.showCode = !this.showCode
    },handleCopy (text,event) {
      clip(text,event)
    }
  }
}
</script>

<style lang="less" scoped>
.copy-code-container {
  width: 100%;

  .copy-container {
    width: 100%;
    height: 50px;
    justify-content: center;
    align-items: center;
    position: relative;

    .ant-btn{
      width: 58px;
      height: 38px;
      margin: 0;
      border: none;
      box-shadow: none;
 xTnnB 
     backgxTnnBround-color: transparent;
      padding: 0;
    }

    i {
      cursor: pointer;
      font-size: 18px;
      padding: 10px 20px;
    }
  }

  .code-palce-container {
    width: 100%;
    height: 0;
    overflow: hidden;
    transition: all linear 0.1s;

    &.show-code {
      height: 100%;
    }

    .code-box {
      ::v-deep .hljs {
        padding: 0 20px;
        line-height: 25px;
      }
    }
  }
}
</style>

效果如圖：點選顯示程式碼

Vue中使用highlight.js實現程式碼高亮顯示以及點選複製

第四步：使用元件

<copy-code :code="code"> </copy-code>

export default {
  data () {
    return {
      code: `<template>
  <div>
    <a-button type="primary">
      Primary
    </a-button>
    <a-button>Default</a-button>
    <a-button type="dashed">
      Dashed
    </a-button>
    <a-button type="danger">
      Danger
    </a-button>
    <a-config-provider :auto-insert-space-in-button="false">
      <a-button type="primary">
        按鈕
      </a-button>
    </a-config-provider>
    <a-button type="primary">
      按鈕
    </a-button>
    <a-button type="link">
      Link
    </a-button>
  </div>
</template>`
    }
  }
}

第五步實現點選複製程式碼clipboard.js。

clipboard.js copy地址

Vue中使用highlight.js實現程式碼高亮顯示以及點選複製

import Vue from 'vue'
import Clipboard from 'clipboard'

function clipboardSuccess () {
  Vue.prototype.$message.success({
    content: '複製成功',duration: 1.5
  })
}

function clipboardError () {
  Vue.prototype.$message.error({
    content: '複製失敗',duration: 1.5
  })
}

export default function handleClipboard (text,event) {
  const clipboard = new Clipboard(event.target,{
    text: () => text
  })
  clipboard.on('success',() http://www.cppcns.com=> {
    clipboardSuccess()
    clipboard.destroy()
  })
  clipboard.on('error',() => {
    clipboardError()
    clipboard.destroy()
  })
  clipboard.onClick(event)
}

到此這篇關於Vue中使用highlight.js實現程式碼高亮顯示以及點選複製的文章就介紹到這了,更多相關Vue highlight.js程式碼高亮顯示內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！