フロントエンドは Vue-Code-Highlight プラグインを使用してコードブロックを強調表示します

①npmダウンロードの依存関係

npm install vue-code-highlight --save

②これを実現するには次の 2 つの方法があります。

最初のタイプ:

コードブロックの強調表示が必要な 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>

効果:

2 番目のタイプ:

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