悩む人ソースコードをシンタックスハイライト表示させるのにプラグインの「Highlighting Code Block」の導入を考えているんだけど使い方が分からない。
こういった悩みにお答えします。
本記事で解決できること
- Highlighting Code Blockのデフォルトでサポートされている言語のソースコードをシンタックスハイライト表示させる方法
- Highlighting Code Blockのデフォルトではサポートされていない言語のソースコードをシンタックスハイライト表示させる方法
- プラグインを使用せずにソースコードをシンタックスハイライト表示させる記事の紹介
是非、最後までご覧ください。
News
以下にブロックエディタで使えるSWELL専用機能の記事をまとめていますので、良ければご覧ください。
「Highlighting Code Block」の使い方を解説する前に、まずは使えるようにしていきます。
管理画面メニューから、「プラグイン」＞「新規追加」を選択します。
「プラグインの検索…」にプラグイン名を入力します。
入力すると「Highlighting Code Block」が表示されるので「今すぐインストール」＞「有効化」します。
下記を入力用に置いておきますので必要な方はコピーしてお使い下さい。
「有効化」すると管理画面メニューの「設定」に「【HCB】設定」が追加されます。
先に本記事では解説しない部分をお伝えしておきます。
基本設定
高度な設定
※全て解説します。
それでは「Highlighting Code Block」の使い方を解説します。
管理画面メニューから、「設定」＞「[HCB]設定」を選択します。
コードカラーリングを設定します。
デフォルトでは、フロント側もエディター側も「Light」になっていますが、このままにしておきます。
管理画面メニューから、「投稿」＞「新規追加」を選択します。
「ブロック挿入ツールを切り替え」を押します。
「ブロック挿入ツールを切り替え」の一覧が表示されます。
「ブロック」＞「テキスト」＞「Highlighting Code Block」を選択します。
「Your Code…」にコードを入力します。
下記を入力用に置いておきますので必要な方はコピーしてお使い下さい。
h2 {
background-color: #f7f7f7;
border-left: solid 8px #4865b2;
color: #333;
font-size: 1.4em;
font-weight: 700;
line-height: 1.4;
margin: 4em 0 2em;
padding: 0.75em 1em;
}
「Your Code…」にコードを入力しました。
エディター側がコードカラーリング「Light」で表示されています。
こちらは、エディター側がコードカラーリング「Dark」で表示された状態です。
「- Lang Select – 」から「css」を選択します。
選択後に「プレビュー」＞「新しいタブでプレビュー」から表示を確認します。
フロント側がコードカラーリング「Light」でシンタックスハイライト表示されています。
こちらは、フロント側がコードカラーリング「Dark」でシンタックスハイライト表示された状態です。
「- Lang Select – 」以外の設定を紹介します。
まずは、「ファイル名」です。
ファイル名に「SCSS」と入力します。
入力後に「プレビュー」＞「新しいタブでプレビュー」から表示を確認します。
ファイル名（赤枠）が表示されました。
「- Lang Select – 」でCSSを選択していますが、ファイル名に入力した「SCSS」が表示されていることから、「- Lang Select – 」より「ファイル名」の方が優先して表示されます。
次は、「data-line属性値」です。
「data-line属性値」に「5」を入力しました。
入力後に「プレビュー」＞「新しいタブでプレビュー」から表示を確認します。
「data-line属性値」に入力した「5行目」が目立ちました。
紹介してきた「言語名・行数・コピーボタン」は、基本設定からオンオフが行えます。
基本設定については以上となります。
ここからは、「[HCB]設定」の中の「高度な設定」について解説します。
「使用する言語セット」にはデフォルトでは下記の17言語がセットされています。
- HTML
- CSS
- SCSS
- JavaScript
- TypeScript
- PHP
- Ruby
- Python
- Swift
- C
- C#
- C++
- Objective-C
- SQL
- JSON
- Bash
- Git
では、デフォルト以外で使いたい言語があった場合はどのようにすれば良いのでしょうか？
その方法を解説します。
Prismの公式サイトにアクセスします。
「Supported Languages」の赤枠で囲っている言語をセットしていきます。
赤枠内に書かれている内容を参考に言語をセットします。
下記が赤枠内に書かれている内容になります。
クラスキー："言語名"の形式で、","（カンマ）区切りで記述してください。
-「クラスキー」は、prism.jsで使用されるクラス名（「Lang-○○」の「○○」に該当する部分）です。
「クラスキー」は、下記画像の赤枠部分です。
「”言語名”」は、下記画像の赤枠部分です。
以上を踏まえて言語をセットしました。
- クラスキー：sass
- “言語名”：Sass（Sass）
※（）内の方を記述します。 - 記述形式：sass:”Sass”,
では、次の設定に移ります。
Prismの公式サイトにアクセスします。
もしくは、ヘルプ（赤枠）に書かれている「こちら」からアクセスします。
「Languages」から赤枠の言語を選択します。
※すでにチェックが付いている言語は、デフォルトでサポートされている言語です。
「DOWNLOAD JS」を選択して「prism.js」をダウンロードします。
「独自prism.js」をアップロードします。
今回はエックスサーバーのファイルマネージャからアップロードしていますが、FTPソフトでも同じことができますので参考記事を下記に貼っておきます。
エックスサーバーの公式サイトにアクセスします。
「ログイン」＞「ファイルマネージャ」を選択します。
FTP情報を入力してログインします。
FTP情報」が記載されている場所を紹介します。
レンタルサーバー（Xserver）を契約した時に下記（赤枠）のメールが届いたかと思います。
その中（下記画像）に「FTPユーザー名（FTPアカウント名）」と「FTPパスワード」が記載されています。
ファイルマネージャにログインしました。
下記を参考に「独自prism.js」をアップロードするフォルダ（ゴール）まで移動していきます。
- 出発：hrdyuic.com
※自分が決めたサイトドメインになります。 - ゴール：swell_child
※「独自prism.js」をアップロードするフォルダ（子テーマ）になります。 - 道順：「hrdyuic.com」＞「public_html」＞「wp-content」＞「themes」＞「swell_child」
子テーマまで移動しました。
この中に「新規フォルダ」＞「hcbフォルダ」を作成します。 ※フォルダ名は自分の好きな名前でOKです。
新規作成したフォルダに「prism.js」をアップロードします。
最後に独自prism.jsにアップロードした「prism.js」までのパスを入力します。
今回はhcbフォルダ内にprism.jsをアップロードしたので、枠内にはhcb/prism.jsと入力します。
これで、言語セットした言語をシンタックスハイライト表示させる準備が整いました。
それでは、コードをシンタックスハイライト表示させていきます。
「- Lang Select -」から「Sass」を選択します。
選択後に「プレビュー」＞「新しいタブでプレビュー」から表示を確認します。
フロント側のコードカラーリング「Light」で表示されています。
こちらは、フロント側のコードカラーリング「Dark」で表示された状態です。
注意点
「- Lang Select -」を「css」にするとコードカラーリングが「Light」では見た目に違いはありませんでしたが、「Dark」にすると見た目（下記画像）が変わり統一感がなくなってしまいます。
独自カラーリングファイルについて解説します。
独自カラーリングファイルに「prism.css」までのパスを入力することで自分好みのシンタックスハイライト表示さをせることができます。
【悲報】 下記のようにシンタックスハイライト表示させることができるはずなのですが、、、僕はできませんでした。 ですので、参考程度に読んで頂ければと思いますし、読み飛ばして頂いても構いません🙇♂️
Prismの公式サイトにアクセスします。
もしくは、ヘルプ（赤枠）内に書かれている「こちら」からアクセスします。
サイトにアクセス後、以下を選択します。
- Themes：「Okaidia」を選択します。
※自分の好きなテーマを選択して頂いて構いません。 - Languages：Sass（Sass）を選択します。
「prism.css」と「prism.js」をダウンロードします。
「prism.css」と「prism.js」をアップロードします。
※手順は、prism.jsをアップロードした時と同じです。
独自カラーリングファイルに「prism.css」までのパスを入力します。
※パスの書き方も、prism.jsの時と同じです。
これで準備が整いましたのでコードをシンタックスハイライト表示させます。
ソースコードがシンタックスハイライト表示されました。
ですが、期待通りではありません。
実際は、下記画像のように表示されるはずなのですが、、、。
「独自カラーリングファイル」のみでもシンタックスハイライト表示させてみました。
しかし、変化はありませんでした。。。
しかも「独自prism.js」までのパスを消したことで、追加した言語セットがシンタックスハイライト表示されなくなってしまっているので、実用的ではありません。
一応、どのようにシンタックスハイライト表示されたのか載せておきます。
「Highlighting Code Block」の使い方についての僕なりの結論です。
- デフォルトでサポートされている言語のみを使う、かつコードカラーリング（Light・Dark）で良い方：「Highlighting Code Block」プラグインでOK
- 「独自prism.js」を使う、かつコードカラーリング（Light・Dark）で良い方：「Highlighting Code Block」プラグインでOK
※ただし、デフォルトでサポートされている言語と追加した言語とでは見た目が異なる。 - 自分好みの見た目や統一感をもたせたい方：プラグインではなく、Prism.jsを使う。
※下記の記事を参考にしてみて下さい。
僕はどうしても「Okaidia」というテーマを使いたかったので、プラグインは使用せず上記記事の方法でシンタックスハイライト表示させています。
プラグインを使わない方法であれば下記画像のように見た目に統一感をもたせることもできます。
「- Lang Select -」：CSS
「- Lang Select -」：Sass
News
以下にブロックエディタで使えるSWELL専用機能の記事をまとめていますので、良ければご覧ください。
以上は以上です。