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

2025-01-06 约 311 字预计阅读 1 分钟

https://bing.ee123.net/img/rand?artid=129132163

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

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