「WordPressに標準で付いているコード表示機能が使い勝手が良くないんだけど、おすすめのコード表示プラグインってないのかな？」
実はボク自身、今回紹介するプラグインの存在を知るまでは
ブロックエディターにある「コード」というメニューを使っていました。
h2 {
color: #333
text-align: center;
}もちろん、コードを表示するという機能は果たせていますが、なんていうかちょっとイケてない。。
しかもTabキーがインデントに設定されていないので、自分でスペースキーで頑張ってインデントしないといけないなど、エンジニアやプログラマーが当たり前にしていることができなくて
ちょっと使いずらいな、と思っていました。
そんな中、今回紹介する「Code Block Pro」というプラグインを見つけました。
Code Block Proを利用すれば、さっきのコードも
h2 {
color: #333
text-align: center;
}このように、オシャレに書くことができますし、視認性が良くなって見やすくなります。
Code Block Proの特徴
Code Block Proの特徴は、以下の通りです。
見た目がオシャレでかっこいい
1つ目に、「見た目がオシャレでかっこいい」です。
VSCodeのような見た目をしているので、普段から利用している人にとっては
かっこいいだけでなく親しみがあるデザインになっています。
しかも、ダーク背景なので厨二病的なデザインが好きな人にとっては好みなのではないでしょうか？
打ち間違いやエラーがないかが一目で分かる
Code Block Proでは、VSCodeなどのエディタと同様に
タグ名やプロパティを正しく書き込むとテキストの色が変わる使用なので
打ち間違いやエラーがあったらすぐに分かります。
つまり、白色から色が水色や薄い緑に変わっている時点で
その部分は、打ち間違いやエラーになっている可能性が低いことが分かります。
VSCodeで作成したファイルをローカル環境に反映させた場合や、Result画面で内容を表示させるCodePenなどとは違って
画面上で実際にエラーが起こってしまうわけでないですが
ブログなどで使用する際は、訪問者に間違った情報を与えるのはできるだけ避けたいので
色が変化する仕様はありがたいですね！
Code Block Proのインストール・使い方
ここからは、Code Block Proのインストール方法と、実際の使い方について解説していきます。
インストールするには、他のプラグインと同様で
既にインストールしているプラグインの画面から「プラグインを追加」を選択し、「Code Block Pro」と検索します。
下のプラグインをインストールし、有効化してください。
有効化できたら、投稿ページや固定ページなどにいき、ブロックエディタの「+」ボタンを押すか、「/」を押してからCode Block Proと検索します。
Code Block Proを選択したら、下のエディタのような画面が出ますので、後は中にコードを打ち込むだけです。
もし、Code Block Proを表示しても行番号が表示されない場合は
対象の表示を選択してから、「ブロック」にある「Line Settings」をクリックし
「Line Numbers」にチェックを入れれば、きちんと表示されるはずです。
まとめ
では、まとめです。
・Code Block Proは、VSCodeのような見た目のコード表示用プラグイン
・見た目がオシャレでかっこいいだけでなくインデントも打て、打ち間違いやエラー防止のためのテキスト色が変化する仕様付き
・行番号を表示する場合は、「Line Settings」から「Line Numbers」にチェックを入れる
使い勝手もいいので、ぜひCode Block Proをインストールして使ってみてくださいね。
このブログでは、Web制作に関する話題やコーディング、WordPressなどに役立つ情報を発信しているので
次回の記事もぜひ見てくださいね。
記事をSNSで拡散すると、有益な投稿をするアカウントだと思われ
フォロー数やいいね数が増えるかもしれません！
＼ 最新情報をチェック ／
コメント