WordPress

WordPressのシンタックスハイライトって何にした？僕はPrism.jsにしました

  /

※この記事は僕がStinger8を使っていた頃に書いたものです。今はJINを使っているので、僕のサイトのデザインのようにはなりません。

こんにちは、はんぺらです。

ブログを本格的に初めて３週間位たつんですが、その間にWordPressのシンタックスハイライトにはかなり悩まされてきました。

そして、先日やっとお気に入りのシンタックスハイライトを手に入れたので皆さんに共有したいと思います！

まず、結論から言うと、Prism.jsを選びました。

この記事では、何故Prism.jsにしたのか、また、インストール方法や設定方法も順を追って説明します。

Prismjsにした理由

僕がWordPressのシンタックスハイライトに求めていたものは下記でした。

  • php、ruby、java、bash、yaml、apache、html、javascript、dockerのシンタックスハイライトが欲しい
  • 自分が使っているテーマであるStinger8と相性が良い
  • WordPress5のGutenbergエディタと相性が良く、動きが安定している
  • デザインがqiitaと似ているのが良い
  • ファイル名をコードの上に表示させたい

色々と周り道をしたんですが、上記全てをPrism.jsで満たすことができました！

ただ、ファイル名のをコードの上に表示する機能はPrismjsには無かったので、それは自分でスタイルを追加しました。これは後半で説明します。

Prismjs以外にも下記プラグインを入れて暫く使ってみたんですが、Gutenbergエディタとの互換性、Stinger8との相性、サポートしている言語の数等を考慮に入れた結果、Prismjsが一番自分の要望にはマッチしていていました。

下記、それぞれの選ばなかった理由です。

Crayon Syntax Highlighter

Gutenbergエディタで正常に動作しなかったので、問題外でした。

Enlighter

デザインが自分が求めているqiita風じゃなかったのでやめました。また、PrismjsがサポートしているDocker等がサポートされていなかったのも理由です。

※デザインが好きで、対応言語が自分とマッチしているのであれば、Enlighterプラグインはおすすめです。Gutenbergエディタに対応していて使いやすいです。

WP Code Highlight.js

Stinger8のスタイルと相性が良くなかったです。シンタックスハイライトがすごみ見づらくなりました。

Prism.jsのインストール方法

さて、ここからはPrism.jsをWordPressにインストールする方法を紹介します。

まずは、下記にアクセスしましょう

https://prismjs.com/download.html

すると、下記の項目があります。

  1. Compression level
  2. Core
  3. Themes
  4. Languages
  5. Plugins

一つずつ順を追って説明していきますね。

1. Compression level

開発用のDevelopmentバージョンか、サイズを縮小したMinifiedバージョンかを選択します。ここはMinifiedバージョンを選択しましょう。

2. Core

Coreが選択されている状態だと思いますので、そのまま何もせずにスキップして大丈夫です。

3. Themes

ここでは、どのようなデザインにしたいかを決めます。要はデザインテーマですね。僕のブログではOKADIAを使っています。

4. Languages

ここではシンタックスハイライトしたい言語を選択します。
Select allで全ての言語も選択可能ですが、容量が大きくなるとウェブサイトの読み込みが重くなってしまうので、自分が使用する言語だけを選択することをオススメします。

自分は下記言語を選択しました。

  • Markup + HTML + XML + SVG + MathML
  • CSS
  • C-like
  • JavaScript
  • Apache Configuration
  • Bash + Shell
  • Ruby
  • CSS Extras
  • Markup templating
  • Docker
  • Ini
  • Java
  • PHP
  • JSON
  • PHP Extras
  • SQL
  • Python
  • Swift
  • YAML

※自分が選択した言語はダウンロードしたcssファイルの上部に記載してあります。なので、言語を追加したい時などは、cssファイルを見ながら選択すると選択忘れが無くなると思います。

5. Plugins

ここでは、プラグインを選択します。
僕が選んだものは、下記です。

Line Highlight

指定した行にハイライトを付けてくれるプラグインです。
詳細は下記ページを参照して下さい。

https://prismjs.com/plugins/line-highlight/

Line Numbers

行数を表示してくるプラグインです。
表示非表示を切り替えれたり、指定行のみ出力できたりします。
詳細は下記ページを参照して下さい。

https://prismjs.com/plugins/line-numbers/

Copy to Clipboard Button

オンマウスすると右側にCopyボタンを出してくれます。
そして、そのボタンをクリックするとクリップボードにソースコードをコピーしてくれます。

Toolbar

「Copy to Clipboard Button」を選択すると自動で選択されます。

Prism.jsの簡単な使い方を紹介します

PHPの場合(行数表示あり)
<pre class="line-numbers"><code class="language-php">if ($name == "henpera") {
    echo "あなたは、はんぺらです";
} else {
    echo "あなたは、はんぺらではありません";
}</code></pre>

これを表示すると下記になります。

if ($name == "henpera") {
    echo "あなたは、はんぺらです";
} else {
    echo "あなたは、はんぺらではありません";
}
PHPの場合(行数表示なし、２行目をハイライト)
<pre data-line="2:" ><code class="language-php">if ($name == "henpera") {
    echo "あなたは、はんぺらです";
} else {
    echo "あなたは、はんぺらではありません";
}</code></pre>

これを表示すると下記になります。

if ($name == "henpera") {
    echo "あなたは、はんぺらです";
} else {
    echo "あなたは、はんぺらではありません";
}

簡単ですね。

Prism.jsのデザインをカスタマイズ

自分の要望として、ファイル名を上部に表示したいというものがありました。

そこで、下記サイトを参考にファイル名を表示するスタイルを作成しました。

https://mndangler.net/2017/04/syntaxhighlighter_prism-js/

上部にファイル名を表示するスタイル
.prism-title{
    background: #4e4e4e;
    font-size: 90%;
    display: inline-block;
    color: #eab4b6;
    letter-spacing: 0.1em;
    padding: 3px 15px 0px 15px;
    border: 1px solid #4e4e4e;
    border-radius: 0px 5px 0px 0px;
}

下記使い方です。

<span class="prism-title">ここにファイル名表示</span>
<pre><code class="language-php">if ($name == "henpera") {
    echo "あなたは、はんぺらです";
} else {
    echo "あなたは、はんぺらではありません";
}</code></pre>

また、Stinger8と統合すると微妙な表示崩れがあったので、下記スタイルも追加しました。

Stiger8と統合した場合の表示崩れを修正するスタイル
pre[class*="language-"] {
    margin-top: 0px !important;
    margin-bottom: 20px !important;
    border-radius: 0em !important;
}
code[class*="language-"] {
    padding: 0px !important;
    margin: 0px !important;
}

まとめ

シンタックスハイライトがあれば、コードの可読性は飛躍的にアップしますね。

逆に、無いとメチャクチャ見にくいですよね。。。

自分の好きなデザインになると、意味もなく自分のブログを何度も見返してしまいます笑

暫くブログを続けたら、自作のWordPressのテーマも作ってみようと思ってます。

やっぱりオンリーワンのデザインにしたいですからね！

RELATED POST