『初体验』在vue中使用prismjs，让页面代码变漂亮！

最新推荐文章于 2024-05-08 00:17:32 发布

DemoJx

最新推荐文章于 2024-05-08 00:17:32 发布

阅读量5.9k

点赞数 1

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/DemoJx/article/details/103685842

版权

vue 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

问题

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

解决

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

cnpm install prismjs -S

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

cnpm install babel-plugin-prismjs -D

在.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
    }]
  ]

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