WordPressプラグイン

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

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

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

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

使い方

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

プラグイン > 新規追加

Code Syntax Block を検索

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

はい、有効化。

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

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

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

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

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

今回は試しにReactのJSX。

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

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

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

例えばApp.jsとか。

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

COMMENT

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)