twitter youtube tumblr flickr rss mail

category: computer

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


本記事のタイトルとURL をコピーする

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

Discover gists · GitHub
https://gist.github.com/discover

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

ググってみると「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 とかは特に記入しなくてもいい。


書籍