ワードプレスGutenbergで最近流行りの言語にも使えるシンタックスハイライトプラグイン紹介【Code Syntax Block】

どうもこんにちは。sgｗです。今日はエンジニアでワードプレスブログしてる人にはとっておきのCode Syntax Blockっていう、シンタックスハイライタープラグインを紹介します。

ちなみにそのプラグインはこちら。

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

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

使い方

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

プラグイン > 新規追加

Code Syntax Block を検索

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

はい、有効化。

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

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

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

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

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

今回は試しにReactのJSX。

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

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

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

例えばApp.jsとか。

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

sgw

フロントエンド

XFacebook

カナダのBCITとか言う短大卒業。その後４年ほどカナダでWEB制作系フロントエンドエンジニアとして働いて、今は東京で働いてるニキの雑記ブログ。カナダ留学、英語、WEB制作、ポイ活などなどを主に記事として書いてます。