WordPressでソースコードを書くなら「Urvanov Syntax Highlighter」がおすすめ！【ブロックエディタ対応】

こんな悩みにお答えします。この記事を読み終えたころには、

がわかります！

本記事では以下の方を対象としています。

• WordPressでソースコードを載せる記事を書く予定の方
• WordPress（ver5.0以降新機能）ブロックエディタで記事を作成している方
• 「Urvanov Syntax Highlighter」をインストールしたけど基本的な使い方が分からない方

「Urvanov Syntax Highlighter」インストール方法

インストール方法はとっても簡単です。

「プラグイン」⇒「新規追加」で「Urvanov Syntax Highlighter」を検索してインストールします。そして、「有効化」するだけです！

「Urvanov Syntax Highlighter」使い方

使い方もとっても簡単。記事作成画面で、「ブロックの追加」→「ブロックの検索でhと入力」→「Urvanov Syntax Highlighter」を選択、「コードをコピペ」。以上。

下の画像のように表示されます。これが基本設定です。

それっぽくなりましたよね！

タイトル等は必要に応じて入力すると良いです。

他にも、設定を変更すると様々なエディタを模した画面を表示させることができます。一部を載せておきますね！

Xcode

Github

Terminal

最初に設定しておくと良い項目

設定項目が多くて、どうしたらいいか分からないという方のために、「ここだけ設定しておくと楽」という項目をお伝えします。

今から紹介するのはデフォルトの変更の仕方です。ブロックエディタの中でも変更は可能です。

上記の3つです。毎回毎回設定を変更しても良いのですが、面倒ですよね。

デフォルトを変更します。変更方法は以下の通りです。

「設定」⇒「Crayon」をクリック。（ここではなぜかCrayonとなっています）

下記のような画面が表示されます。ここをいじると、デフォルトを変更できます。

テーマの変更

テーマをあらかじめ設定しておくと、今後楽になります！

リアルタイムプレビューを有効にしていれば、各エディタのデザインが見れますのでお好みで！

ツールバーの表示設定

デフォルトはツールバーの表示が「マウスオーバー時」になっています。実際にやってみるとわかるのですが、これは結構煩わしいです。「常に表示」もしくは「表示しない」のどちらかにしておくと良いです！

使用言語の設定

使用言語はデフォルトでも勝手に決めてくれるのですが、念のため設定しておくと良いでしょう。

多くの言語をカバーしているので、基本的に使用している言語はあるはずです。

以上で基本的な設定は終わりです。慣れてきたら、他にもご自身で必要だと思った機能をデフォルト設定にしてくと良いです。

まとめ

Urvanov Syntax Highlighterはとても便利なプラグインです。Wordpressでエンジニア関連の記事を書く場合は必須だといってもいいです。

本記事で紹介したことがWordpressを始めたばかりの方の役にたてばと思います。

最後までありがとうございました！

「Urvanov Syntax Highlighterエディタテーマ・フォント　サンプルイメージ一覧」で、フォントやエディタのサンプル一覧を載せているので、良かったら参考にしてください！