sgw sgw

Fラン大卒の海外就職

英語、カナダ生活、ウェブサイト開発、学校とかいろいろ書いてます
sgw

sgw

2018年にバンクーバーの州立学校BCITを卒業してバンクーバーでコーダー兼デザイン業務みたいな仕事したあと就活兼フリーランスやって今はバンクーバーの制作会社でワードプレス中心のフロントエンドとして働いていますw

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

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

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

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

使い方

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

プラグイン > 新規追加

Code Syntax Block を検索

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

はい、有効化。

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

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

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

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

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

今回は試しにReactのJSX。

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

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

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

例えばApp.jsとか。

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

この記事が気にったらいいね!して下さい

SNSでsgwをフォローしよう!

コメントする

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