Highlightjs-line-numbers.js; highlightjs-line-numbers.js; highlightjs-line-numbers.js;

Implementation method

  npm install highlight.js
  npm install highlightjs-line-numbers.js
Copy the code

The position of

In components that need to render file source code, for example: 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>Copy the code

Page section

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

Page load

References highlightCode() in updated()