概要
このブログはWordPressで構築されています。WordPressのプラグインの中に、コードを見やすく表示してくれるCrayon Syntax Highlighterというものがあります。これを使っているんですが、提供しているplainタグの挙動が不思議で苦労したので備忘録として書きます。
困ったところ
今まで意識せずに使っていたのですが、一個前の記事を書いていて、プレビューをしたときに
[plain~]
$ sudo hoge hoge
[/plain~]
のような表示になってしまうことに気がつきました(~は切り取って読んでください)。これは、正常な表示であれば、
[plain]
$sudo hoge hoge
[/plain]
となるはずです。
ゴリ押しました
原因ハッキリ分かっていないんですが、以下のものを挿入するとその記事のページのplainタグが正しく機能するようになりました。
aaa
Crayonで提供されているコードビューです。<pre>タグで記述されます。従って、
記事ページのどこかに<pre>タグのブロックがあればplainタグが機能する
っぽいです。よくわかりません。コードビューとplainタグを同時に使う記事だったらなんら問題はないのですが(今までの記事はそうでした)、一個前の記事のような、plainタグだけ使いたい記事のときには困ります。そこで編み出したゴリ押し解決策が
適当なところに
<div style=”display:none;”><pre>hoge</pre></div>
を挿入する
ことです。<pre>タグの中に適当な文が入っているのは、Wordpressのビジュアルタブに移動したときに、innerTextの無いタグが消えるっぽいので、それ対策です。このページにも入ってます。一個前の記事にも入ってます。
結果
天才的解決法でとりあえず解決しました。いや、よくわからないで使ってる状態を続けるのは全くもって良くありませんね。というか、こんなアウトプットしてたらかなりのマイナス評価食らいそう。とりあえず、別のまともな解決方法を探します。なかったら別のプラグインに差し替えます。今なら記事の数もそんなに多く無いし、大した作業量では無いでしょう。
追記(2016/09/20)
どうやら<pre>タグを検知して動的にヘッダにCSSを追加してくれるらしいです。私のゴリ押し解決方もあながち間違っていなかった感じがしますね。以下の画像左側がpreタグ有りのページ、右側が<pre>無しのページのソースコードです。
子テーマ作って各ページにあらかじめ透明な<pre>タグ入れとくようにするとか、プラグイン側をいじってcrayon-cssがplainを機能させるようにするとか、まあそこら辺をやれば楽になりそうですね。