问题

在vue中如何使用prismjs(一款页面代码高亮插件)?

解决

  1. 首先在项目中安装prismjs插件:
cnpm install prismjs -S
  1. 安装完成后,需要继续安装一个prismjs的编译器插件:
cnpm install babel-plugin-prismjs -D
  1. 在.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
    }]
  ]
  1. 在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>
  1. 最终效果:
    在这里插入图片描述
Logo

前往低代码交流专区

更多推荐