WordPress でソースコードを表示する

2020/12/30 Wed 05:53 · 1 min read · computer ·

これまで WordPress の投稿でソースコードを綺麗に表示するのに苦労していた。code タグはタグで囲えばいいんで簡単だが、スペースやタブはうまく再現されない。GitHub Gist は綺麗に表示できるが面倒。

そこでプラグインを活用することにした。

ググってみると「Crayon Syntax Highlighter」を使っているサイトが多いようだが、現在は更新が止まっており、その後続版の「Urvanov Syntax Highlighter」が公開されていることを知った。

Urvanov Syntax Highlighter – WordPress plugin | WordPress.org
https://wordpress.org/plugins/urvanov-syntax-highlighter/

プラグインをインストールすると、エディタで「crayon」のアイコンをクリック。

細かな設定ができるが、とりあえず文字色が付くのをやめるには一番上の「Don't Highlight」をチェックすればいい。それと行数を表示させないようにするには「Lines＞Display line numbers by default」のチェックを外せばいい。

Code に表示させたいコードをペーストし、Add をクリックすれば設定完了だ。Title とかは特に記入しなくてもいい。