Vue页面代码高亮展示之Prism语法高亮工具

阿松爱摸鱼

已于 2022-03-18 09:41:04 修改

阅读量3.3k

点赞数

分类专栏：前端插件合集文章标签： vue.js javascript 前端

于 2022-03-18 09:37:16 首次发布

本文链接：https://blog.csdn.net/zuohu2017/article/details/123566601

版权

前端插件合集专栏收录该内容

1 篇文章 0 订阅

订阅专栏

基本介绍

Prism 是一款轻量级、可扩展的语法高亮工具，在构建时考虑了现代 Web 标准。它被用于数百万个网站，包括您每天访问的一些网站。

Prism 支持自定义扩展代码的语言、主题和插件选项，勾选自己常用的代码语言和主题风格以及增强插件，将定制好的代码文件 prism.css 和 prism.js 如下方式链接到页面，再使用 <pre><code> 编辑方式编写代码文章即可展现漂亮的代码高亮。

注：本文针对的是在vue中使用的简单说明，更多使用方式可以移步至官网进行查看

更多信息，请移步至官方网址：https://prismjs.com/

github地址：https://github.com/PrismJS/prism

npm地址：https://www.npmjs.com/package/prismjs

环境介绍

名称	版本
@vue/cli	4.5.15
vue	2.6.14
prismjs	1.27.0
babel-plugin-prismjs	2.1.0

使用示例

安装命令均使用yarn进行安装，当然你也可以使用npm进行插件包的安装

示例一

只使用prismjs一个插件进行功能实现

效果展示

插件安装

yarn add prismjs
或
npm install prismjs -D

代码实现

<template>
	<div>
		<pre class="language-xml" v-html="content"></pre>
	</div>
</template>

<script>
// 引入插件
import Prism from "prismjs"
// 引入插件对应主题样式
import 'prismjs/themes/prism-twilight.min.css'

// 模拟数据
const content = '<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n<sbp>\n  <head>\n    <guid>4291dc118b5144bfb2c9d3e494f6aa52</guid>\n    <src>BASS</src>\n    <dst>LFPT</dst>\n    <unifsoc_cred_code>12</unifsoc_cred_code>\n    <xch_code>55</xch_code>\n    <version>V1.0.00</version>\n    <timestamp>20220316163000470</timestamp>\n  </head>\n </sbp>\n'

export default {
	name: 'PrismjsExamples',
	data () {
		return {
			content: ''
		}
	},
	mounted () {
		// 这是只是一个触发处理数据高亮的入口，可以根据自己需求来变更初始化时机
		this.transfHighlightCode()
	},
	methods: {
		/**
		 * 转换高亮显示代码
		 */
		transfHighlightCode () {
			const htmlContent = Prism.highlight(content, Prism.languages.xml, 'xml');
			this.content = htmlContent
		}
	}
}
</script>

注：这里的实例代码使用的xml格式的数据进行举例

代码说明

关于代码 Prism.highlight(content, Prism.languages.xml, 'xml');，这里的xml的参数可以根据自己的需求进行更改，可选参数有以下选择：

DFS、atom、clike、css、extend、html、insertBefore、javascript、js、markup、mathml、plain、plaintext、rss、ssml、svg、text、txt、xml等

以上为默认的加载的语言格式，具体更改的语言支持可以查看官网 https://prismjs.com/#supported-languages。

关于主题样式的选择，import 'prismjs/themes/prism-twilight.min.css，本次示例选择的是该主题样式，可选主题样式有以下选择：

prism-coy.css、prism-dark.css、prism-funky.css、prism-okaidia.css、prism-solarizedlight.css、prism-tomorrow.css、prism-twilight.css、prism.css // 每个选择都存在同款的min.css

在官网的首页同样给出了主题的标识，选择不同的主题，下方的代码展示背景随之变化，如下图所示：

在这里插入图片描述

示例二

本示例中新增了一个额外的插件包babel-plugin-prismjs prismjs编译器，实现想过与示例一的一致

插件安装

注：如已安装了prismjs就不需要再次进行安装

yarn add babel-plugin-prismjs -D
或
npm install babel-plugin-prismjs -D

插件配置

由于我这里使用了@vue/cli4.x的版本，所以需要在babel.config.js进行插件的配置

babel.config.js

const plugins = []
const presets = []

// prismjs高亮显示插件的配置
plugins.push(["prismjs", {
  // 语言配置
  "languages": ["javascript", "css", "markup", 'xml'],
  // 插件配置：可选插件可查看官网，这里配置了行号，如不用插件可以删除
  "plugins": ["line-numbers"],
  // 主题配置：可选主题coy、dark、funky、okaidia、solarizedlight、tomorrow、twilight
  "theme": "twilight", // 主题
  // css配置：默认是false，设置为true，主题才会生效
  "css": true
}])

presets.push("@vue/cli-plugin-babel/preset")

module.exports = {
  presets,
  plugins
}

配置说明：

关于配置信息可以去这里查看：https://www.npmjs.com/package/babel-plugin-prismjs

如需更多插件支持可前往官网进行查看：https://prismjs.com/#plugins

代码实现

<template>
	<div>
		<pre><code class="language-xml">{{ content }}</code></pre>
	</div>
</template>

<script>
// 引入插件
import Prism from "prismjs"

// 模拟数据
const content = '<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n<sbp>\n  <head>\n    <guid>4291dc118b5144bfb2c9d3e494f6aa52</guid>\n    <src>BASS</src>\n    <dst>LFPT</dst>\n    <unifsoc_cred_code>12</unifsoc_cred_code>\n    <xch_code>55</xch_code>\n    <version>V1.0.00</version>\n    <timestamp>20220316163000470</timestamp>\n  </head>\n </sbp>\n'

export default {
	name: 'PrismjsExamples',
	watch: {
		// 如果是动态赋值的话，每次内容变更都需要触发高亮更新操作
		content (newValue, oldValue){
			this.$nextTick(() => {
				Prism.highlightAll()
			})
		}
	}
	data () {
		return {
			content: ''
		}
	},
	mounted () {
		// 这是只是一个触发处理数据高亮的入口，可以根据自己需求来变更初始化时机
		this.transfHighlightCode()
	},
	methods: {
		/**
		 * 转换高亮显示代码
		 */
		transfHighlightCode () {
			this.content = content
		}
	}
}
</script>