如何使用

在 <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 Gists
• Bitbucket

如果你需要自己进行解析，可以用两种方法连接自己的数据适配器

1. 在 <pre> 元素中提供 data-adapter 参数。这必须是全局定义函数的名称。该插件将仅使用该适配器解析响应。
2. 通过调用 Prism.plugins.jsonphighlight.registerAdapter(function(rsp) { … }) 注册适配器函数。它将添加到内置适配器列表中，并且如果其他已注册适配器（例如 GitHub/Bitbucket）无法解析响应，则会使用它。

在这两种情况下，该函数至少必须接受一个参数（JSONP 响应），并返回要高亮显示的内容字符串。如果你的适配器无法解析响应，则必须返回 null。包含高亮代码的 DOM 节点也将作为第二个参数传递，以防你需要使用它查询任何其他信息（也许你希望检查 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 扩展名的文件，则该插件需要以某种方式将该文件映射为 markup，而这只会占用更多资源。你知道你想要高亮显示什么，直接说就行了 :)

Gists 的注意事项

Gists 有点儿问题，因为它们实际上可能包含多个文件。有两种方法可以解决此问题

1. 如果你的 gist 仅包含一个文件，则不必执行任何操作；系统会自动选择并高亮显示唯一的文件
2. 如果您的文件包含多个文件，第一个文件将被默认选中。然而，您可以在 data-filename 属性中提供文件名，这个文件将被高亮显示

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