SyntaxHighlight（シンタックス・ハイライト）は、プログラムのソースコードをハイライトしてくれるプラグインです。
シンタックスハイライト系のプラグインは、CrayonやSyntaxHighlighter Evolved、WP SyntaxHighlighterあたりが有名で、ご使用されている方も多いのではないでしょうか。
シンタックスハイライトをご使用されている方は、ご存知かと思いますが、プラグインは多ければ多いほど重くなるんです。
有効化されたプラグインは、headタグから毎ページごと読み込まれ、常に出番を待っている状態です。
キャッシュに記憶されていれば、読み込むスピードは早くなりますが、プラグインが少ないことに越したことはありません。
そこで、今回は当サイトで使用しているPrism.jsの紹介をします。
[box class=”box33″ title=”こんな人にオススメ”]
[list class=”li-chevron li-mainbdr main-c-before”]
- プラグインが多すぎて一つでも減らしたい方
- 新たにシンタックスハイライトをお探しの方
- プラグインじゃ重いから、何とか軽くしたい方
[/list][/box]
Prismとは
WordPressは、プラグインは20個くらいが妥当と言われています。
有効化したプラグインは毎ページごとのHeadタグで読み込まれ、常に出番を待っています。
プラグインはほとんどJavaScriptで構成されており、キャッシュに読み込まれて遅くは感じられないかも知れません。
ですが、プラグインがあればあるほど重くなる事実は変わりません。
ご紹介するPrismはJavaScriptですがプラグインではありません。
JavaScript本体とcssの２つのファイルで可動する、最も軽量なシンタックスハイライターと言っても過言ではありません。
機能はどうなの？
機能面においても、多彩なプログラムに対応しており他のプラグインと遜色ありません。
ダウンロード時にプログラムと機能を選択してしまうため変更がききません。
もし変更する場合、再度ダウンロードして設置しなおさなければなりませんが、設置自体が簡単なため、それほど手間を感じることはありません。
Prismを実際に使用した例がこちら
import numpy as np
import matplotlib.pyplot as plt
import math
n = 10000
points = np.random.uniform(-1, 1, (n, 2))
dots_in_x = []
dots_in_y = []
dots_out_x = []
dots_out_y = []
n_in = 0
for x, y in points:
if x**2 + y**2 <= 1:
n_in += 1
dots_in_x.append(x)
dots_in_y.append(y)
else:
dots_out_x.append(x)
dots_out_y.append(y)
est_pi = 4 * n_in / n
plt.figure(figsize = (7, 7))
plt.title('π ≒ {0:4.2f}'.format(est_pi), fontsize = 30)
plt.xlim(-1.1,1.1)
plt.ylim(-1.1,1.1)
plt.xticks([-1, 0, 1], fontsize = 20)
plt.yticks([-1, 0, 1], fontsize = 20)
plt.plot(dots_out_x, dots_out_y, 'o', color = '#00aa0088', markersize = 3)
plt.plot(dots_in_x, dots_in_y, 'o', color = '#aaaa0088', markersize = 3)
plt.plot([-1, 1, 1, -1, -1], [-1, -1, 1, 1, -1], 'b-')
angle = np.linspace(0, 2, 100)
plt.plot(np.cos(angle*math.pi), np.sin(angle*math.pi), 'g-')
plt.show()
プラグインをインストールすることなく、これだけのハイライトできるんです。
使い方ガイド
[timeline]
[tl label=’手順1′ title=’公式サイトへ’]
Prism公式サイトへアクセス。
[sanko href=”https://prismjs.com/” title=”Prism” site=”Prismjs”]
[/tl]
[tl label=’手順2′ title=’ダウンロードページへ’]
ダウンロードするのは、
[/tl]
[tl label=’手順3′ title=’Minified Versionの選択とCSS選び’]
DevelopmentバージョンとMinifiedバージョンがありますが、必要なのはMinifiedバージョンです。
CSSは8つの種類から選びます。
赤い四角のところを選んで、下にスライドすると、実際にどんなハイライトかを見ることが出来ます。
あとで自分で直してしまえばいいので、そんなに悩まなくても問題ありません。
[/tl]
[tl label=’手順4′ title=’プログラム選び’]
非常に多くのプログラムから選択していきます。
この世の中に、こんなにプログラムの種類あるのかって驚くほど対応しています。
プラグインとは違い、ここで選択をミスるとやり直しになってしまうため要注意です。
と言っても、１回適用させてしまえば、ダウンロードしてアップロードするだけなので、やり直すのも大した手間ではありません。
[/tl]
[tl label=’手順5′ title=’機能の追加’]
ここが一番悩むところかも知れません。
機能部分をクリックすれば詳細が見れます。
こなゆきが選んだものはこちら。
[list class=”li-check li-mainbdr main-c-before”]
- Line Highlight 指定した行をハイライトしてくれる機能
- Line Numbers 行ナンバー表示
- Highlight Keywords キーワードを別途ハイライト
- Show Language 右上に言語を表示
- Copy to Clipboard Button 右上にcopyボタン追加
[/list]
他のはあんまり必要性を感じませんでした。
cssを載せてカラーコードをプレビューさせたい場合、Previewersもあったほうが良いかも知れません。
[/tl]
[tl label=’手順6′ title=’ダウンロード’]
全て選択したら、DOWNLOAD JSとDOWNLOAD CSSから２つのファイルをダウンロードします。
[/tl]
[tl label=’手順7′ title=’設置’]
子テーマフォルダに２つのファイルをアップロードし、子テーマのfunction.phpのheadタグの中に下の２行を追加して完了です。
<link rel="stylesheet" type="text/css" href="./prism.css" media="all" />
<script type="text/javascript" src="./prism.js"></script>
[/tl]
[tl label=’手順8′ title=’実際の使用方法’]
<pre><code class="language-言語名">
</code></pre>
この間にソースコードを入れて使用します。
行表示したい場合は、
[codebox title=”HTML”]
<pre class="line-numbers">
<code class="language-言語名">
表示したいソース
</code>
</pre>
[/codebox]
AddQuickTagsを使用していれば、そのまま登録しても良いかも知れませんね。
[alert title=”注意”]
HTMLを記載する場合、言語名をmarkupとして、エンティティ文字を手動で変換しなくてはいけません。
私はそれで５分悩みました。
[/alert]
[/tl]
[/timeline]