问题

在vue中如何使用prismjs（一款页面代码高亮插件）？

解决

1. 首先在项目中安装prismjs插件:

cnpm install prismjs -S

2. 安装完成后，需要继续安装一个prismjs的编译器插件：

cnpm install babel-plugin-prismjs -D

3. 在.babelrc文件中配置使用该插件：

//.babelrc文件中plugins选项里配置
    ["prismjs", {
      "languages": ["javascript", "css", "markup"],
      "plugins": ["line-numbers"],
      "theme": "twilight",
      "css": true
    }]

//.babelrc文件配置后的plugins选项内容
"plugins": ["transform-vue-jsx", "transform-runtime", [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ],
    ["prismjs", {
      "languages": ["javascript", "css", "markup"],
      "plugins": ["line-numbers"],
      "theme": "twilight",
      "css": true
    }]
  ]

4. 在vue中使用：

//需要使用的组件内
<template>
    <div>
      <pre style="height: 77%;padding-left: 0;">
      	//此处class：
      	//language-xml指的是基于xml语言进行高亮设置
        //line-numbers指的是使用显示行号
        <code class="language-xml line-numbers" v-text="html"></code>
      </pre>
    </div>
  </div>
</template>
<script>
	import Prism from "prismjs";//引入插件
	export default {
		data(){
			return {
				html:`<target><!-- 模拟数据 -->
      <target>var data = 1</target><target>var data = 1</target>
      <target>var data = 1</target><target>var data = 1</target>
      <target>var data = 1</target><target>var data = 1</target>
      <target>var data = 1</target>
      </target>`
			}
		}
	}
</script>

5. 最终效果：