WP Code Highlight.js を導入しました

WP Code Highlight.js を導入しました

 BlogCat のプログラミング日記の記念すべき(?)初回記事です。
 BlogCat は 数学サイト でも不定期に日記を掲載しているのですが、今後は Python に関することは、こちらで書こうと思っています。とはいえ、気が向いたら、あっちで書くこともあるかもしれないです(← はっきりしろよ)。

WP Code Highlight.js を導入しました

 で、初回は「WP Code Highlight.js を導入しました」というお話なのですが、サイト運営なんかとは無縁なまともな人は「???」となって、ここから出て行こうとするかもしれないですけど、出て行かれる前に急いで説明します。掻い摘んで言えば、

  プログラミングのコードをきれいに表示させるプラグイン

のことなんですね、はい。ここでまた「プラグイン???」となって、当サイトから出て行こうとする人がいるかもしれないので、もうちょっと補足すると、プラグインとはサイト(正確に言えば WordPress というサイト管理システム)をパワーアップさせちゃうという便利な道具なのです。

 ネットには似たような機能をもつプラグインというのがいっぱいあって、そこから何を使えばいいのかってことは、これまたあちこちググって情報収集してから決めるんですけど、このサイトを始めたときには Crayon Syntax Highlighter というプラグインを導入していました。この界隈では結構有名な代物です。しかし、ネットでは
「 Crayon は重いよ~。使わないほうがいいよ~」
という情報があちこちに散見されたので、自分ではさほど「重くなった」という実感はなかったのですが、「重い、重い」と言われているうちに、なんだか本当にサイトが重くなったような気がして(← 人の意見に流されやすい)、
「重いのはやだから、他のにしよう」
という決断にいたったのであります(←主体性に乏しい)。というわけで、こちらもまた業界(?)では有名な

  WP Code Highlight.js

を導入することにしたのです。確かに Crayon に比べると機能が簡素で、サクサク動く感じがします。

WP Code Highlight.js は一筋縄ではいかない

 ところが! いざこのプラグインを使い始めてみると、次々と問題が発生して、その対応に追われることになったのです。

 最初の問題はコードをハイライトしてくれないってことです。ハイライトというのは、コードの記号を種類別に色分けしてプログラマーを助けてくれる機能のことです。でもハイライトされない。WP Code "Highlight".js なのにハイライトされない。泣きたくなりましたよ、本当に。

 原因はもともとサイトの CSS(文字や段落などのデザインを決めるコード)に書かれていた、「コードはこういうふうに表示しようね」という箇所と競合していたことでした。それをばっさり切り取ると、ハイライトされたコードが現れました。ようやくこれで解決かと思っていたら、よく見ると何かがおかしい。たとえば、こんな感じ。

 プラグイン WP Code Highlight.js

 ハイライトされているのもあれば、されていないところもあって、ちぐはぐに ......

 思わず「何でやねん!」(← 関西育ち)と叫びましたよ。
 もちろん本当に叫んだのではなく、心の中で叫んだのです。
 家族が不審に思うといけないから。
 それはともかく、原因を探っていると、コードを埋め込むときに使うコード(ややこしい)の書き方が問題だったようです。プラグインの説明によると、
「特に言語を指定しなくても、こっちで自動的に判断するよ」
とあったので、それを真に受けて言語指定を怠っていたのです ......
「できてないじゃん。自動判断できてないじゃん」
 ちょっと切れそうになりながらもマニュアルを見て言語 (Python) をきっちり指定しておくことにしましたが ......

「 ...... 全然直らない。WP Code Highlight.js、あかんわ」
 もはやこれまでかと思いつつ、ネットで情報を集めてみると、
「 class="language-Python" と指定しよう」
と書いてありました。な、な、なんですと~!? マニュアルには
「 class="Python" と指定しましょう」
とあったけど!?
「おのれ~。もう2度と英語のマニュアルなんて信用するものか~」
という意味不明な逆恨みをしつつ、全ての記事を書き直している最中なのです。単調で疲れる作業です。貴重な時間を返してほしい ...... とにかく、そんなわけで、この単純労働が終わったら新しい記事を書くので、しばらくお待ちください。
 

ソースコードのフォントの選択に迷いました

 無事にプラグインを決めたあとは、ソースコード用のフォントをどれにしようかと迷いました。評判の Ricty や Takaoゴシック、Sorce Han Code JP など色々試してみましたが、実際に Web で表示させてみると、どうにもしっくりこないんですよね。自分でコードを書くには良いのですが、Web 上で見やすいフォントとなるとまた別なのです。あれこれ右往左往した挙句、結局は "VLゴシック" という伝統的なフォントに落ち着きました。料理と同じで、凝ったフォントもたまにはいいけど、毎日眺めるなら、やっぱり普通のフォントが一番なのです。

コードをハイライトしたくないときは?

  もう1つだけ問題がありました。入力コードをハイライトするのはいいとして、実行結果までハイライトされると困ってしまいます。

True

 ハイライトするコードと、ハイライトしないコードを分けるにはどうしたらいいのかと、あちこち探し回って、ようやく有益な情報に辿り着きました。ハイライトしたくない要素に nohighlight というクラス属性値をつければ良いとのことです。
「なんと! そんな簡単なことでしたか~!」
と喜び勇んで試してみると ......

True

 背景色まで消えてしまいました。
「何もかもを無効にしろと言ってない!」
とまた腹を立てながらも、あれこれ考えながら、ようやく解決策を見つけました。code ではなく pre のほうに、css で設定した背景を属性でつけて、なんとかなりました。

True

 めでたし、めでたしです。