ソースコードを奇麗に表示してくれる、wordpressプラグイン「Highlighting Code Block」の使い方を説明したいと思います。
下が完成イメージです。
<script>alert('こんにちは');</script>
1.「Highlighting Code Block」のダウンロード
①左のメニューバーから「プラグイン」→「新規追加」をクリック

②プラグイン検索で「Highlighting Code Block」と入力し「ENTER」

③「Highlighting Code Block」というプラグインが表示されるので、「今すぐインストール」をクリック

しばらくすると有効化ボタンに変化します。
④「有効化」ボタンをクリック

これで、「Highlighting Code Block」のダウンロードとインストールが終了です。
2.「Highlighting Code Block」の設定
①「設定」→「[HCB]設定」をクリック

②「Highlighting Code Block」の基本設定説明

言語の表示 | チェックすると、サイト表示側のコードに言語の種類が表示されます。 |
行数の表示設定 | チェックすると、サイト表示側のコードの左端に行数が表示されます。 |
フォントスムージング | オンにすると、コードブロックに -webkit-font-smoothing: antialiased; と -moz-osx-font-smoothing: grayscale; が追加されます。 |
コードカラーリング(フロント側) | 「ライト」と「ダーク」の選択ができます。 |
コードカラーリング(エディター側) | 「ライト」と「ダーク」の選択ができます。 |
フォントサイズ(PC) | PC上のフォントサイズを指定 |
フォントサイズ(SP) | スマートフォン上のフォントサイズを指定 |
コードの “font-family” | コードのフォントを指定 |
コードカラーリング
(フロント側)ライト(エディター側)ライト

(フロント側)ライト(エディター側)ダーク

(フロント側)ダーク(エディター側)ライト

(フロント側)ライト(エディター側)ダーク

4通り全て試したのですが…実際には2通りしかなさそうです。
Javascriptがそうであって、他の言語だとまた違うかも?
③「Highlighting Code Block」の高度な設定説明

使用する言語セット | prism.jsで使用されるクラス名(「lang-◯◯」の「◯◯」に該当する部分)です。 ※ デフォルトでサポートされていない言語を使用する場合、「独自prism.js」設定と併用してください。 |
独自カラーリングファイル | 用意したコードカラーリング用のCSSファイルを読み込みます。(CSSファイルはテーマフォルダ内に置く) |
独自prism.js | 自分専用の言語セットに対応したprism.jsファイルを使用できます。 |
④設定の変更をしたら、忘れずに「変更を保存」をクリックする

3.「Highlighting Code Block」の使用方法
投稿ページや、固定ページの表示したい場所に行き
①段落の⊕ページをクリック

クリックすると、下にメニューバーが広がります。
②「Highlighting Code Block」をクリック
クリックすると、段落が下の画像(ブロック)のように変わります。

③コードの記述
コードの記述をします。
※当ページでは、例としてJavascriptを記述しました。

④表示の設定
コード記述の下に、ちょっと設定があります。
Lang Select | 記述した言語を選択 |
ファイル名 | 表示したコードブロックの右上に表示される。未入力で言語名を表示 |
data-line属性の値 | 入力した行番号が強調される。 強調しない場合は空欄にしておく。 |
⑤HCB設定
画面右のブロックに「HCB設定」と表示があります。(Highlighting Code Blockのブロックを選択時)
行数の表示と言語名の表示に関する設定があります。

⑥表示
プレビューなどで確認してみましょう。
<script>alert('こんにちは');</script>
コードが表示されていれば、完成です。
表示できない人がいたらコメント下さい。
4.「Highlighting Code Block」のまとめ
すごくデザインもかっこいいし、使いやすいのでお勧めのプラグインです。
[myspeech src=”https://wordpress.oita.fun/wp-content/uploads/2020/09/turu.png”]「Crayon Syntax Highlighter」というプラグインを初め使おうと思い、インストールしてみたのですが、使えませんでした汗
更新がずいぶん前でストップしていて、最新のwordpressには対応してないみたいです。
なので・・・「Highlighting Code Block」がおすすめです。[/myspeech]
コメント