VUE - 渲染文件源码

结合网上关于 highlight.js 与 highlightjs-line-numbers.js 的使用，最近需要渲染后端给的字符串源码文件，并实现高亮行等一些相关操作，以下是主要部分方法。

实现方法

  npm install highlight.js
  npm install highlightjs-line-numbers.js

引入位置

在需要 渲染文件源码 的组件中引入，例如：TheBugSoundCode.vue

<script>
  import hljs from 'highlight.js'
  import 'highlight.js/scss/tomorrow-night-eighties.scss'
  
  const highlightCode = () => {
    let light_blocks = document.querySelectorAll('pre code')
    light_blocks.forEach(block => {
      hljs['highlightElement'](block)
    })
    
    let line_blocks = document.querySelectorAll('code.hljs')
    line_blocks.forEach(block => {
      hljs['lineNumbersBlock'](block)
     })
  }
</script>

页面部分

<template>
  <div>
    <pre>
      <code v-html="soundCode"></code>
    </pre>
  </div>
</template>

页面加载

在 updated() 引用 highlightCode()