Vue页面代码高亮展示之Prism语法高亮工具
使用prism高亮展示代码的实现
基本介绍
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>
注:这里的实例代码使用的xml格式的数据进行举例
特别说明:如果是动态进行赋值的话,需要每次渲染完成后执行
Prism.highlightAll()
参考资料
https://prismjs.com/
https://www.npmjs.com/package/babel-plugin-prismjs
https://blog.csdn.net/bigbear00007/article/details/109182369
更多推荐
所有评论(0)