实现代码高亮+行号设置

1、下载 highlightjs：

   npm install highlight.js`

2、在main.ts中写

import hljs from 'highlight.js
import 'highlight.js/styles/stom-one-dark.css

// 自定义指令
app.directive('highlight', function (el) {
  const blocks = el.querySelectorAll('pre code');
  blocks.forEach((block) => {
    hljs.highlightBlock(block);
    // 从这开始是设置行号
    block.innerHTML = `<ol><li>${block.innerHTML.replace(
      /\n/g,
      `</li><li class="line">`
    )}</li></ol>`;
  });
});
app.use(hljs.vuePlugin) 

解释：

1. 如果不想要行号，只要高亮，那么把innerHTML的代码删掉即可
2. import …css 的代码，是高亮的样式
   官网有很多：https://highlightjs.org

3、调用

 <pre v-highlight>
     <code class="language-html hljs">{{code}}</code>
 </pre>


const code = ref(`
  <p class="ave-base-text ave-base-mb-16">
    a) The Respondent must not enter or remain or take part in any gaming on
    any casino premises; If the Respondent enters or attempts to enter the
    casino, casino staff may use reasonable force to remove the Respondent
    or prevent the Respondent from entering.
  </p>

`);

解释：

1. v-highlight 是自定义指令，v- 后面的与在main.ts中写的 directive 中的 highlight 要保持一致
2. 想要高亮的代码 必须包含在code标签中
3. class类名是高亮显示的代码类型，不同类型有不同的高亮显示配色 同样参照官网即可
4. class 中的 hljs 是关于行号的类名，自定义的，可以取任何名字

4、关于行号

因为行号在main.js生成的时候 是用ol>li 写成的，所以需要对样式进行改造

pre {
  position: relative;
  min-width: 600px;
  margin: 0;
}
.hljs {
  display: block;
  width: 100%;
  margin: 0;
  padding: 1px;
  color: #abb2bf;
  font-weight: 200;
  font-size: 0.75rem;
  font-family: Menlo, Monaco, Consolas, Courier, monospace;
  line-height: 1.5;
  white-space: pre-wrap;
  border: 0;
}
.hljs ol {
  margin: 0 0 0 35px;
  padding: 0;
  list-style-type: decimal;
}
.hljs ol li {
  // padding: 5px;
  // padding-left: 10px;
  color: #abb2bf;
  white-space: pre;
  // list-style: decimal-leading-zero;
  list-style-position: outside;
  border-left: 1px solid #c5c5c5;
}

5、最终形成的样式如下：