おはこんばんにちは〜🌦
あまてぃのブログへようこそ！
今回は、
WordPress等のブログでコードを貼る際によく使われるコードハイライトライブラリのPrism.jsについての紹介です！
Prism.jsのプラグインは個人的にどれを選べばいいのか迷うことが多く、この機に色々調査してみましたので紹介していきたいと思います
使えるプラグインはかなり多いです。
Prism.jsの導入についてはすでに多くの記事があったので本記事ではプラグインのみを紹介します
Prism.jsを導入後の以下の形を基準として進めていきます！
基準の入力例
<pre>
<code class="language-python">
# Hello World
import pprint
def main():
hello_words = ["Hello", "World!"]
pprint(hello_words)
main()
</code>
</pre>基準の出力例
それではどうぞ！
(目次がかなり長くなってしまいましたので見難いなどあれば目次は閉じてください😇)
目次
- 1 Line Highlight
- 2 Line Numbers
- 3 Show Invisibles
- 4 Autolinker
- 5 WebPlatform Docs
- 6 Custom Class
- 7 File Highlight
- 8 Show Language
- 9 JSONP Highlight
- 10 Highlight Keywords
- 11 Remove initial line feed
- 12 Inline color
- 13 Previewers
- 14 Autoloader
- 15 Keep Markup
- 16 Command Line
- 17 Unescaped Markup
- 18 Normalize Whitespace
- 19 Data-URI Highlight
- 20 Toolbar
- 21 Copy to Clipboard Button
- 22 Download Button
- 23 Match braces
- 24 Diff Highlight
- 25 Filter highlightAll
- 26 Treeview
- 27 あとがき
- 28 参考文献
Line Highlight
概要
指定した行や行範囲を目立たせるプラグインになります。
使い方①
まずは基本的な使い方です。
行番号を指定し、指定した行を強調させます
強調する行を指定するにはdata-line属性を使用します。
入力例
ここでは、data-line="2,5"を指定しています。
この指定だと該当する行(2行目,5行目)が強調表示されます。
<pre data-line="2,5">
<code class="language-python">
# Hello World
import pprint
def main():
hello_words = ["Hello", "World!"]
pprint(hello_words)
main()
</code>
</pre>出力例
使い方②
次に複数行の指定方法の紹介です。
入力例
ここでは、data-line="2,5-7"を指定しています。
x-yという指定だと該当する行範囲(5~7行目)が強調表示されます。
<pre data-line="2,5-7">
<code class="language-python">
# Hello World
import pprint
def main():
hello_words = ["Hello", "World!"]
pprint(hello_words)
main()
</code>
</pre>出力例
使い方③
pre属性にidを設定している場合、行番号と組み合わせてその行へのアンカーリンクを作ることもできます。
#<id>.<行番号>がアンカーリンクの指定方法です。
入力例
この例では、
<a href="#mycode.5">#mycode.5</a>というHTMLを挿入しまして、リンクをクリックするとコードの5行目に飛んでくれます。
<pre id="mycode" data-line="2,5-7">
<code class="language-python">
# Hello World
import pprint
def main():
hello_words = ["Hello", "World!"]
pprint(hello_words)
main()
</code>
</pre>
<div style="margin-left:20px;">
<p >⇩をクリックすると5行目に飛ぶよ</p>
<a href="#mycode.5">#mycode.5</a>
</div>出力例
Line Numbers
概要
コードに行番号を表示するプラグインになります。
使い方①
まずは基本的な使い方から
classにline-numbersを指定するとプラグインが適用されます。
入力例
<pre class="line-numbers">
<code class="language-python">
# Hello World
import pprint
def main():
hello_words = ["Hello", "World!"]
pprint(hello_words)
main()
</code>
</pre>出力例
行番号が表示されました！
使い方②
- `Line Highlight`のプラグインを導入する
- pre属性のクラスに
linkable-line-numbersを付与する
これにより行番号がクリックできるようになり、
クリックするとURLにアンカーリンクが付与されます。このURLをどこかに設置すれば、そこからその行に飛べます
入力例
<pre id="mycode" class="line-numbers linkable-line-numbers">
<code class="language-python">
# Hello World
import pprint
def main():
hello_words = ["Hello", "World!"]
pprint(hello_words)
main()
</code>
</pre>出力例
行番号(5行目)をクリックするとURLにアンカーリンク(#mycode.5)が付与される様子
使い方③
あまり使わないかもしれませんが、data-start属性に数を指定することで行番号のスタートの数を変えることができます。
入力例
ここでは、data-start="-5"を指定しています。
この指定により行番号が-5からスタートするようになります。
<pre class="line-numbers" data-start="-5">
<code class="language-python">
# Hello World
import pprint
def main():
hello_words = ["Hello", "World!"]
pprint(hello_words)
main()
</code>
</pre>出力例
Show Invisibles
概要
タブや改行などの隠し文字を表示するプラグインになります。
使い方
ダウンロードした時点で反映されるので特に属性を指定する必要はないです。
入力例
<pre>
<code class="language-python">
# Hello World
import pprint
def main():
hello_words = ["Hello", "World!"]
pprint(hello_words)
main()
</code>
</pre>出力例
Autolinker
概要
コード内のURLやEメールをクリック可能なリンクに変換するプラグインになります。
公式のURLはこちら
https://prismjs.com/plugins/autolinker/
使い方
コード内にURLが記載されるとリンク化されるのがわかると思います！
[表示されるテキスト](http://example.com)といったMarkdown的な書き方もできます。
入力例
<pre>
<code class="language-python">
# Hello World
# リンクのテスト1 https://ama-memo.com/
# リンクのテスト2 [あまてぃの日常](https://ama-memo.com/)
import pprint
def main():
hello_words = ["Hello", "World!"]
pprint(hello_words)
main()
</code>
</pre>出力例
WebPlatform Docs
概要
特定のHTMLやCSSに解説ページへのリンクを付与するプラグインになります。
公式のURLはこちら
https://prismjs.com/plugins/wpd/
使い方
クラスにlanguage-markupを付与して、HTMLやCSSのタグを記載します。
入力例
これらのタグはご存じですか？
<pre class="language-markup">
<code>
<pre>
<code>
<script>
<aside>
<article>
</code>
</pre>出力例
この状態でタグにマウスオーバーすると、このような表記になります。
この状態でマウスクリックすると、該当のWebPlatform.org documentation のページに飛んでくれます。
scriptタグだとこちら
https://webplatform.github.io/docs/html/elements/script/
Custom Class
概要
Prismのデフォルトクラスをカスタマイズできるプラグインになります。
使い方
Prism.plugins.customClassというオブジェクトを操作していきます。
カスタムした場合の挙動がわかるようにまずはカスタム前の状態を添付します。
カスタム前の入力例
<body>
<pre class="language-python">
<code>
foo: str = 'bar'
</code>
</pre>
<script src="src/prism.js></script>
</body>カスタム前の出力例 (HTML)
カスタム後の入力例
ではカスタムしていきます。
Prism.plugins.customClass.map({
operator: 'my-operator',
string: 'my-string'
});今回はscriptタグに上記コードを追加しました。
これは既存classのoperatorにあたる部分を`my-operator`に、stringにあたる部分を`my-string`に、
置き換えるコードになります。
<body>
<pre class="language-python">
<code>
foo: str = 'bar'
</code>
</pre>
<script src="src/prism.js?date=<?php echo date('YmdHis'); ?>"></script>
<script>
Prism.plugins.customClass.map({
operator: 'my-operator',
string: 'my-string'
});
</script>
</body>カスタム後の出力例
わかりずらいですが、ちゃんとクラス名の変更ができてそうですね！
あとはCSSで
my-operatorやmy-stringのスタイルを調整すればオリジナルのカスタマイズができます。
File Highlight
概要
外部ファイルを取得してPrismでハイライト表示するプラグインになります。
使い方
- まずはハイライトさせたい外部ファイルを用意
data-srcにそのファイルを指定する
になります。
言語は自動検出してくれるらしいです。
入力例
以下のような外部ファイルを用意
入力は以下のようになります。
data-range属性を指定するとそのファイルの指定範囲だけ表示することもできます。（今回の場合は4~6行目のみ表示となる）
<pre data-src="src/myfile.py" data-range="4,6"></pre>入力側はシンプルになりますね。
出力例
Show Language
概要
ハイライトされた言語名を表示するプラグインになります。
使い方
特に設定は必要無し
出力例
使用言語を右上に表示してくれます
JSONP Highlight
概要
JSONPでコンテンツを取得し、特定のコンテンツをハイライト表示するプラグインになります。
扱いが難しそうなのと、使わなそうなので今回は説明から省きます。
Highlight Keywords
概要
独自のCSSルールを使用してキーワードの外観をきめ細かく制御できるプラグインになります。
使い方
- 下記のCSSスタイルを設定
<キーワード名>のところはスタイルを変更したいキーワード名で置き換える- 当てたいスタイルを記載する
.token.keyword.keyword-<キーワード名> {
/* 付与したいスタイルを記載 */
}入力例
下記はdefというキーワードに独自cssを割り当てています。
<pre>
<code class="language-python">
# Hello World
import pprint
def main():
hello_words = ["Hello", "World!"]
pprint(hello_words)
main()
</code>
</pre>
<style>
.token.keyword.keyword-def {
/* styles for 'def' */
background-color: red;
}
</style>出力例
Remove initial line feed
概要
コードブロックの最初の改行を削除するプラグインになります。
使い方
出力例
最初の空行を消してくれます。
(何故かずれてしまいましたがw)
Inline color
概要
CSSのcolorプロパティにプレビューを追加するプラグインになります。
使い方
コードブロックの中にCSSのcolorプロパティを入れます。
入力例
<pre>
<code class="language-html">
<span style="color: red;">赤色です。</span>
<span style="color: #7fff00;">蛍光色です。</span>
<span style="color: rgba(255,255,255,1)">白色です。</span>
</code>
</pre>出力例
Previewers
概要
CSSの特定のプロパティにプレビュー機能を追加するプラグインになります。
公式のURLはこちら
https://prismjs.com/plugins/previewers/
使い方
コードブロックに対象のプロパティを記載します
対象プロパティの種類
angle- transform: rotate等
color- color
- background-color
- border等
gradient- background: linear-gradient等
easing- transition-timing-function等
time- trainsition-duration等
入力例
<pre>
<code class="language-css">
.my-angle {
transform: rotate(90deg);
}
.my-color {
color: rgba(255, 0, 0, 1);
background: navy;
border: 1px solid #7fff00;
}
.my-gradient {
background: linear-gradient(#e66465, #9198e5);
}
.my-easing {
transition-timing-function: ease-in;
}
.my-time {
transition-duration: 1s;
}
</code>
</pre>出力例
Autoloader
概要
必要な言語を自動的に読み込んで、コードブロックをハイライト表示するプラグインになります。
公式のURLはこちら
https://prismjs.com/plugins/autoloader/
使い方
- プラグインの公式URLから、すべての言語のスクリプトをダウンロード
- ダウンロードしたスクリプトをプログラムのルートディレクトリの
componentsフォルダに配置
※componentsフォルダはある程度適当な位置でも自動で探して読み込んでくれるらしいです。
出力例
例えば、prism.jsとprism.cssをダウンロードする時にcss, htmlなどの基本言語だけを選択したとします。
そうするとコードブロックにPythonコードを記載しても通常prismは認識してくれません。
ただ、このプラグインを入れているとcomponentsフォルダから不足分のスクリプトを取ってきてくれて読み込んでくれるらしいです。
prism.jsにpythonがセットしていなかったのに反映されている図
Keep Markup
概要
<mark>タグを反映できるようにするプラグインになります。
公式のURLはこちら
https://prismjs.com/plugins/keep-markup/
使い方
マーカーを引きたい箇所を<mark></mark>で囲みます。
入力例
<pre>
<code class="language-python">
# Hello World
import pprint
def main():
<mark>hello_words = ["Hello", "World!"]</mark>
pprint(hello_words)
main()
</code>
</pre>出力例
Command Line
概要
コマンドライン風の表示ができるプラグインになります。
使い方
- pre属性のクラスに
command-lineを指定する data-user属性に適当なユーザ名を入力するdata-host属性に適当なホスト名を入力する
入力例
<pre class="command-line" data-user="user" data-host="localhost">
<code class="language-python">
$ python
Python 3.9.7 (default, Sep 16 2021, 08:50:36)
[Clang 10.0.0 ] :: Anaconda, Inc. on darwin
Type "help", "copyright", "credits" or "license" for more information.
>>> print('hello world!')
hello world!
</code>
</pre>出力例
Unescaped Markup
概要
エスケープすることなくマークアップを書くことができるプラグインになります。
使い方
<pre><code></code></pre>の代わりに<script type="text/plain"></script>の中にコードを記載します。
入力例
<script type="text/plain" class="language-markup">
<pre>pre要素</pre>
<code>code要素</code>
<aside>aside要素</aside>
<article>article要素</article>
</script>出力例
<pre><code></code></pre>で囲むとHTMLタグを記載する時に毎回エスケープする必要があるのですが、エスケープせずとも強調表示ができてますね
Normalize Whitespace
概要
コードブロック内の空白を色々操作できるプラグインになります。
使い方
- 基本的にはデフォルトで様々な空白を処理してくれる
- 必要に応じて各設定を無効化する
設定一覧
remove-trailing- すべての行の末尾の空白を削除
remove-indent- コードブロック全体がインデントされすぎている場合に余分なインデントを削除
left-trim- コードブロックの先頭からすべてのホワイトスペースを削除
right-trim- コードブロックの下部からすべての空白を削除
break-lines- 長い行を一定の長さで改行 (デフォルトは 80 文字)
indent- 各行に一定の数のタブを追加
remove-initial-line-feed- コードブロックの先頭から改行を1つ削除
tabs-to-spaces- すべてのタブを特定の数のスペースに変換 (デフォルトは4スペース)
spaces-to-tabs- ある数のスペースをタブに変換 (デフォルトは4スペース)
導入前の入力例
<pre>
<code class="language-python">
# Hello World
import pprint
def main():
hello_words = ["Hello", "World!"]
pprint(hello_words)
main()
</code>
</pre>導入前の出力例
導入後の出力例
最初の改行が消えていたり、インデントが詰められたりして綺麗になりました。
カスタマイズ後の入力例
こんな形で必要なものをoffにしたり細かい設定も可能です
<pre
data-left-trim="false"
data-break-lines="20"
>
<code class="language-python">
# Hello World
import pprint
def main():
hello_words = ["Hello", "World!"]
pprint(hello_words)
main()
</code>
</pre>カスタマイズ後の出力例
Data-URI Highlight
概要
data-URI属性を強調表示するプラグインになります。
こちらの使い方ですが...
導入してもうまくハイライトつかなかったのでスキップします笑
Toolbar
概要
コードブロックの上部にボタンを簡単に登録できるプラグイン用ツールバーを導入するプラグインになります。
公式のURLはこちら
https://prismjs.com/plugins/toolbar/
使い方
data-label属性に適当なラベル名をつけます- そのラベルにボタンイベントを付与します
イベントを付与しなくてもラベルとして表示するだけも可能です。
入力例
<body>
<pre data-label="toolbar-button">
<code class="language-python">
# Hello World
import pprint
def main():
hello_words = ["Hello", "World!"]
pprint(hello_words)
main()
</code>
</pre>
<!-- 指定したdata-labelにクリックイベントを付与する -->
<template id="toolbar-button"><button onclick="console.log('This is an My button');">My button</button></template>
<script src="src/prism.js?date=<?php echo date('YmdHis'); ?>"></script>
<script>
Prism.plugins.toolbar.registerButton('hello-world', {
// 必須
text: 'こんにちはボタン',
// オプション
onClick: function (env) {
alert('こんにちは!');
}
});
</script>
</body>軽く解説します
<pre data-label="toolbar-button">ここでdata-label属性に"toolbar-button"というラベル名をつけてます。
<template id="toolbar-button"><button onclick="console.log('This is an My button');">My button</button></template>ここで"toolbar-button"にbuttonイベントを付与してます。
最初の使い方説明時に紹介はしませんでしたが、
<script>
Prism.plugins.toolbar.registerButton('hello-world', {
// 必須
text: 'こんにちはボタン',
// オプション
onClick: function (env) {
alert('こんにちは!');
}
});
</script>というスクリプトを追加することで追加でボタンを設定できます。
出力例
この例だと、
「My button」をクリックするとコンソールに「This is an My button」と表示され、
「こんにちはボタン」をクリックすると画面に「こんにちは！」とポップアップが表示されます
Copy to Clipboard Button
概要
コードをクリップボードにコピーできるボタンを追加するプラグインになります。
使い方
特に設定は必要無し
出力例
右上にCopyボタンが表示されます。ボタンをクリックするとクリップボードにコードがコピーされます
Download Button
概要
コードファイルをダウンロードできるボタンを追加するプラグインになります。
使い方
- pre属性に
data-download-link属性を付与する data-src属性にダウンロードする際のファイル名を指定するdata-download-link-labelにボタンのラベル名を設定する
入力例
<pre data-src="myfile.py" data-download-link data-download-link-label="ファイルをダウンロードします。">
<code class="language-python">
# Hello World
import pprint
def main():
hello_words = ["Hello", "World!"]
pprint(hello_words)
main()
</code>
</pre>出力例
ボタンをクリックすると指定されたファイル名で保存ができるようになります
Match braces
概要
マッチする括弧を強調表示するプラグインになります。
使い方①
pre属性のクラスにmatch-bracesを指定することでプラグインが適用されます
入力例
<pre>
<code class="language-python match-braces">
# Hello World
import pprint
def main():
hello_words = ["Hello", "World!"]
pprint(hello_words)
main()
</code>
</pre>出力例
括弧にマウスを乗せると対応する括弧が強調表示されます
使い方②
このプラグインにはrainbow-bracesというクラスも用意されていて、それをセットしてみると...
入力例
<pre>
<code class="language-python match-braces rainbow-braces">
# Hello World
import pprint
def main():
hello_words = ["Hello", "World!"]
pprint((((hello_words))))
main()
</code>
</pre>出力例
括弧が虹色に！！これは楽しい
Diff Highlight
概要
diffブロックを強調表示するプラグインになります。
使い方①
まずは基本の使い方
code属性のクラスにlanguage-diffを付与します
入力例
<pre>
<code class="language-diff">
// Hello World
- let hello = "Hello World";
+ let hello = "Hello";
console.log(hello);
</code>
</pre>出力例
使い方②
別のスタイルも用意されています。
追加でcodeクラスにdiff-highlightを付与すると...
入力例
<pre>
<code class="language-diff diff-highlight">
// Hello World
- let hello = "Hello World";
+ let hello = "Hello";
console.log(hello);
</code>
</pre>出力例
使い方③
対応している言語があればですが、
コードの強調表示を適用したままdiffの強調表示もできます。
クラス名をlanguage-diffでなくlanguage-diff-<言語名>に設定します。
入力例
<pre>
<code class="language-diff-javascript diff-highlight">
// Hello World
- let hello = "Hello World";
+ let hello = "Hello";
console.log(hello);
</code>
</pre>出力例
Filter highlightAll
概要
ハイライトする要素にフィルタをかけるプラグインになります。
使い方
- 下記スクリプトをコードに記載します
- 強調表示から除外したいコードブロックのcode要素のクラスに
no-highlightを付与します
Prism.plugins.filterHighlightAll.reject.addSelector('code.no-highlight');※no-highlightは別名でも大丈夫です。
入力例
<body">
<pre>
<code class="language-css no-highlight">
a.link::before {
content: 'I just do my own highlighting';
color: #F00;
}
</code>
<code class="language-css">
a.link::before {
content: 'I just do my own highlighting';
color: #F00;
}
</code>
</pre>
<script src="src/prism.js?date=<?php echo date('YmdHis'); ?>"></script>
<script>
Prism.plugins.filterHighlightAll.reject.addSelector('code.no-highlight');
</script>
</body>出力例
Treeview
概要
ファイルシステムのツリー構造を強調表示するプラグインになります。
公式のURLはこちら
https://prismjs.com/plugins/treeview/
使い方
code要素のクラスにlanguage-treeviewを付与します。
入力例
<pre>
<code class="language-treeview">
./
├── index.php
└── src/
├── prism.css
└── prism.js
</code>
</pre>プラグイン導入前の出力例
プラグイン導入後の出力例
あとがき
Prism.jsのプラグインはかなり数が多いのでどれを選べばいいか迷うことが多いと思います。
この記事がプラグインを選ぶ際の参考になれば幸いです。
参考文献
閲覧いただきありがとうございました。みなさんのお役に立てましたら幸いです!
コメントなどもお待ちしてます☺️
