介绍
vue-prism 是一个基于 Prism.js 的 Vue 组件，它可以给你的 Vue 应用程序提供代码高亮的功能。它非常易于使用，并且可以整合进你的 Vue 单文件组件和 HTML 模板中。
安装
可以通过 NPM 直接安装 vue-prism。
npm install vue-prism --save-dev
使用
要使用 vue-prism，首先需要在 main.js 中导入它：
import VuePrism from 'vue-prism';
import 'prismjs/themes/prism-tomorrow.css';
Vue.component('vue-prism', VuePrism);然后在组件中使用它，这个时候你需要给它传入一些参数以告诉它应该使用哪一种语言的代码进行高亮。
<template>
<vue-prism language="javascript">
let a = 1;
console.log(a);
</vue-prism>
</template>参数
vue-prism 支持传入以下参数：
language: 高亮显示的编程语言，默认为markup。可以设置为：markup,css,clike,javascript,actionscript,apacheconf,php,ruby,typescript,nginx, etc.highlight: 是否高亮行，默认为0，不高亮行。可以设置为行号，多行用逗号隔开，例如'1,2,3'。
示例代码
以下是一个完整的使用示例：
-- -------------------- ---- -------
----------
-----
---------- --------------------- -------------------
--- - - --
--- - - --
--- - - - - --
---------------
------------
------
-----------
--------
------ -------- ---- ------------
------ ------------------------------------
------ ------- -
----------- -
------------ --------
-
--
---------结论
vue-prism 是一个非常有用的 npm 包，它可以让你的 Vue 应用程序更具有可读性和可维护性。它不仅可以高亮显示代码，还可以让你更方便地看到错误和调试代码。希望本文对您有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedaeafb5cbfe1ea0610ead