使用者

Prism 用於若干的網站，不論規模大小。其中包括

Smashing Magazine A List Apart Mozilla Developer Network (MDN) CSS-Tricks SitePoint Drupal React Stripe MySQL

範例

Prism 原始碼，以 Prism 標記 (您是不是覺得這樣很炫呢？)



	
此網頁的 CSS 程式碼，以 Prism 標記

	


	
此網頁的 HTML，以 Prism 標記

	


	
此網頁的標誌 (SVG)，以 Prism 標記

	


	
如果您還沒有被打動，您可以 查看更多範例 或 親自嘗試。






	
完整功能列表

	





	
限制

	





	
基本用法


	
您必須在您的頁面中加入您下載的prism.css與prism.js檔案。範例
<!DOCTYPE html>
<html>
<head>
	...
	<link href="themes/prism.css" rel="stylesheet" />
</head>
<body>
	...
	<script src="prism.js"></script>
</body>
</html>


	
Prism盡可能鼓勵良好的創作習慣。因此，它僅支援<code>元素，因為若未透過<code>元素標記程式碼，在語意上為無效的。 根據HTML5說明文件，建議用於定義程式語言的方式為language-xxxx類別，這正是Prism所採用的。Prism也支援更簡潔的版本，即lang-xxxx。


	
標記程式區塊（對語意與Prism都是如此）的建議方式為<pre>元素內含有<code>元素，如下


	
<pre><code class="language-css">p { color: red }</code></pre>


	
如果您採用此模式，則<pre>將自動取得language-xxxx類別（若尚未取得），且將以程式區塊的樣式呈現。


	
直行式程式碼範例則用此方式執行


	
<code class="language-css">p { color: red }</code>


	
注意：您必須替<code>元素中的所有<與&字元加上跳脫字元，分別改為&lt;和&amp;，否則瀏覽器可能會將它們詮釋為HTML標籤或實體。如果您有大量的HTML程式碼，可以使用UNESCAPED MARKUP外掛解決此問題。


	
語言繼承


	
不過，Prism假設語言類別會被繼承，而採用更便利的方式處理。因此，如果多個<code>元素具有相同的語言，您可以在其中一個共通的上層元件加入language-xxxx類別。如此一來，您也可以在<body>或<html>中加入language-xxxx類別，來定義全文件預設的語言。


	
如果您不想要讓繼承語言的<code>元素套用樣式，可以在其中加入language-none類別。此none語言也可被繼承，讓帶有此類別的元素及其所有下層元素皆不套用樣式。


	
如果您選擇不套用樣式，但仍使用像SHOW INVISIBLES這樣的外掛，請加入language-plain類別。


	
手動套用樣式


	
如果您要避免讓任何元素自動套用樣式，而使用API，您可以在觸發DOMContentLoaded事件前，將Prism.manual設為true。透過設定包含Prism核心的<script>元素的data-manual屬性，即可自動執行此操作。範例


	
<script src="prism.js" data-manual></script>


	
或


	
<script>
window.Prism = window.Prism || {};
window.Prism.manual = true;
</script>
<script src="prism.js"></script>


	
搭配CDN使用


	
結合CDN使用時，我們建議使用AUTOLOADER外掛，這將於必要時自動載入語言。


	
AUTOLOADER的設定如下。當然，您也可以加入自己需要的樣式。


	
<!DOCTYPE html>
<html>
<head>
	...
	<link href="https://{{cdn}}/prismjs@v1.x/themes/prism.css" rel="stylesheet" />
</head>
<body>
	...
	<script src="https://{{cdn}}/prismjs@v1.x/components/prism-core.min.js"></script>
	<script src="https://{{cdn}}/prismjs@v1.x/plugins/autoloader/prism-autoloader.min.js"></script>
</body>
</html>


	
請注意，以上程式碼範例中的連結均為佔位符。您必須將它們替換為指向您選擇的CDN的有效連結。


	
提供PrismJS的CDN包含cdnjs、jsDelivr及UNPKG等。


	
搭配Webpack、Browserify及其他BUNDLER使用


	
如果您想搭配BUNDLER使用Prism，請使用npm安裝Prism


	
$ npm install prismjs


	
隨後您可以將以下程式碼import到您的套件中


	
import Prism from 'prismjs';


	
若要輕鬆設定您的Prism實例，僅載入您所需的語言與外掛，請使用babel外掛babel-plugin-prismjs。這將讓您載入滿足您需求的最少語言與外掛數量。有關設定詳細資訊，請參閱該外掛的文件。


	
搭配Node使用


	
如果您想在伺服器上或透過指令列使用Prism，Prism也能搭配Node.js使用。這可能有助於您嘗試針對不支援瀏覽器端JS的環境產生靜態HTML頁面，例如AMP頁面。


	
範例

	
const Prism = require('prismjs');

// The code snippet you want to highlight, as a string
const code = `var data = 1;`;

// Returns a highlighted HTML string
const html = Prism.highlight(code, Prism.languages.javascript, 'javascript');


	
需要 prismjs 將會載入預設語言：markup、css、clike 跟 javascript。你可以透過 loadLanguages() 工具程式載入更多語言，而它會自動處理任何需要的依賴

	
範例


	
const Prism = require('prismjs');
const loadLanguages = require('prismjs/components/');
loadLanguages(['haml']);

// The code snippet you want to highlight, as a string
const code = `= ['hi', 'there', 'reader!'].join " "`;

// Returns a highlighted HTML string
const html = Prism.highlight(code, Prism.languages.haml, 'haml');


	
注意：請不要將 loadLanguages() 與Webpack或其他打包器一起使用，因為這會導致Webpack包含所有語言與外掛程式。請使用上述Babel外掛程式


	
注意： loadLanguages() 會忽略未知的語言，並記錄警告訊息到控制台。你可以透過設定 loadLanguages.silent = true 來避免這些警告訊息







	
支援語言

	
這是目前Prism支援的所有  語言清單，包含其相對應的別名，用於替換 xxxx 於 language-xxxx (或 lang-xxxx) 類別中

	

	
沒辦法找到你正在尋找的語言？請求它！






	
外掛程式

	
外掛程式是額外的腳本（與CSS程式碼）用以延伸Prism的功能。以下是許多官方外掛程式，但作為外掛程式發布，用於讓Prism 內核對那些不需要額外功能的人來說保持簡潔。

	

	
不需要任何組件就可以使用它們。只要在 下載頁面中選取它們即可

	
要編寫你自己的Prism外掛程式非常容易。你編寫了想要加入此清單的Prism外掛程式嗎？送出拉取請求！






	
第三方語言定義


	





	
第三方教學


	
社群成員編寫了數個教學，協助你將Prism整合到各種不同的網站類型與設定


	

	
請注意，這裡所列出的教學並未經過驗證，是否包含正確資訊。自行閱讀請自行承擔風險，如果有些東西不對，請隨時查看此處的官方文件 :)


	
你寫過關於Prism的教學，但尚未包含在此處嗎？請發送拉取請求！






	
鳴謝