前端通过Vue-Code-Highlight插件让代码块高亮

最新推荐文章于 2025-03-20 09:13:29 发布

坚书直实i

最新推荐文章于 2025-03-20 09:13:29 发布

阅读量2.3k

点赞数 2

分类专栏：笔记文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_48674314/article/details/129132163

版权

笔记专栏收录该内容

38 篇文章

订阅专栏

文章介绍了在Vue项目中如何使用npm安装依赖vue-code-highlight来实现代码高亮，并提供了两种不同的实现方式。第一种是在组件内直接引入主题CSS并注册组件；第二种是通过预格式化代码块标签配合引入CSS。此外，还列举了多个可选的主题样式供选择。

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

① npm 下载依赖

npm install vue-code-highlight --save

②有两个种方式可以实现：

第一种：

在需要代码块高亮的vue页面引入：

<template>
  <div>
    <vue-code-highlight language="javascript">
      modifyUserGroup(data) {
        return fetch({
          url: "/mth-finance-capital-service/api/v1/userGroup/bcUsergroupUpdate",
          method: "POST +++++++++++++++",
          data
        });
      },
    </vue-code-highlight>
  </div>
</template>

<script>
import "vue-code-highlight/themes/prism-tomorrow.css" // 直接引入即可
import "vue-code-highlight/themes/window.css"; // 同上
import { component as VueCodeHighlight } from 'vue-code-highlight'  // 引入
export default {
  components:{ VueCodeHighlight }, // 在模板里也要引入
  data(){
    return {

    }
  }
}
</script>

效果：

第二种：

<style lang="less" scoped>

</style>
<template>
  <div>
    <div v-highlight >
      <pre class="language-javascript">
        <code>
          modifyUserGroup(data) {
            return fetch({
              url: "/mth-finance-capital-service/api/v1/userGroup/bcUsergroupUpdate",
              method: "POST",
              data
            });
          },
        </code>
      </pre>
    </div>
  </div>

</template>

<script>
import "vue-code-highlight/themes/prism-tomorrow.css"; 
import "vue-code-highlight/themes/window.css";

export default {
  data(){
    return {

    }
  }
}
</script>

效果：