SyntaxHighlighterをPrism.jsに乗り換える

JavaScript・jQuey
2017.04.11

SyntaxHighlighterEvoltedが、どうしても重い。
それは多分、使っていない言語や機能も毎回読み込んでしまっているからではないだろうか？

そんなわけで、自分の使う言語や使いたい機能だけを選べる「Prism.js」に乗り換えてみました。
WordPress-Pluginsではなく、自分で設置します。
あとから機能を追加する時に忘れないように、自分の設定を記録しつつご紹介します。

カスタマイズしてDL

公式サイトの右上、DOWNLOADをクリックすると機能の選択画面に進みます。

テーマを選ぶ

決めるのは大まかに3つ。
まずは見た目となるテーマです。


デザインはCSSの上書きで変更できるので特に理由が無ければ圧縮版のMinifiedを選びましょう。
Coreは絶対に必要なのでチェックを外せません。

7種類のテーマから選ぶことができます。
同ページの右側に並んでいる丸いやつをクリックすると、それぞれのテーマがどんな具合か画面下部で確認できます。
いちいち往復するのが面倒なので、画像で残しておきます。

DEFAULT

DARK

FUNKY

OKAIDIA

TWILIGHT

COY

SOLARIZEDLIGHT

言語を選ぶ

続いて言語。
いつでも追加できるので、可能な限り削ってしまいます。

私は、こんな程度にしました。

Markup, CSS, C-like, JavaScript, CSS Extras HTTP, Ini
Java, nginx, PHP, PHP Extras, SQL, Vim

追加プラグインを選ぶ

最後に追加する機能を選びます。
まず、下の2つは必須と言えるでしょう。

Line Highlight …… 行をハイライトします。
Line Numbers …… 行数を表示できます。

言語を表示できる「Show Language」を使う人が多いようですが、私はやめておきました。
その代わり、面白そうだったので以下の2つを使用してみることにします。

Command Line …… コマンド画面を表現できます。
Copy to Clipboard Button …… ボタンクリックで内容をコピーできます。

「Copy to Clipboard Button」を選ぶと、セットで「Toolbar」も付いてきます。

DLして設置

選択ができたら画面下部のDLボタンより、JSとCSSをそれぞれダウンロードします。
「prism.js」と「prism.css」がDL出来たら、サーバの任意の箇所へアップロードします。

<head> ～ </head>の中に「prism.css」へのリンクを張ります。
場所は人によって違うと思いますが、子テーマのcssフォルダに入れているならこんな感じ。

header.php 
<link rel="stylesheet" href="<?php echo get_stylesheet_directory_uri(); ?>/css/prism.css">

続いて、「prism.js」へのリンクはフッターに張ります。
この時「Copy to Clipboard Button」を使うために必要なCDNも一緒に張ります。

CDNの方が上になるように、</body>の上にこんな感じで。

footer.php 
<script src="https://cdn.jsdelivr.net/clipboard.js/1.6.0/clipboard.min.js"></script>
<script type='text/javascript' src='<?php echo get_stylesheet_directory_uri(); ?>/js/prism.js'></script>

これで完了。次に使い方です。

Prismの使い方

<pre>と<code>で前後を挟み、機能をclassで指定します。
最低限必要なのは<code>の中に「class=”language-○○”」と言語を指定することです。

例えば下記のように書くと……

HTML 
<pre><code class="language-Markup">HTMLならlanguegeにMarkupを指定する</code></pre>

下のように表示されます。

Prismでの表示結果 
HTMLならlanguegeにMarkupを指定する

行数を表示したいなら、<pre>の中に「class=”line-numbers”」を指定。 

<pre class="line-numbers"><code class="language-Markup">あ
い
う
</code></pre>

あ
い
う

ここでのポイントは「1行目は改行してはいけない」ということです。改行すると2行目から始まってしまいます。

行数のハイライトや開始番号を変えたいなら「data-start=””」と「data-line=””」を追記。
101行目から初めて、103行目をハイライトしたいならこう書きます。 

<pre class="line-numbers" data-start="101" data-line="3"><code class="language-Markup">あ
い
う
え
お
</code></pre>

あ
い
う
え
お

ここでのポイントは「ハイライトの指定は表示される行を単純に上から数えたものになる」です。
表示される103行目をハイライトしたいと思って「data-line=”103″」と指定すると、101行から開始して103行先と解釈されてしまい、強制的に203行目まで作られてしまうので注意です。

複数行ハイライトするなら「data-line=”2-3″」、飛ばしてハイライトしたいなら「data-line=”2-3,5″」。 

あ
い
う
え
お

コピーはマウスを乗せると出てくるようになっています。試しに押してみて下さい。

最後に超重要なのが「<」についてです。

WordPressは「<」をそのまま書くとタグと認識してしまい、表示をしてくれませんのでこう書きましょう。
表示できないので画像です。

こう書くと、

ちゃんと「<」に変換されて、コピーした際にも「<」で表示されます。 

<link rel="stylesheet">

私はこれを「偽<」と呼んで、AddQuicktagに登録しています。

使い方は以上です。
最後にデザインのちょっとした変更をしてみます。

CSS上書きによるデザイン変更

私の選んだテーマは「Funky」です。
このテーマ、そのままでは背景が斜めのボーダーラインになってしまいますので塗りつぶします。

新しいclassは作らず、下記のように「language」に追加してしまいます。
Prismを使う時は必ず「language」を指定する事になるので、これでいつでも適用されます。

style.css 
pre[class*="language-"] { background: #1a1a1a;}

行数の部分と、コピーボタン部分を変えるなら以下を変更します。

style.css 
pre.line-numbers { padding-left: 3.5em;}
pre.code-toolbar .toolbar a { border-radius: 0em; text-decoration: none;}

私の場合、ハイライターの左上に「style.css」のように編集するファイル名を表示するため「prism-title」というclassをCSSで作って付け足しています。下記が現時点における当ブログのPrism用CSSの内容です。

※ 2022年3月、サイトのデザインも色々変えたので、下記内容も更新しました。

style.css 
/* Prism.js */
.prism-title{
background: #1a1a1a;
font-size: 90%;
display: inline-block;
color: #ec6d71;
letter-spacing: 0.1em;
margin: 15px 20px 0px 0px;
padding: 3px 15px 0px 15px;
border-bottom: 1px solid #1a1a1a;
border-radius: 0px 5px 0px 0px;
}
pre[class*="language-"] { margin: 0px; background: #1a1a1a; border: none;}
code[class*="language-"] { background: #1a1a1a; color: white; box-shadow: -0.3em 0 0 0.3em #1a1a1a, 0.3em 0 0 0.3em #1a1a1a;}
pre.code-toolbar .toolbar a { padding-bottom: 4px; border-radius: 0em; text-decoration: none;}
/* Highlight */
.line-highlight { background: linear-gradient(to right, hsla(212, 64%, 55%,0.3) 70%, hsla(24, 20%, 50%,0));}
/* スクロールバー */
pre[class*="language-"]{ scrollbar-base-color:#fff; }
pre[class*="language-"]::-webkit-scrollbar { width: 3px; height: 15px; }
pre[class*="language-"]::-webkit-scrollbar-track { background: #fff; -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.1); }
pre[class*="language-"]::-webkit-scrollbar-thumb { background:#6c848d; border-radius: 0px; }
使い方 
<span class="prism-title">ここにタイトル</span>
<pre><code class="language-Markup"> ここの内容が長過ぎるとスクロールバーが出てくるけどwekitなので推奨では無いかもしれないです </code></pre>

16-17行目のハイライトの部分がCSS3のグラデーションの書き方なのでとっつきにくいのですが、これを簡単に好みの色に変えるにはChromeのデベロッパーツールを使います。ハイライトされている行のところへマウスカーソルを持っていって右クリックから検証を選びます。

すると、デベロッパーツールが開くので頑張ってツリーを展開し「class=”line-highlight”」の部分を見つけます。

見つけたら「.line-highlight」の内容が表示されているので「hsla」の前にある四角ボタンをクリックします。
「hsla」は2回記述されていますが前の方です。

するとパレットが開きますので、自由にいじって好きな色を見つけてください。
白い丸が現在の色の位置です。

まず、赤で囲んだ透明度のバーをちょいと右へ動かしておいてから色を探すのがオススメです。
パレットで色を変えるたびに、Chrome上の実際の表示もリアルタイムで変わるので最高に使いやすいです。
まさに神ツール。

後ろの方の「hsla」は何も手を加えずにそのままでも、十分見やすく綺麗になったのではないでしょうか？
好みの色が決定したら、HSLAと4つ並んだ数字をCSSで上書きして完了です。

さあ、あとは過去の記事をコツコツ変更していくだけだ……。
以上です。

トップへ戻る
タイトルとURLをコピーしました