Highlighting Code Blockの使い方

Highlighting Code Block Wordpressプラグイン
スポンサーリンク

ソースコードを奇麗に表示してくれる、wordpressプラグイン「Highlighting Code Block」の使い方を説明したいと思います。

下が完成イメージです。

<script>alert('こんにちは');</script>

1.「Highlighting Code Block」のダウンロード

①左のメニューバーから「プラグイン」→「新規追加」をクリック

Highlighting Code Block

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

Highlighting Code Block

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

Highlighting Code Block

しばらくすると有効化ボタンに変化します。

④「有効化」ボタンをクリック

Highlighting Code Block

これで、「Highlighting Code Block」のダウンロードとインストールが終了です。

2.「Highlighting Code Block」の設定

①「設定」→「[HCB]設定」をクリック

Highlighting Code Block

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

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

コードカラーリング

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

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

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

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

4通り全て試したのですが…実際には2通りしかなさそうです。

Javascriptがそうであって、他の言語だとまた違うかも?

③「Highlighting Code Block」の高度な設定説明

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

④設定の変更をしたら、忘れずに「変更を保存」をクリックする

Highlighting Code Block

3.「Highlighting Code Block」の使用方法

投稿ページや、固定ページの表示したい場所に行き

①段落の⊕ページをクリック

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]

コメント

タイトルとURLをコピーしました