WordPressでソースコードを美しく。あれ？PrismとLION MEDIAの相性が悪い？

2018.06.27

　プログラムのソースは、色無しのテキストファイルだと非常に読みづらいです。メモ帳にコピーしたソースコードなんて、目が痛くなってしまいます。そこで、きれいに表示するプラグインを検討しました。
　でも、これが、なかなか難しい。どれも、一長一短。好みの問題だと思います。

　(1)プラグイン系
　　（機能豊富、遅い、プラグイン同士の相性の影響大）
　　・Crayon Syntax Highlighter：超有名、更新が2年前
　　・SyntaxHighlighter Evolved：超有名
　　・Prism Syntax Highlighter
　　・APH Prism Syntax Highlighter

　(2)ライブラリー系
　　（機能シンプル、速い、相性の影響少ない？インストール大変）
　　・google-code-prettify：対応言語が比較的少ない。更新頻度が少ない。
　　・highlight.js :行番号は出ない。
　　・Prism：行番号表示あり。

　(3)その他
　　・Gist：（機能シンプル、速い、プラグインとの相性少ない）
          （Gistの元は、ソースコードの共有サービス。その共有コードを貼る）

そして、ここから迷走が始まってしまうのです。

(1)　SyntaxHighlighter Evolvedをインストール。

　「プラグインとの相性と言っても、多分、大丈夫。（根拠のない楽観）」「速度よりも操作性」「最近更新されてる方が安心」と考えて、SyntaxHighlighter Evolvedをインストール。
　しかし、SyntaxHighlighter Evolvedは、TinyMCE Advancedとの相性が悪かった。ビジュアルモードに切り替えた途端に、<pre></pre>が、最初と最後に挿入される。OH! NO!
　ビジュアルモードが使えないのはいやだ・・・。

(2) Prism Syntax Highlighterのインストール
　「プラグインとの相性が悪いとはこのことか。」「でも、ライブラリー系も、インストールが難しそう。」「おっ、Prismって、プラグインもあるんだ～。これにしよ！」ということで、Prism Syntax Highlighterをインストール。
　しかし、コードの背景が黒い書式を選んでも、「背景が白くなる。」「行番号が表示できない。」という不具合がでて、断念。

(3) APH Prism Syntax Highlighterのインストール
　「APH Prism Syntax Highlighterなら、もしかしたら大丈夫かな～」と試してみたら、同じ症状が出ました。TinyMCE Advancedを無効にしても効果なし。
　もしかしてと思い、LION MEDIAを他のテーマに変えると、やっと表示できました。ふ～。
　LION MEDIAのどこかの設定を変えれば、共存できるのかもしれない。でも、解決法を見つけられませんでした。LION MEDIAの評判がすごくよかったので、これを使いたかったのですが、私の場合、コードをしっかり表記できる方が大切です。
　なお、Crayon Syntax Highlighterは、LION MEDIAでも使えているようですが、一連の相性問題で機能がシンプルな方がよいと考え直しました。別のテーマを探します。

(4) Prism Syntax Highlighterを採用。
　Prism Syntax Highlighterと、APH Prism Syntax Highlighterを比較すると、Prism Syntax Highlighterは、ライブラリー系のPrismとテキストモードの記述が同じになります。一方、APH Prism Syntax Highlighterは独自の表記です。同じ表記なら、ライブラリー系への移行もできるので安心です。ダウンロード数もPrism Syntax Highlighterの方が多く、高い。Prism Syntax Highlighterに決定！

for i in range(100):
    print(random.randint(0,10))

やった！できました！

 

　結構、大変ですね～。相性問題が頻繁に生じるし、プラグインが更新されつづける保証もないし、不安定ですよね。なんとなく、この世界の雰囲気がわかってきました。

コメント