機能 ショートカットキー
リファレンス(参考URL)一覧へ移動 R
記事URLをMarkDownとしてコピー Ctrl+M
前のコードタグへ移動 Ctrl+←
次のコードタグへ移動 Ctrl+→
ヘルプを表示・非表示 H
Tips
- ショートカットキーは記事上で有効です。ヘッダー/フッター付近では機能しないことがあります。
- コードタグ移動機能がうまく動かないときは、Shift+F5でページを更新してみてください。
- このウィンドウを閉じるには、Hキーをもう一度押してください

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で実装したいと思う。

ソースコード

```javascript

$(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](https://prismjs.com/extending.html#api)

言語

[Prism](https://prismjs.com/#languages-list)

この記事で欲しい情報が見つからなかった方へ

この記事の更新情報がある場合があります。
この記事は以下の記事とも関連性があると思われます。

WordPressブログを雛形だけコピーしてポートフォリオに加える方法
WordPressにSNSシェアボタンを実装しました [メタ]
WP-CLIでサイトアドレスとWordPress アドレスのURLをSSH経由で変更
SQLでWordPressの記事ごとのメタタグ(メタキーワード)を簡単に確認/編集する
SQLでWordPressの記事を正規表現検索してMarkDown形式にする – 簡単にWordPressブログの記事リンクを取得する方法
WordPress URLによって404ページの内容を変更する
SQLでWordPressで非公開の記事を特定して対処する


管理人の方針で、既存の記事の編集はせず、新しい情報や大きな既存情報の更新があった場合には、新しい記事として公開することになっています。
当記事で欲しい情報が見つからなかった・解決に至らなかった場合、これらのリンクがお役に立てるかも知れません。

どうやってこの関連記事を生成しているの?
この機能のPHPソースコード(2500行)

コメントを残す

Close Menu