あんまりソースコードとかをブログには書いてこなかったのですが、最近ブログをリニューアルしてからWordPressの記事中にソースコードを書きたいことがたくさんになってきました。
やっぱり自分が困っていることは他人も困ってると思うので、そういう方のためになにか一つでもヒントになればと感じたので、ソースコードを書き記していくことにします。
自分自身の忘備録としてもソースコードを残していこうと思いましたし。
ということでWordPressの記事中でソースコードを書くために、「Highlighting Code Block」というプラグインを導入しました。
目次
Highlighting Code Block
ソースコードをそのまま書いたとしても何行目かもわからずに味気ないものになってしまいます。
pi@raspberrypi:~ $こんな感じ。
普通の段落と何ら代わり映えしないです。
なので、これをかっこよく表現するためには色々と工夫が必要でした。
しかしながら、今回のプラグイン、「Highlighting Code Block」は非常にかっこよく表現してくれます。
pi@raspberrypi:~ $こんな感じ。
めちゃめちゃ良いですね。
今後いろんなソースコードを書いていこうと思うので、重宝しそうです。
ちなみにこのプラグインの作者、僕が今使っているワードプレスのテーマのSWELLの作者さんが制作したもの。
SWELL
SWELL | シンプル美と機能性の両立 - 圧倒的な使い心地を追求するWordPressテーマシンプル美と機能性の両立させ、圧倒的な使い心地を追求するWordPressテーマ - 『SWELL』の公式販売サイト。 最新のブロックエディター『Gutenberg』にも完全対応。プログ...
なるほどこれは使いやすい。
ということで改めて、「Highlighting Code Block」をおすすめします！！
WordPressの管理画面から「Highlighting Code Block」で検索するか、下記からダウンロードしてプラグインの新規追加からアップロードしてあげれば使えます。
WordPress.org 日本語
Highlighting Code Blockprism.js を使用したシンタックスハイライト機能付きのコードブロックを追加します。 (Gutenberg とクラシックエディター共に利用可能)
ということで早速記事を編集しました。
あわせて読みたい
Raspberry Pi Zero WHをWindowsからVNC遠隔操作で起動させる（モニター・キーボード・マウス不要）Raspberry Pi Zero WHが届いたので、早速起動させてみようと思います。ただ、Raspberry PiにはPCで言うところのHDDやSSDに当たるものがついていません。そこでどうする...
今後どんどん使ってまた使い方などもブログに書いていきたいと思います。
