ブログの運営にAFFINGER5 EXを使っている。
つい最近まではAFFINGER5 WINGだったのだが、一生懸命コードをいじってみても記事のカードデザインでの表示が上手くいかないので折れた。そんなまでして導入したのに実は上手くいっていない。まぁ、その話はまた今度にしよう。
この記事はプログラミング完全初心者のサイト管理者があれこれ調べながらサイトの改造をした内容を記録するためのもの。Wordpressテーマにアフィンガーを使っている前提なので必ずしも汎用的な内容ではない点に注意してほしい。
今回、こうしたサイト改造の文章を書くにあたって、必要となったことがある。それが、ブログの文章中にコードをきれいに埋め込む方法。調べてみたら、code syntax コードシンタックスとか単純にシンタックスとかいうらしい。正直、単に文章を書くための準備なのでそこまでこだわりはなかった。なので、簡単にプラグインでどうにかなるならそれでいいか、と思ったのだが、これがまた面倒くさかった。
シンタックスを使ってコードをきれいに見せる
サイトの改造の過程で様々なサイトでコードを見ていたので、Wordpressを使ってコードをきれいに見せる方法があるんだろう、ということは予め知っていた。正直な話、WordpressやAFFINGER5の標準のエディターで出来ることだと思っていた。で、やってみたら出来なかった。
そこで調べてみたらどうやらシンタックスという奴を使う必要があるらしい。方法は以下の二つが見つかった。
- プラグインを使う
- prism.jsを使う
普段であればプラグインを使うのは嫌なのでコードをいじる方法を選ぶのが、今回は何となく面倒くさそうだったのでプラグインを使うことにした。
これまたネットで調べてみると、Highlighting Code BlockとかCrayon Syntax Highlighterとかが出てくる。
とりあえず、この辺りから試してみることにした。
プラグインが使えない
サクッとプラグインを検索して、Highlighting Code Blockから試してみた。
結論から言うと、使えなかった。本来は出てくるはずのボタンがエディター上に表示されず、どうにもならなかった。この状態はCrayon Syntax Highlighterでも同じだった。
原因の究明をきちんとやっているわけではないが、どうにも他のプラグインやエディターの設定環境と関係がありそうに思える。
今の自分の環境は、AFFINGER5の要請もあってブロックエディターは使用せず、クラシックエディターにしてある。さらに定番のエディター拡張プラグインとしてTinyMCE Advancedをインストールしてある。このどれかなのか、全部の関係性なのかは分からないが、とりあえず、シンテックス用のプラグインが動かない。もしかしたらやり方が悪かったのかもしれないが、それは分からない。
仕方ないので別の方法に頼ることにした。コードをいじる方向だ。
prism.jsを使う、という選択
とりあえず、見つかったのがprism.jsというものを使ってシンタックスハイライトを実現する方法。
調べてみたら使い方などはいろいろなサイトが出てきて、それほど難しいものでもなかった。インストールまでの詳しい方法はいくらでも出てくるので「prism.js 使い方」とでもググってみて欲しい。
個人的におススメなのはこの2つ。
http://honttoni.blog74.fc2.com/blog-entry-292.html
インストール準備まではこの辺りのサイトを2つくらい読めばまず問題ないはずなので、ここでは割愛して、本当に問題になったAFFINGER5での使用の部分に話を進めたい。
AFFINGER5でprism.jsを使うための準備
まずダウンロードしてきた以下の二つのファイルを使っているテーマのディレクトリの直下にアップロードするところから始まる。
- prism.js
- prism.css
アップロードするディレクトリは有効にしているテーマの直下。なので、AFFINGER5で子テーマを使っているならaffinger-childというファイルの中になる。この段階で上記の二つのファイルを何かいじる必要はない。そのまま該当ディレクトリにアップロードすればいい。
問題になるのが、この次のステップだ。
この2つのファイルをディレクトリにアップロードしただけではまだこの機能は使えない。そこで、一部のファイルにコードを記述して使えるようにする必要がある。
https://prismjs.com/index.html#basic-usage
この記事の記載を参考にすると、基本的にcssファイルはheadのタグの中に、jsファイルはbodyタグの最後に記述する必要がある。記述するコードは説明しているサイトによってばらつきがあるものの、基本的にはこのサイトに従えば良さそうだ。
他のサイトを見ると、ヘッダーの構築ファイル内に書き込むのがいい、となっていたのでheader-type2.phpをいじってみればいいだろうとあたりをつけて、さっそく加工してみた。が、ここで最初の問題にぶち当たった。ご自身のAFFINGER5のヘッダーファイル (header.phpかheader-type2.php) を見てもらえればすぐわかることなのだが、このファイル、bodyタグが閉じられていない。ついでに言えばhtmlタグも同様に閉められていない。
cssファイルはheadタグ内で済むので特に問題はないが、jsファイルは</body>の直前に入れなければならないらしいので、これだとどこに入れればいいのか皆目見当がつかない。
仕方がないのでheader-type2.phpの最後の行に追加してみたりもしたが、ダメだった。
で、AFFINGER5管理の項目を見ていくと、「その他」の項目の一番下の方に「コードの出力」という項目があり、何とも都合のいいことに以下のような区分けもされている。
- headに出力するコード
- <body>直後に出力するコード
- </body>直前に出力するコード
今回の目的を考えれば、最初のところに
link href="css/prism.css" rel="stylesheet"の記述を、そして最後のところに
<script src="js/prism.js"></script>の記述をすればいいことになる。
これで完璧だろう、と意気込んで試してみたのだが、少なくとも自分の動作環境では上手く動かなかった。やはり原因は分からない。
仕方ないのでさらに調べてみたところ、どうやらfunction.phpに書き込む方法もあるらしいのでそちらを試してみることにした。
function my_prism() {
wp_enqueue_style( 'prism-style', get_stylesheet_directory_uri() . '/prism.css' );
wp_enqueue_script( 'prism-script', get_stylesheet_directory_uri() . '/prism.js', array('jquery'), '1.9.0', true );
}
add_action('wp_enqueue_scripts', 'my_prism');上記のコードをaffinger-child内のfunction.php内の任意の部分に追記したところ今度はきちんと動作してくれた。
使い方の落とし穴
ただ、実はもう一つ落とし穴にはまっていた。
このprism.js、使用に際して<pre>タグと<code>タグでシンタックス表示したいコードを囲む必要があるのだが、クラシックエディター内のビジュアルモードでは動作しない。知っている人には当たり前なのかもしれないが、コードの記入時にはテキストモードに切り替えて該当部分のコードを記入する必要がる。
いろいろインストールや設定は間違いなくやったはずなのに表示が上手くいかない、という人は確かめてみることをお勧めする。
あと、地味にハマるのが表示したコードの<>の囲み文字。
丁度うえで書いた
<script src="js/prism.js"></script>がまさにそれで、これをそのまま<>を使って書いてしまうといくらやってもうまくいかない。<pre>タグと<code>タグで囲っていても正規のコードの一部として認識されてしまうらしく、シンタックスでの表示が出来ずに延々と考えることになる。これを記載する場合には、<>を別の表現方法を使って記載する必要がある。
上記の場合は、
<pre class="line-numbers"><code class="language-html"><script src="js/prism.js"></script></code></pre>
として、＜＞をそれぞれ「<」と「>」で表記している。
これまた知っている人にとっては今更の話なのだろうが、素人な自分は散々ハマったのでここに書いておく。
