Math Renderer

Math Rendererは，Blocs for Macの本文に書いた数式を，読みやすい数式表示に変換するBricです。通常のParagraphにLaTeX形式の記法を入力すると，プレビューや書き出したページで数式が描画されます。文中の短い数式から，分数，偏微分，ベクトル，複数行の式まで，数式を含む解説ページに利用できます。

数式は画像にする必要がありません。本文のテキストとして保存されるため，式の修正もBlocs上で行えます。描画にはKaTeXを使用しています。

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

表示例

次の画像は，Blocsから書き出したページをブラウザーで表示したものです。文中の数式は文章の流れに入り，独立した数式は別行に表示されます。

Figure 1: 文中の数式（$E = mc^2$）と，シュレーディンガー方程式，マクスウェル方程式，位置エネルギー項を含むベルヌーイの式，ラマヌジャンの円周率公式。以下の入力例から描画しています。

実際の描画やブラウザーでの見え方は，Math Rendererのデモでも確認できます。デモはBlocsで作成しており，数式の表示と入力したコードを掲載しています。

使い方

1. Math Rendererを配置する

数式を使うページに，Math Rendererを一つ配置します。数式の数に応じてBricを増やす必要はありません。

本文とは別に，拡張機能用のBlocを用意し，PaddingをNoneにして配置します。現在のページだけで使う場合は通常の本文領域に，複数のページで共通して使う場合はGlobal Areaに配置します。Code Highlighterなどを同じ範囲で使う場合は，同じ拡張機能用Blocにまとめられます。

操作の詳細は，Bricの共通配置手順を参照してください。

2. 本文に数式を入力する

本文用のBlocに通常のParagraphを置き，数式を区切り記号で囲んで入力します。Math Renderer本体には，数式を入力する欄はありません。

Figure 2: 編集画面では，通常のParagraphに数式をテキストで入力します。Figure 1と同じ5例です。

初めて試す場合は，次の1行をParagraphに貼り付けてください。

Energy is described by $E = mc^2$.

3. プレビューで確認する

Blocsのプレビューを開き，区切り記号が数式に変換されていることを確認します。編集キャンバスでは記法のまま表示され，Math Renderer本体は青いラベルとして見えます。このラベルは書き出したページには表示されません。

公開前には，書き出したHTMLでも数式を確認してください。長い式を使う場合は，スマートフォンの幅でも収まりを確認します。

数式の区切り記号

次の4種類に対応しています。文章に埋め込む式には \(...\)，別行に置く式には \[...\] を使うと，区切りの意図が明確になります。日本語の文章にも同じ記法で入力できます。

表示形式	開始	終了	入力例
文中の数式	\(	\)	\(E = mc^2\)
別行の数式	\[	\]	\[\frac{a}{b}\]
文中の数式	$	$	$E = mc^2$
別行の数式	$$	$$	$$\frac{a}{b}$$

ドル記号も数式の区切りとして認識されます。価格などで複数の $ を使うページでは，通常の文章まで数式として解釈されていないか確認してください。数式側で \(...\) を使っていても，本文内のドル記号の認識が無効になるわけではありません。

コピーして使える入力例

以下を通常のParagraphに貼り付けると，Figure 1の表示を再現できます。最初の文では $...$ を使い，文章の中に数式を入れています。別行の4例は \[...\] で囲んでいます。

マクスウェル方程式では，aligned を使って複数行を整列しています。各行の & が揃える位置，\\ が数式内の行の区切りです。

Energy is described by $E = mc^2$.

Schrödinger equation
\[i\hbar\frac{\partial\Psi}{\partial t}=\left[-\frac{\hbar^2}{2m}\nabla^2+V\right]\Psi\]

Maxwell's equations
\[\begin{aligned}
\nabla\cdot\mathbf{E} &= \frac{\rho}{\varepsilon_0} \\
\nabla\cdot\mathbf{B} &= 0 \\
\nabla\times\mathbf{E} &= -\frac{\partial\mathbf{B}}{\partial t} \\
\nabla\times\mathbf{B} &= \mu_0\mathbf{J}+\mu_0\varepsilon_0\frac{\partial\mathbf{E}}{\partial t}
\end{aligned}\]

Bernoulli's equation
\[p+\frac{1}{2}\rho v^2+\rho gh=\mathrm{constant}\]

Ramanujan's formula for pi
\[\frac{1}{\pi}=\frac{2\sqrt{2}}{9801}\sum_{n=0}^{\infty}\frac{(4n)!\,(1103+26390n)}{(n!)^4\,396^{4n}}\]

掲載した式の内容は，次のとおりです。

式	掲載した形
シュレーディンガー方程式	非相対論的な単一粒子について，波動関数の時間発展を表す形
マクスウェル方程式	電荷・電流を含む真空中の電磁場を記述する4本の式。SI単位系で表記
ベルヌーイの式	重力による位置エネルギー項を含む形。定常・非粘性・非圧縮の流れについて，同じ流線上で和が一定
ラマヌジャンの円周率公式	円周率の逆数を表す無限級数

設定と描画の範囲

Math Rendererには独自の変更可能なサイドバー設定はありません。表示形式は，本文に入力する区切り記号と数式の記法で指定します。

項目	設定・動作
数式の入力場所	通常のParagraphなど，ページの本文
配置数	1ページにつき一つを基本とし，そのページの式をまとめて描画
文中・別行の切り替え	区切り記号で指定
数式用の独自設定	なし。文字サイズ・色・マクロ・区切り記号を変更する専用UIはなし
描画対象	ページ本文。Math Rendererの置かれたBloc内だけに限定されない
描画しない要素	pre・code・textareaなど。katex-ignoreクラスの付いた要素も対象外
誤った数式	正しい式へ自動修正する機能はなし。プレビューで入力を確認
読み込み後に追加した本文	任意の変更を継続監視して，自動で再描画する機能はなし

記法そのものを見せるコード例は，preやcodeの中に置くと描画対象から外れます。実際の数式を表示したい場合は，通常の本文に入力してください。

動作条件と注意点

項目	内容
確認対象	Math Renderer 1.0.0，Blocs 6 for Mac，Bootstrap 5のページ
数式エンジン	KaTeX 0.16.22
JavaScript	数式の描画に必要
外部読み込み	数式用フォントをjsDelivrから読み込み

JavaScriptとCSS本体はBricに同梱されていますが，数式用フォントは外部から読み込みます。完全なオフライン表示を前提とした構成ではありません。

入力できる式は，KaTeXの対応記法の範囲です。LaTeX文書全体の組版や，任意の追加パッケージを使う用途には対応しません。また，長い式を自動改行する専用設定はありません。必要に応じて式を分け，ページの幅に合わせてください。

Volt CMS向けの処理は含まれていますが，この記事の例と動作確認は，Blocsの通常の本文を対象としています。

2026年10月23日に，インストール済みBricのソース確認と，掲載した5例のBlocsプレビュー・書き出しHTMLの描画確認を行いました。