お問い合わせ

Highlighting Code Blockに他の言語を追加する手順

  • URLをコピーしました!

SWELLの作者がリリースしているプラグインに『Highlighting Code Block』があります。

このプラグインはお手軽なので気に入って使っています。

しかし、初期インストールで対応している言語が限られており、言語を追加したいと思う人も多いでしょう。

この記事では『Highlighting Code Block』に対応言語を追加する方法をまとめます。

『Highlighting Code Block』とは?

『Highlighting Code Block』は簡単に言えば、ソースコードを表示するブロックを提供するプラグインです。

ソースコードの表示には、prismを利用しています。

『Highlighting Code Block』のインストール直後で対応している言語は?
  1. HTML
  2. CSS
  3. SCSS
  4. JavaScript
  5. TypeScript
  6. PHP
  7. Ruby
  8. Python
  9. Swift
  10. C
  11. C#
  12. C++
  13. Objective-C
  14. SQL
  15. JSON
  16. Bash
  17. Git

『Highlighting Code Block』とprismの違い

『Highlighting Code Block』は、prism単体で使う場合と何が違うのでしょうか?

『Highlighting Code Block』プラグインで独自に追加されている機能

  • 言語名の表示
  • コピーボタン

これらは、prism単体でもjsのプラグインを追加することで実現できますが、『Highlighting Code Block』はプラグインとしてこれらの機能を持っています。

『Highlighting Code Block』はprism.jsを読み込んでいる

prismからjsをダウンロードすると、prism.jsというファイルになります。

このファイルは『Highlighting Code Block』内部でもそのまま読み込んでおり、『Highlighting Code Block』の設定から別のjsファイルを読み込むと差し替えられます。

ただし、ユーザーがprism.jsに組み込めるプラグインには制限があります。

prism.cssは使用できない

『Highlighting Code Block』は、背景色をライトとダークで選べます。それらのカラーは『Highlighting Code Block』が独自にあてているCSSで実現しています。

prismからCSSをダウンロードすると、prism.cssというファイルになり、『Highlighting Code Block』の設定からCSSを読み込む設定でカラーを変更できると考えますが、そうは問屋が卸しません。

ダウンロードしたprism.cssは『Highlighting Code Block』と互換性がありません。

『Highlighting Code Block』に独自のprism.jsやprism.cssを適用するには?

『Highlighting Code Block』の設定画面には以下のヘルプが書かれています。

各独自ファイルを使用する場合は、テーマフォルダの中にアップロードしてください。
独自ファイルへのパスを設定すると、デフォルトのカラーリングファイルやprism.jsファイルは読み込まれなくなります。
※ 現在読み込んでいるprism.jsファイルは、 こちら でダウンロードできます。

素のprismを使用していた人がこのヘルプを読むと、prismからjsとcssをダウンロードして単純に差し替えれば動くように感じますが、正しく読むとそういう意味ではないことが分かります。

独自のprism.jsを適用する場合

単純に、prismからprism.jsをダウンロードして読み込む設定をすれば大丈夫です。

ただし、注意点があります。

余計なプラグインを追加したり、必要なプラグインを削除すると、『Highlighting Code Block』がまともに動かなくなります。

必要なプラグインは以下の2つだけです。

  • line-highlight
  • line-numbers

以下のページから言語だけ追加して、プラグインは触らないようにすれば大丈夫です。

ダウンロードしたprism.jsの文字コードがShift-JISになっていることがあるので、アップロード前にUTF-8に変換する必要があります。

独自のprism.cssを適用する場合

ユーザーのprism.jsを追加し、ユーザー定義のCSSを指定しない場合でも、追加した言語に既存のカラーが適用されます。
prism.cssを追加で読み込む必要はありません。

結論から言えばprism.cssはそのまま適用できません。

『Highlighting Code Block』が読み込んでいるCSSはprism.cssではなく、プラグイン独自のCSSであるためです。

ここでヘルプの文言が効いてきます。

デフォルトのカラーリングファイルやprism.jsファイルは読み込まれなくなります。

prism,jsという文言はありますが、prism.cssという文言はなく『デフォルトのカラーリングファイル』となっています。

我々が置き換えるべきは、prism.cssではなくデフォルトのカラーリングファイルなのです。

デフォルトのカラーリングファイルとは何を指すのでしょうか?

『Highlighting Code Block』がCSSを読み込むCSSファイルは以下のようになっております。

カラー設定次第でhcb--light.scsshcb--dark.scssのいずれかが読み込まれます。

@charset "UTF-8";
@import "front/base";
@import "front/color--light";
@charset "UTF-8";
@import "front/base";
@import "front/color--dark";

hcb--light.scsshcb--dark.scssのどちらでも、baseが読み込まれて、colorで色設定を切り替えています。

ユーザー指定のCSSがある場合は、baseのみ読み込まれてカラー設定部分はユーザー指定のCSSに置き換える仕組みです。

		// HCB スタイルの読み込み.
		if ( LOOS_HCB::$custom_coloring_path ) {
			// ユーザーに指定されたCSSがあれば、baseスタイル + そのファイルを読み込む
			wp_enqueue_style( 'hcb-style', LOOS_HCB_URL . '/build/css/hcb.css', [], $ver );
			wp_enqueue_style( 'hcb-coloring', LOOS_HCB::$custom_coloring_path, [ 'hcb-style' ], $ver );

		} else {
			// ユーザー指定がなければ、カラーリングを含んだデフォルトCSSを読み込む
			wp_enqueue_style( 'hcb-style', LOOS_HCB::$front_css_path, [], $ver );
		}

この仕組みから考えると、ユーザー指定のCSSを追加する場合は、
『Highlighting Code Block』が元から使用しているカラー設定のCSSをコピーして書き換えたものを読み込ませるか、追加CSSなどから部分的に上書きする方が簡単だと思います。

まとめ

『Highlighting Code Block』に言語を追加したい場合は、以下の手順でOKです。

  • 以下の2つのプラグイン以外は追加せずにprism.jsを作成する。
    1. line-highlight
    2. line-numbers
  • prism.cssは読み込まない。
他の人にもシェアしてね
  • URLをコピーしました!
  • URLをコピーしました!
コメントを閉じる

コメント

コメントする

コメントは日本語で入力してください。(スパム対策)

クリックできる目次