Code Highlighter

Code Highlighterは，Blocs for Macで作成するページのコード例を，Prismで色分けするBricです。通常のParagraphにコードと言語名を記し，ページにBricを一つ配置すると，プレビューや書き出したページでコード表示に変換されます。プログラミングの解説や，設定例を紹介するページに利用できます。

8種類の配色テーマを選べるほか，行番号，言語名，コピーボタンを個別に表示・非表示にできます。短いコマンドや関数名は，本文中のインラインコードとして表示できます。

Code Highlighter 1.0.0 をダウンロード ／ 配置の共通手順

表示例

次の画像は，Blocsのプレビューから保存した表示例です。JavaScriptとPythonのコードをそれぞれ別のParagraphに入力し，その下にインラインコードを含む文章を置いています。

Figure 1: 暗い背景のokaidiaテーマ。二つのコードブロックには行番号が付き，本文中の greet() はインラインコードとして表示されています。

実際の色分けやブラウザーでの見え方は，Code Highlighterのデモでも確認できます。デモには，JavaScript・Pythonのコードブロックと，本文中のインラインコードを掲載しています。

コードの色分けは表示のための処理であり，掲載したコードを実行する機能ではありません。インラインコードには言語を指定する欄がなく，ブロックと同じ言語別の色分けを行うものではありません。

使い方

1. Code Highlighterを配置する

コード例を載せるページにCode Highlighterを一つ配置します。コードブロックごとにBricを追加する必要はありません。通常の本文領域に置けばそのページ用，Global Areaに置けば共通のページ用になります。

拡張機能用のBlocを作り，XSでPaddingをNoneにしてから配置します。Math Rendererなどを同じ範囲で使う場合は，同じ専用Blocにまとめられます。操作の詳細は，Bricの共通配置手順を参照してください。

2. 本文のParagraphにコードを入力する

本文用のBlocに通常のParagraphを置き，コード全体を3個のバッククォートで囲みます。開始行のバッククォートの直後に，javascriptやpythonなどの言語名を記します。Code Highlighter本体には，コードを入力する欄はありません。

コード例一つにつき，一つのParagraphを使ってください。前後の説明文，別のコードブロック，インラインコードの文章は，それぞれ別のParagraphに置きます。通常のParagraphでは改行がHTMLの br に変換され，Bricは最初のコードブロックを取り出してParagraph全体を置き換えます。一つのParagraphに複数の例や説明をまとめると，一部が失われる場合があります。

Figure 2: 編集画面では，バッククォートや言語名も本文として入力します。JavaScript，Python，インラインコードの文章は，それぞれ別のParagraphです。

JavaScriptの入力例です。このブロックだけを，一つのParagraphに貼り付けます。

```javascript
function greet(name) {
    return "Hello, " + name + "!";
}

console.log(greet("Blocs"));
```

Pythonの例は，もう一つのParagraphに貼り付けます。

```python
def mean(values):
    return sum(values) / len(values)

print(mean([12, 18, 24]))
```

インラインコードは，1個のバッククォートで囲みます。次の文章も別のParagraphに置きます。

Run `greet()` to display a greeting.

3. テーマと表示項目を設定する

Code Highlighterを選択し，サイドバーでThemeを選びます。設定項目はThemeと，Line Numbers，Copy to Clipboard，Show Languageの3つのチェックボックスです。Figure 1ではThemeを okaidia とし，3つのチェックボックスをすべてONにしています。

Figure 3: サンプルに使用した4項目の設定。Themeはokaidia，行番号・コピーボタン・言語名の表示はすべてONです。

4. プレビューとコピー結果を確認する

Blocsのプレビューで色分けと行番号を確認します。言語名とCopyボタンを有効にしている場合は，コードブロックにマウスポインターを重ねると右上に表示されます。Copyボタンでコピーし，テキストエディターなどへ貼り付けて，コードの内容とインデントも確認してください。

編集画面にある青いCode Highlighterのラベルは，書き出したページには表示されません。公開前には，書き出したHTMLと実際の公開先でも表示・コピー操作を確認します。

テーマと設定値

設定はページ全体に適用されます。同じページに複数のCode Highlighterを置いても，最初に見つかったBricの設定が採用されるため，コードブロックごとに別のテーマを割り当てる構成には向きません。

設定名	選択肢	配布ファイルの初期値	内容
Theme	default，dark，tomorrow-night，okaidia，twilight，coy，solarized-light，funky	default	ページ全体の配色テーマ
Line Numbers	OFF / ON	OFF	Bricが生成するコードブロックに行番号を追加
Copy to Clipboard	OFF / ON	OFF	ツールバーのCopyボタンを表示
Show Language	OFF / ON	OFF	ツールバーに言語名を表示

言語名は，コードの開始行に明示してください。コードの内容から言語を自動判定する機能はありません。

Figure 4: 同じコードを明るいdefaultテーマで表示した例。JavaScriptブロックの右上には，言語名とCopyボタンが表示されています。

既存の pre・code に言語クラスが付いている場合も，Prismによる色分けの対象になります。ただし，そのすべてに行番号を一律に追加する処理ではありません。

言語名の指定

開始行にはPrismの言語IDを使います。次は，同梱ソースで確認できる代表例です。今回の画像と動作確認では，javascriptとpythonを使用しています。

言語・形式	記入するID
JavaScript	javascript
Python	python
HTML / XML	markup
CSS	css
JSON	json
Bash	bash
C++	cpp
Swift	swift

同梱されていない言語を自動で追加できる構成としては案内していません。また，ハイフンを含む言語IDは入力の解析方法による制限があるため，使用する言語ごとに表示を確認してください。

動作条件と注意点

項目	内容
確認対象	Code Highlighter 1.0.0，Blocs 6.4.7 for Mac，Bootstrap 5のページ
色分けエンジン	Prism 1.30.0
JavaScript	コード表示への変換と色分けに必要
確認したテーマ	okaidia，default
確認した表示	JavaScript・Pythonのコードブロック，行番号，言語名，Copyボタン，インラインコード

今回の通常Paragraphへの貼り付けでは，入力例にある連続した4個の空白が，表示・コピー結果では1個にまとまりました。Pythonなど，インデントに意味があるコードは，コピー後の内容まで確認してください。コード全体の先頭・末尾の空白も除去されます。HTMLの特殊文字や，バッククォートを含むコードも，掲載前に入力と表示を比較してください。

コピー機能にはブラウザーの権限や表示環境による違いがあります。今回はローカルのブラウザーで，Copy操作が表示中のコードと一致する文字列をコピーすることを確認しています。実際の公開先でも確認してください。

任意の後挿入コンテンツを継続監視して，自動的に変換し続ける機能はありません。Volt CMS向けの処理は含まれていますが，この記事の例と確認は，Blocsの通常の本文を対象としています。

2026年10月24日に，インストール済みBricのソース確認，Blocsでの撮影，プレビューおよびローカル配信した書き出しページの色分けとコピー操作，書き出しHTMLの設定・添付ファイルの確認を行いました。