全機能一覧

わずか 2KB (コア) 縮小 & gzip 圧縮。各言語定義は約 300-500 バイトを追加します。
適切なオーサリングプラクティスを推奨します。他のハイライターは、<pre> (単独) や <script> のように、意味的に間違った要素を使用することを推奨したり、強制したりすることさえあります。Prism は、コードをマークアップするための正しい要素である <code> を使用することを強制します。インラインコードの場合は単独で、コードブロックの場合は <pre> 内で使用します。さらに、言語は HTML5 ドラフトで推奨されている方法、つまり language-xxxx クラスによって定義されます。
language-xxxx クラスは継承されます。つまり、複数のコードスニペットが同じ言語を使用する場合、共通の祖先のいずれかに一度だけ定義すれば済みます。
利用可能な場合、Web Workers による並列処理をサポートします。デフォルトでは無効になっています (理由)。
Prism のプラグインアーキテクチャにより、コードを変更することなく非常に簡単に拡張できます。ソースコード全体に複数のフックが散りばめられています。
新しい言語を定義するのは非常に簡単です。必要なのは、正規表現をよく理解していることだけです。
すべてのスタイリングは CSS を介して行われ、醜く、名前空間化され、省略された無意味なものではなく、分かりやすいクラス名が使用されます。
幅広いブラウザをサポート: Edge、IE11、Firefox、Chrome、Safari、Opera、ほとんどのモバイルブラウザ。
埋め込み言語 (HTML 内の CSS、HTML 内の JavaScript など) をハイライトします。
コードブロックだけでなく、インラインコードもハイライトします。
Prism 固有のマークアップ、Prism 固有のクラス名さえも強制しません。 ohnehin 使用すべき標準のマークアップのみを使用します。そのため、しばらく試してみて、気に入らなければ削除しても、痕跡は残りません。
特定の行または行範囲をハイライトします (プラグインが必要)。
タブ、改行などの見えない文字を表示します (プラグインが必要)。
URL とメールアドレスを自動リンクし、コメントに Markdown リンクを使用します (プラグインが必要)。

基本的な使い方

ダウンロードした 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> 要素 (コードブロックとインラインスニペット) 内のすべての < と & 文字は、それぞれ < と & にエスケープする必要があります。そうしないと、ブラウザが 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、およびその他のバンドラーとの併用

バンドラーで Prism を使用するには、npm で Prism をインストールします

$ npm install prismjs

その後、バンドルに import できます

import Prism from 'prismjs';

必要な言語とプラグインのみで Prism インスタンスを簡単に構成するには、babel プラグイン babel-plugin-prismjs を使用します。これにより、ニーズを満たすために最小限の言語とプラグインをロードできます。構成の詳細については、そのプラグインのドキュメントを参照してください。

Node での使用

サーバーまたはコマンドラインで Prism を使用する場合、Prism は Node.js でも使用できます。AMP ページのように、ブラウザ側の JS をサポートしていない環境で、ハイライトされたコードを含む静的 HTML ページを生成しようとしている場合に役立ちます。

例

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 を require すると、デフォルトの言語である 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');

注: Webpack または別のバンドラーで loadLanguages() を使用しないでください。Webpack がすべての言語とプラグインを含めることになるためです。上記で説明した babel プラグインを使用してください.

注: loadLanguages() は不明な言語を無視し、コンソールに警告メッセージを記録します。loadLanguages.silent = true を設定することで、警告を防ぐことができます。

利用実績

例

全機能一覧

制限事項

基本的な使い方

言語の継承

手動ハイライト

CDN との併用

Webpack、Browserify、およびその他のバンドラーとの併用

Node での使用

サポートされている言語

プラグイン

サードパーティの言語定義

サードパーティのチュートリアル

クレジット