WordPressの記事中にソースコードを書きたい場合は「Highlighting Code Block」を使う

あんまりソースコードとかをブログには書いてこなかったのですが、最近ブログをリニューアルしてからWordPressの記事中にソースコードを書きたいことがたくさんになってきました。

やっぱり自分が困っていることは他人も困ってると思うので、そういう方のためになにか一つでもヒントになればと感じたので、ソースコードを書き記していくことにします。

自分自身の忘備録としてもソースコードを残していこうと思いましたし。

ということでWordPressの記事中でソースコードを書くために、「Highlighting Code Block」というプラグインを導入しました。

Highlighting Code Block

ソースコードをそのまま書いたとしても何行目かもわからずに味気ないものになってしまいます。

pi@raspberrypi:~ $

こんな感じ。

普通の段落と何ら代わり映えしないです。

なので、これをかっこよく表現するためには色々と工夫が必要でした。

しかしながら、今回のプラグイン、「Highlighting Code Block」は非常にかっこよく表現してくれます。

pi@raspberrypi:~ $

こんな感じ。

めちゃめちゃ良いですね。

今後いろんなソースコードを書いていこうと思うので、重宝しそうです。

ちなみにこのプラグインの作者、僕が今使っているワードプレスのテーマのSWELLの作者さんが制作したもの。

https://swell-theme.com/

なるほどこれは使いやすい。

ということで改めて、「Highlighting Code Block」をおすすめします！！

WordPressの管理画面から「Highlighting Code Block」で検索するか、下記からダウンロードしてプラグインの新規追加からアップロードしてあげれば使えます。

WordPress.org 日本語

Highlighting Code Block prism.js を使用したシンタックスハイライト機能付きのコードブロックを追加します。 (Gutenberg とクラシックエディター共に利用可能)

ということで早速記事を編集しました。

あわせて読みたい

Raspberry Pi Zero WHをWindowsからVNC遠隔操作で起動させる（モニター・キーボード・マウス不要） Raspberry Pi Zero WHが届いたので、早速起動させてみようと思います。 ただ、Raspberry PiにはPCで言うところのHDDやSSDに当たるものがついていません。そこでどうする...

今後どんどん使ってまた使い方などもブログに書いていきたいと思います。