WordPressでprismjsを利用する方法を考えたのでそれについて紹介します。
僕は基本、HTMLタグを書かない。
WordPressを使っている人の中には、WordPressをテキストエディタとして使用し、登録したHTMLタグをワンクリックで挿入し閉じることができる便利なプラグインを利用している人もいることだろう。
しかしそれでも僕はそれらの機能を使うきにはなれない。
理由はいろいろあるが、一番は面倒だってことですが。二番目は管理が面倒になる。
じゃあ普段どうしてるの?Markdownでしか書きません。
コードタグなら、
\```
\```
これだけです。
\```rb
\```ruby
こういう書き方もしません。面倒なので。
ですが、prismjsを使う以上、言語は指定しなきゃいけませんので、ruby
くらいだったら書くようにします。
…ですが、それを書いただけでprismjsはレンダリングされませんでしたので、じゃあどうやって
\```ruby
だけで極力markdownを崩さずにprismjsを加えられるかっていうのが今回の課題です。
考えたこと
CSSクラスの継承
CSSのinheritanceは可能なのか?っていうこと。これができれば、タグにlang-rubyとかのCSSを入れてしまうことができるわけで。
結論:できない
プラグインの利用
じゃあ、prismjsをwordpressで使いたいって思った有志がなんか良いの作ってくれてないだろうかって思ってプラグインを調べた。
が、バグってて使えなかった。
wp plugin install ank-prism-for-wp
wp plugin activate ank-prism-for-wp
wp plugin deactivate ank-prism-for-wp
PHPで正規表現で本文のタグにCSSを付け加える
HTMLタグのhookとかないのかなってしらべたけどやっぱりなかった。
じゃあob_start(“callback”);でpregするのがいいかなぁと思ったけどさすがに面倒なので却下。
JavaScriptで動的に変えちゃう
最終手段。一番安定している手段でもある。
ただ、こうまでして僕が内部で処理したかったのには理由がある。
動的にJavaScriptで変えちゃうと、SEO的によろしくない場合があるからだ。
悪影響ってことはないが、せっかく色付けしてもそれがロボットに伝わらない。
なので様々な処理は極力JavaScriptは使わないようにしているのだが、まぁ今回のような場合はユーザビリティの向上も見込めるので、JSで実装したいと思う。
ソースコード
$(document).ready(function(){
// console.log('yy') ;
for (i = 0; i < document.querySelectorAll('article code').length; i++) {
["ruby","php","markdown","autohotkey","bash","markup","css","javascript","java","kotlin","json","haskell",
"sass","scss","sql","batch","python","lua","apacheconf","git","vim","go","yaml","perl","csharp","erb"].forEach(function(value){
if ( document.querySelectorAll('article code')[i].classList.value ) {
if ( document.querySelectorAll('article code')[i].classList.value.split(/\s/).indexOf(value) > -1 ){
// console.log( `including ${value}`)
document.querySelectorAll('article code')[i].classList.replace( value ,`lang-${value}`)
document.querySelectorAll('article code')[i].classList.add('line-numbers') ;
}
} else {
document.querySelectorAll('article code')[i].classList.value = "language-markup" ;
document.querySelectorAll('article code')[i].classList.add('line-numbers') ;
}
})
}
Prism.highlightAll() ;
});
API参考
言語