どうもこんにちは。ちょっと急用で日本なうのsgwです。今日はエンジニアでワードプレスブログしてる人にはとっておきのシンタックスハイライタープラグインを紹介します。ちなみにそのプラグインはこちら。

シンタックスハイライターとは

ワードプレス内でコードを解説したりするときにあるとコードをおしゃれにしてくれるプラグイン。

使い方

この辺はいつもどおりですが、

プラグイン > 新規追加

Code Syntax Block を検索

Marcus Kazmierczak さんが作ったやつです。

はい、有効化。

その後は投稿から普段どおりに記事を書きます。

そこから左のプラスを押して、フォーマットをクリック。

そこからソースコードが出てくるのでそれを選択。

ブロックのところから言語を指定できます。

めちゃくちゃたくさん出てきます。

今回は試しにReactのJSX。

こんな感じで書き込みます。

すると特に何もCSS設定をしてなくてもハイライトしてくれます。見やすい。

Title for Code Block からタイトルをつけることもできます。

例えばApp.jsとか。

そんな感じです。Gutenberg対応で、簡単にコードハイライトできるのでぜひぜひ使ってみてください。それではC Yaaa!!!