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

文章介绍了在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>

效果

 

如果想更换其他的样式请把引入的css换成其他的路径:

 

③import "vue-code-highlight/themes/duotone-sea.css"

 

④import "vue-code-highlight/themes/prism-coy.css"

 

⑤import "vue-code-highlight/themes/prism-dark.css";

 

⑥ import "vue-code-highlight/themes/prism-funky.css"

 

⑦import "vue-code-highlight/themes/prism-okaidia.css";

 

⑧import "vue-code-highlight/themes/prism-solarizedlight.css"

 

⑨import "vue-code-highlight/themes/prism-tomorrow.css";

 

⑩import "vue-code-highlight/themes/prism-twilight.css"

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值