ワードプレス でソースコードをソースコードとして表示するためのプラグイン「Highlighting Code Block」

ソースコードをきれいに表示する

例えば

HTMLでは「段落」の意味を持たせるために
<p>こんにちは</p>
という書き方をするんですよ。

と書こうとして、そのまま記事編集をしてしまうと

HTMLでは「段落」の意味を持たせるために
こんにちは
という書き方をするんですよ。

このようになってしまってなんのことだかわからなくなります。

HTMLに限らず、CSSやその他のソースコードをきちんと表示したいときに「Highlighting Code Block」を導入しておくと便利です。

「Highlighting Code Block」のインストール

ワードプレス メニューから　プラグイン→新規追加
Highlighting Code Block　を検索窓に入力し検索します。

インストールが終わったら有効化をしてください。

「Highlighting Code Block」の使い方

1.新規投稿　で、記事を書きます。

2.入力画面の　+　（ブロックの追加）をクリックします。

3.「Highlighting Code Block」を探してクリックします。

入力画面が出てくるのでここにソースコードを入力します。

*「test.html」は「HTML」で書かれていて、今回注目すべきは2行目ですよ、という意味合いになります。

HTMLでは「段落」の意味を持たせるために
<p>こんにちは</p>
という書き方をするんですよ。

5.プレビューで確認しましょう。

以上、Highlighting Code Blockの使い方でした。

https://wemo.tech/2122

WordPressでソースコードの記述がめちゃくちゃ簡単に！新旧エディタに対応のシンタックスハイライター「Highlighting Code Block」の使い方