① dependencias de descarga de npm
npm install vue-code-highlight --save②Hay dos formas de lograrlo:
El primer tipo :
Introduzca en Vue páginas que requieran resaltado de bloques de código:
<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>Efecto :
Segundo tipo:
<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>Efecto :
Si desea cambiar otros estilos, cambie el CSS importado a otra ruta:
③importar "vue-code-highlight/themes/duotone-sea.css"
④importar "vue-code-highlight/themes/prism-coy.css"
⑤importar "vue-code-highlight/themes/prism-dark.css";
⑥ importar "vue-code-highlight/themes/prism-funky.css"
⑦importar "vue-code-highlight/themes/prism-okaidia.css";
⑧importar "vue-code-highlight/themes/prism-solarizedlight.css"
⑨importar "vue-code-highlight/themes/prism-tomorrow.css";
⑩importar "vue-code-highlight/themes/prism-twilight.css"
