【vue3 中使用highlight.js实现代码高亮，开箱即用，非常方便】

highlight.js代码高亮

使用highlight.js直接封装，复制即可使用。先看效果

1. 项目中安装

npm i highlight.js
yarn add hightlight.js

2. 编写Highlight组件

    以下代码复制即可使用。
   

<template>
  <div class="hljs-container">
    <pre>
    <code class="hl-css" :language="type">
      {{code}}
    </code>
  </pre>
  </div>
</template>

<script setup>
//引入样式 github stackflow-dack
// import 'highlight.js/styles/stackoverflow-dark.css'
import hljs from 'highlight.js'
import { onMounted } from "vue";
const props = defineProps({
  code: String,
  type: String,
  theme: String,
})
onMounted(()=>{
  const blocks = document.querySelectorAll('pre code');
  blocks.forEach((block) => {
    hljs.highlightBlock(block);
    // 从这开始是设置行号 把每一行代码放入li标签中实现行号
    block.innerHTML = `<ol data-v-589b9458><li data-v-589b9458>${block.innerHTML.replace(
      /\n/g,
      `</li><li data-v-589b9458>`
    )}</li></ol>`;
  });

});
</script>

<style lang="less" scoped>
pre {
  position: relative;
  min-width: 600px;
  padding-top: 10px;
}
.hljs-container{
  background-color: #fff;
}
.hljs-container::before {
  position: absolute;
  top: 30px;
  left: 25px;
  width: 12px;
  height: 12px;
  margin-top: 10px;
  overflow: visible;
  font-weight: 700;
  font-size: 16px;
  line-height: 12px;
  white-space: nowrap;
  text-indent: 75px;
  background-color: #fc625d;
  border-radius: 16px;
  box-shadow: 20px 0 #fdbc40, 40px 0 #35cd4b;
  content: attr(type);
}

.hl-css ol {
  margin-left: 35px;
  list-style-type: decimal;
}
.hl-css ol li {
  color: #abb2bf;
  white-space: pre;
  list-style-position: outside;
  height: 28px;
  width: 100%;
  border-left: 1px solid #8a8a8a;
}
</style>

3. 使用

    在页面中引入该组件
   

<template>
  <div class="p-4">
      <Highlight :code="code" type="js" theme="stackoverflow-dark"/>
  </div>
</template>
<script lang="ts" setup>
  import Highlight from './components/Highlight.vue';
  // 测试数据
  const code = "  setTimeout(() => {\n" +
    "    loading.value = false;\n" +
    "  }, 1500);";
</script>

4. 可能会出现的问题

• 行号不显示

  • 这是由于你使用的框架覆盖了原来的样式，需要做指定处理

      block.innerHTML = `<ol data-v-589b9458><li data-v-589b9458>${block.innerHTML.replace(
    /\n/g,
    `</li><li data-v-589b9458>`
  )}</li></ol>`;
  // data-v-589b9458 就是这个东西。
  
  

• 样式不太对，这个自己调整吧。