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()
		})
	}
}