WordPressでprismjsを利用する方法を考えた

    >


Q: 何いってんの?

僕は基本、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参考

Extending Prism ▲ Prism

言語

Prism




お困りですか?この記事で紹介していることをマンツーマンで指導、解説、代行します。まずはお気軽にお問い合わせください。


Close Menu