使い方

<pre> 要素で data-jsonp 属性を使用します

<pre
	class="language-javascript"
	data-jsonp="https://api.github.com/repos/leaverou/prism/contents/prism.js">
</pre>

URL で callback クエリパラメータを指定しないでください。これは自動的に追加されます。ただし、API で別のコールバックパラメータ名を期待する場合は、data-callback パラメータを使用してその名前を指定します。

<pre class="…" data-jsonp="…" data-callback="cb"></pre>

次のテクニックはもちろん、ハイライトする価値のあるものを JSONP レスポンスから抽出することです。つまり、興味深いデータを抽出するためにレスポンスを処理します。

次の JSONP API は自動的に検出され、解析されます。

• GitHub
• GitHub Gist
• Bitbucket

自分で解析する必要がある場合は、2 つの方法で独自データアダプタに接続できます。

1. <pre> 要素で data-adapter パラメータを提供します。これは、グローバルに定義された関数の名前である必要があります。プラグインは、このアダプタのみを使用してレスポンスを解析します。
2. Prism.plugins.jsonphighlight.registerAdapter(function(rsp) { … }) を呼び出すことでアダプタ関数を登録します。組み込みアダプタのリストに追加され、他の登録済みアダプタ（例: GitHub/Bitbucket）がレスポンスを解析できない場合に使用されます。

いずれの場合も、関数は少なくとも 1 つのパラメータ（JSONP レスポンス）を受け取り、ハイライトするコンテンツ文字列を返します。アダプターがレスポンスを解析できない場合は、null を返す必要があります。ハイライトされたコードを含む DOM ノードも 2 番目の引数として渡されます。これを使用して追加情報をクエリする必要があります（多分 class 属性や data-jsonp 属性を調べてレスポンスの解析に役立てたい）。

次の例では、カスタムアダプタを使用する両方のメソッドを示します。単純に文字列に変換された JSONP レスポンスを返す（つまり、JSONP データ全体を強調表示する）。

<!-- perhaps this is in a .js file elsewhere -->
<script>
	function dump_json(rsp) {
		return "using dump_json: " + JSON.stringify(rsp,null,2);
	}
</script>

<!-- … include prism.js … -->
<script>
	Prism.plugins.jsonphighlight.registerAdapter(function(rsp) {
		return "using registerAdapter: " + JSON.stringify(rsp,null,2);
	})
</script>

後で HTML に追加します。

<!-- using the data-adapter attribute -->
<pre class="language-javascript" data-jsonp="…" data-adapter="dump_json"></pre>

<!-- using whatever data adapters are available -->
<pre class="language-javascript" data-jsonp="…"></pre>

最後になりましたが、ファイルハイライト プラグインとは異なり、ハイライトする言語の適切な class を提供する必要があります。これは自動的に検出できたはずですが、実際にファイルにリンクしていないため、常に可能ではありません（GitHub のステータスを使用している下の例を参照）。さらに、.xaml 拡張子を持つファイルにリンクしている場合、このプラグインはそれを somehow markup としてハイライトする必要があるため、実際にはより多くの肥大化を意味します。ハイライトするものを認識している場合は、単にそう言ってください :)

Gist に対する注意事項

gist には、実際には複数のファイルを含めることができるため、問題は少しあります。これに対処するための 2 つのオプションがあります。

1. gist にファイルが 1 つしか含まれていない場合は、何もする必要はありません。1 つしかないファイルが自動的に選択され、ハイライトされます。
2. ファイルに複数のファイルが含まれる場合、最初のファイルが既定で選択されます。ただし、data-filename 属性にファイル名を入力すると、代わりにそのファイルが強調表示されます

   <pre class="…" data-jsonp="…" data-filename="mydemo.js"></pre>