如何使用

Toolbar 插件允许使用多种方法通过 Prism.plugins.toolbar.registerButton 函数注册按钮。

最简单的方法是通过 HTML API。将 data-label 属性添加到 pre 元素,Toolbar 插件将读取该属性的值并将标签附加到代码片段中。

<pre data-src="plugins/toolbar/prism-toolbar.js" data-label="Hello World!"></pre>

如果您想向按钮提供任意 HTML,请创建一个带有所需 HTML 标签的 template 元素,并将 template 元素的 id 提供给 data-label。Toolbar 插件会使用该模板的内容作为按钮。您也可以使用内联方式声明事件处理程序

<pre data-src="plugins/toolbar/prism-toolbar.js" data-label="my-label-button"></pre>
<template id="my-label-button"><button onclick="console.log('This is an inline-handler');">My button</button></template>

注册按钮

为了获得更大的灵活性,Toolbar 暴露了一个 JavaScript 函数,可用于向 Toolbar 注册新按钮或标签,即 Prism.plugins.toolbar.registerButton

该函数接受一个按钮键和一个具有 text 属性字符串以及一个可选的 onClick 函数或 url 字符串的对象。当点击按钮时将调用 onClick 函数,而 url 属性将被设置为锚标签的 href

Prism.plugins.toolbar.registerButton('hello-world', {
	text: 'Hello World!', // required
	onClick: function (env) { // optional
		alert('This code snippet is written in ' + env.language + '.');
	}
});

注意到上面的代码是如何注册 Hello World! 按钮的?您可以在插件中使用它向工具栏注册您自己的按钮。

如果您需要更多控制,可以将一个函数提供给 registerButton,该函数返回 spanabutton 元素。

Prism.plugins.toolbar.registerButton('select-code', function(env) {
	var button = document.createElement('button');
	button.innerHTML = 'Select Code';

	button.addEventListener('click', function () {
		// Source: http://stackoverflow.com/a/11128179/2757940
		if (document.body.createTextRange) { // ms
			var range = document.body.createTextRange();
			range.moveToElementText(env.element);
			range.select();
		} else if (window.getSelection) { // moz, opera, webkit
			var selection = window.getSelection();
			var range = document.createRange();
			range.selectNodeContents(env.element);
			selection.removeAllRanges();
			selection.addRange(range);
		}
	});

	return button;
});

上面的函数会创建您看到的“选择代码”按钮,当您点击它时,代码将被突出显示。

排列按钮

默认情况下,按钮将按照注册它们的顺序添加到代码片段中。如果需要对顺序进行更多控制,可以使用 data-toolbar-order 属性。给定一个以逗号分隔的按钮名称列表,它将确保这些按钮按给定的顺序显示。
未列出的按钮将不会显示。这意味着可以使用此技术禁用按钮。

示例:“Hello World!”按钮会显示在“Select Code”按钮之前,自定义标签按钮将不会显示。

<pre data-toolbar-order="hello-world,select-code" data-label="Hello World!"><code></code></pre>

data-toolbar-order 属性是继承的,因此您可以通过将属性添加到页面的 body 来定义整个文档的按钮顺序。

<body data-toolbar-order="select-code,hello-world,label">