Crayon Syntax Highlighterからprismへの切り替え | そう備忘録

Crayon Syntax Highlighterからprismへの切り替え

by · 公開済み · 更新済み

Crayon Syntax Highlighter

このブログはWordPressで書いているのだがPythonのソースコードやshellコマンドの表示にはプラグインのCrayon Syntax Highlighterを使っている。

しかしこのプラグインは4年前から更新されておらずバージョンが2.8.4で止まってしまっている。

また先日PHPのバージョンを7.2から7.4に上げた際の正規表現の解釈の変更にCrayon Syntax Highlighterが対応しておらずページが表示されない等の問題が発生した。

結局crayon_langs.class.phpファイルを修正する事で対応をしたのだが今後のWordPressやPHPのバージョンアップへの追随を考えるとCrayon Syntax Highlighterを使い続けることはあまり良い選択肢とは言えないと思い、違う手法へ変更することにした。

環境

当方の現時点でのブログ環境は以下の通り。

Server

AWS（Amazon Web Services） EC2（Elastic Compute Cloud）

OS

Ubuntu Server 18.04LTS

PHP

PHP 7.4

CMS

WordPress Ver5.5

テーマ

Hueman Ver 3.6.1

プラグインかprismか

当初、違うプラグインへの乗り換えの前提で探していたのだがあまり良いプラグインが見つからなかった事とprism.jsが高速で良いとの記事も多かったのでprismに乗り換えることにした。

しかし簡単に乗り換えられると思っていたのだが若干ハマってハイライト表示がされなかったので備忘録の意味で記事にしておこうと思う。

同じような事をする人の参考になれば幸いです。

Prismのページ

最初にPrismのページで各種オプションを選択しながらJavascriptとCSSをダウンロードする。

圧縮レベルとテーマの選択

最初に圧縮レベル

  • Development version（Javascriptが開発用で未圧縮）
  • Minified version（圧縮済みのサイズの小さい本番用）

を選択する。

不具合のデバッグの為にJavascriptのソースコードを見る必要がある場合以外はMinified variosnで良い。

次にテーマを、

  • DEFAUT
  • DARK
  • FUNKY
  • OKADIA
  • TWIILIGHT
  • COY
  • SOLARIZED LIGHT
  • TOMORROW NIGHT

の中から選択する。

自分はTWILIGHTを選択したのだがThemesを選択して一番下までスクロールすると選択したテーマに応じたプレビューが表示されるので参考にできる。

言語の選択

次にコード表示に使用するLanguagesを選択する。

デフォルトで、

  • Markup + HTML + XML + SVG + MathML + SSML + Atom + RSS
  • CSS
  • C-like
  • JavaScript

が選択されている。

沢山選択するとそれだけ容量が増えてページの読み込みに時間がかかるので必要最低限の選択にしたい。

自分は上記の他に、

  • Bash＋shell（コマンド類の表示用）
  • C++
  • JSON
  • PHP
  • Python
  • SQL

を選択した。

尚、これは後から言語を追加してダウンロードしてする事もできる。

言語の選択

プラグインの選択

次に追加するプラグインを選択する。

これは以下の４つのプラグインを選択した。

  • Line Number（行番号を表示する）
  • Toolbar（上部にツールバーを表示する）
  • Copy to Clipboard Button（コピーボタンを表示する）
プラグインの選択

ダウンロード

最後に「DOWNLOAD JS」と「DOWNLOAD CSS」ボタンを押してjavascriptとCSSをダウンロードする。

JavascriptとCSSのダウンロード

JSとCSSの配置

ダウンロードしたJavascriptとCSSをサーバーに配置する。

前述したテーマの子テーマ用のディレクトリにjsとcssディレクトリを作成してそれぞれJavascriptとCSSを格納した。

[WordPressインストールディレクトリ]/wp-content/themes/hueman-child/js/prism.js
[WordPressインストールディレクトリ]/wp-content/themes/hueman-child/css/prism.css

hueman-childはテーマhuemanの子テーマのディレクトリ。

パーミッションは644を設定した。

sudo chmod 644 [ファイル名]

functions.phpの修正

親テーマのfunctions.phpを直接修正するとテーマのバージョンアップの際に修正内容が消えてしまうので子テーマのfunctions.phpに以下の２行を追加する。

functions.phpの修正

下記の２行を加えてheaderでprism.jsとprism.cssを読み込むようにする。

自分は最初のstyle.cssを読み込む所に追記してしまったが別functionでadd_actionで追加しても良い。

  wp_enqueue_style('prism-css', get_stylesheet_directory_uri() . '/css/prism.css',array('hueman-main-style'));
  wp_enqueue_script('prism-js', get_stylesheet_directory_uri() . '/js/prism.js');

wp_enqueue_styleの２つ目のパラメータのget_stylesheet_directory_uri()は子テーマのディレクトリ取得の際に使用する。

get_template_directory_uri()を指定している記事もあるが、こちらは親テーマのfunctions.phpに直接記述する際に使用する（親テーマの直接の編集はお勧めしない）

またcssを読み込む時にテーマによっては優先順位の関係でprism.cssが有効にならないケースが発生する（Huemanがそうだった）。

つまりprism.cssを読み込んだ後にhuemanのスタイルシートが読み込まれてprism.cssでの記述が上書きされてしまっていた。

cssは基本的に後から読み込んだ方が有効になるのでhuemanテーマのcssを読み込んだ後にprism.cssを読み込むようにwp_enqueue_styleの３つ目のパラメータでarray(‘hueman-main-style’)を指定している※。

※３つ目のパラメータでは先に読み込むCSSを指定できる

“hueman-main-style”の部分は自分のテーマのstyle名になるのだが調べる方法はChromeで記事ページを表示して右クリック、ページのソースを表示でHTMLのソースを表示する。

header部を追っていくとparent-style-css、child-style-cssに続いてhueman-main-style-cssを読み込んでいたので”hueman-main-style”（後ろの-cssは付けない）を指定した。

テーマスタイルシートの読み込み

functions.phpに上記を追記してページのソースを表示した際に下記の様にheadでprism.cssとprism.jsが読み込まれていればOK。

prism.jsとprism.cssの読み込み

追加CSS

プログラムのソースコード等の表示はそのままだと本文のフォントサイズと比較して大きめに感じたので追加CSSでフォントサイズと行の高さを低くすることにした。

prism.cssに直接手を加えると言語を追加して再度prism.cssをダウンロードした際にまた同じ修正をしなくてはならないのでテーマの追加CSSでフォントサイズの指定を行う。

WordPressのメニューから外観、カスタマイズ、詳細設定、追加CSSから以下のCSSを追記する。

追加CSS
/* Prism.css 変更分 */
code[class*="language-"],pre[class*="language-"]{
  font-size: 0.85rem;
  line-height: 1.2;
}

コードの書き方

記事でのコードの書き方は以下の通り。

<pre><code class=”lang-XXXX”>ここにコードを書く</code></pre>

XXXXの部分は言語を指定するのだが言語の一覧はこちらで確認して欲しい。

またlang-の部分はlanguage-xxxx (or lang-xxxx)とどちらでも良いように書いてあったがHuemanではlang-XXXXのみ有効だった。

languageはテーマで使用しているclass名と重なってしまっているのか、うまく動作しなかった。

これでちょっとハマった。

後、注意点としてはコード部分は>（大なり）や<（小なり）は記述できないので&gt;や&lt;等のHTML特殊文字で記述する必要がある。

Pythonのソースコードではビットのシフトで>>を使っているので注意したい。

移行方法

Crayon Syntax Highlighterを有効にした状態でHTML編集でコードを先に修正して一通り修正が終了後にcrayonを無効にしたいと思う。

それまでは前述の、

<pre><code class=”lang-XXXX”>ここにコードを書く</code></pre>

の記述をしてもcrayonプラグインが効くので表示はcrayonでのハイライト表示になる。

Crayonが有効になっている

crayonを無効にするとprism.cssでハイライト表示される。

無効にするとprism.cssでハイライト表示される

以上で今回の記事は終了とする。

最後に

この記事が何処かで誰かの役に立つことを願っている。

尚、当記事中の商品へのリンクはAmazonアソシエイトへのリンクが含まれています。Amazonのアソシエイトとして、当メディアは適格販売により収入を得ていますのでご了承ください。

タグ:

souichirou

やった事を忘れない為の備忘録 同じような事をやりたい人の参考になればと思ってブログにしてます。 主にレゴ、AWS（Amazon Web Services）、WordPress、Deep Learning、RaspberryPiに関するブログを書いています。 仕事では工場に協働ロボットの導入や中小企業へのAI／IoT導入のアドバイザーをやっています。 2019年7月にJDLA（一般社団法人 日本デイープラーニング協会）Deep Learning for GENERALに合格しました。 質問は記事一番下にあるコメントかメニュー上部の問い合わせからお願いします。

質問やコメントや励ましの言葉などを残す

名前、メール、サイト欄は任意です。
またメールアドレスは公開されません。