ソースコードを奇麗に表示してくれる、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]
コメント