prism.js让页面代码变漂亮

基本信息

• 官网：https://prismjs.com/
• Github：https://github.com/PrismJS/prism
• npm：https://www.npmjs.com/package/prismjs

效果展示

使用方法

常规 <script> 标签引入

直接引入即可，具体见下面：

// 引入资源
<link rel="stylesheet" href="../libaray/prismjs/prism.css">
<script src="../libaray/prismjs/prism.js"></script>


// 以下是具体代码
<pre>
	<code class="language-javascript line-numbers">
		function Person(name, age){
			this.name = name || 'pelli';
			this.age = age || 18;
		}

		Person.prototype.sayHi = function(){
			console.log('Hi, I am ' + this.name + ', I am ' + this.age + ' years old');
		};
	</code>
</pre>

Vue 组件化开发

使用方法

• 先安装包

// 安装prismjs
npm i prismjs -S

// 安装prismjs编译器
npm i babel-plugin-prismjs -D

• 编辑 .babelrc 配置

"plugins": [
    ["prismjs", {
      "languages": ["javascript", "css", "markup"], // 这是语言类型
      "plugins": ["line-numbers"], // 使用了行号还可以添加其他插件，具体看官网
      "theme": "twilight", // 主题
      "css": true
    }]
]

• 在具体的组件中使用

<template>
    <div>
      <pre>
        <code class="language-xml line-numbers">&lt;span class="itsicons"&gt;&amp;#x33;&lt;/span&gt;</code>
      </pre>
    </div>
  </div>
</template>

<script>
	import Prism from "prismjs"; //引入插件
	
	export default {
		data(){
			return {
			}
		}
	}
</script>

拓展

languages 开发语言设置，可参考官网，只是多种开发语言

plugins 插件可配置多种插件，具体可查看官网

theme 官方提供多种

不生效？

如果需要渲染的文本是从后台读取的，需要手动执行 Prism.highlightAll()，否则出不了效果。

watch: {
	text(newValue, oldValue){
		this.$nextTick(() => {
			Prism.highlightAll()
		})
	}
}