ツールバープラグインは、`Prism.plugins.toolbar.registerButton`関数を使用してボタンを登録するためのメソッドを提供します。
最も簡単な方法はHTML APIを使用することです。`pre`要素に`data-label`属性を追加すると、ツールバープラグインはその属性の値を読み取って、コードスニペットにラベルを付加します。
<pre data-src="plugins/toolbar/prism-toolbar.js" data-label="Hello World!"></pre>ラベルに任意のHTMLを提供する場合、ラベルに含めたいHTMLを使用した`template`要素を作成して、`template`要素の`id`を`data-label`に指定します。ツールバープラグインはボタンのテンプレートの内容を使用します。インラインでイベントハンドラーを宣言することもできます。
<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>柔軟性を高めるために、ツールバーは新しいボタンやラベルをツールバーに登録するために使用できるJavaScript関数`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!`ボタンをどのように登録するか確認してください。これを使用してプラグインで独自のボタンをツールバーに登録できます。
詳細に制御する必要がある場合、`span`、`a`、または`button`要素を返す`registerButton`に関数を提供できます。
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!」ボタンが「コードの選択」ボタンの前に表示され、カスタムラベルボタンは表示されません。
<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">