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

原创已于 2022-11-08 11:13:13 修改 · 2.7k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #vue.js

于 2022-10-13 00:11:21 首次发布

学习笔记专栏收录该内容

10 篇文章

订阅专栏

本文介绍如何使用highlight.js进行代码高亮，并提供了一个可直接复制使用的Vue组件示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

highlight.js代码高亮

使用highlight.js直接封装，复制即可使用。先看效果
在这里插入图片描述

项目中安装

npm i highlight.js
yarn add hightlight.js

编写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>

使用
```
 在页面中引入该组件
```

<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>

可能会出现的问题

行号不显示

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

    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 就是这个东西。

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