前端通过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>

效果：

扫描二维码关注公众号，回复： 16771411 查看本文章

如果想更换其他的样式请把引入的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"