Math Renderer
Math Renderer is a Bric for Blocs for Mac that turns equations in your page text into readable mathematical notation. Enter LaTeX-style expressions in a regular Paragraph, and the equations are rendered in previews and exported pages. It is useful for explanatory pages with anything from short inline expressions to fractions, partial derivatives, vectors, and multiline equations.
There is no need to turn equations into images. They are saved as text in your page, so you can edit them directly in Blocs. Math Renderer uses KaTeX for rendering.
Download Math Renderer 1.0.0 / Shared placement guide
Examples
The following image shows a page exported from Blocs and viewed in a browser. Inline math flows with the surrounding text, while display math appears on a separate line.
Figure 1: Inline math ($E = mc^2$), the Schrödinger equation, Maxwell's equations, Bernoulli's equation with the gravitational potential energy term, and Ramanujan's formula for pi. These are rendered from the input examples below.
Visit the Math Renderer demo to see the rendering in your browser. The demo is built with Blocs and includes both the rendered equations and their input code.
Getting started
1. Place Math Renderer
Place one Math Renderer Bric on a page that uses equations. You do not need a separate Bric for each equation.
Create a dedicated Bloc for extensions, separate from the page content, and set its Padding to None. Place it in the regular page content area to use it on the current page, or in a Global Area to share it across pages. Other extensions with the same scope, such as Code Highlighter, can share that Bloc.
For detailed instructions, see the shared Bric placement guide.
2. Enter equations in your page text
Add a regular Paragraph to a content Bloc, then enter equations enclosed in delimiters. Math Renderer itself has no equation input field.
Figure 2: Enter equations as text in a regular Paragraph on the editing canvas. These are the same five examples shown in Figure 1.
To try it for the first time, paste this line into a Paragraph:
Energy is described by $E = mc^2$.3. Check the preview
Open the Blocs preview and check that the delimited expressions have been rendered as equations. The editing canvas shows the original notation, and the Math Renderer Bric appears as a blue label. This label is not displayed on the exported page.
Before publishing, check the equations in the exported HTML as well. If you use long equations, check that they fit at smartphone widths.
Math delimiters
The following four delimiter pairs are supported. Using \(...\) for inline math and \[...\] for display math makes their purpose clear. The same notation also works in Japanese text.
| Format | Opening delimiter | Closing delimiter | Input example |
|---|---|---|---|
| Inline math | \( | \) | \(E = mc^2\) |
| Display math | \[ | \] | \[\frac{a}{b}\] |
| Inline math | $ | $ | $E = mc^2$ |
| Display math | $$ | $$ | $$\frac{a}{b}$$ |
Dollar signs are also recognized as math delimiters. On pages that use multiple $ characters for prices or other text, check that ordinary text is not being interpreted as math. Using \(...\) for your equations does not disable recognition of dollar signs elsewhere in the page text.
Examples to copy
Paste the following into a regular Paragraph to reproduce Figure 1. The first sentence uses $...$ to include math within the text. The four display examples are enclosed in \[...\].
Maxwell's equations use aligned to align multiple rows. In each row, & marks the alignment point, and \\ starts a new row within the equation.
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}}\]The equations shown above use the following forms:
| Equation | Form shown |
|---|---|
| Schrödinger equation | Time evolution of the wave function of a single nonrelativistic particle |
| Maxwell's equations | Four equations describing electromagnetic fields in vacuum, including charges and currents, expressed in SI units |
| Bernoulli's equation | Includes the gravitational potential energy term. The sum is constant along a streamline in steady, inviscid, incompressible flow |
| Ramanujan's formula for pi | An infinite series for the reciprocal of pi |
Settings and rendering scope
Math Renderer has no custom sidebar controls that you can change. Specify the display format using delimiters and mathematical notation in your page text.
| Item | Setting or behavior |
|---|---|
| Equation input | A regular Paragraph or other page text |
| Number of Brics | Use one per page to render the equations on that page |
| Inline or display math | Specified by the delimiters |
| Custom math settings | None. There are no dedicated controls for font size, color, macros, or delimiters |
| Rendering scope | Page text, not just the Bloc containing Math Renderer |
| Excluded elements | Elements such as pre, code, and textarea. Elements with the katex-ignore class are also excluded |
| Invalid equations | Not automatically corrected. Check your input in the preview |
| Text added after page load | Arbitrary changes are not continuously monitored for automatic rendering |
Place code examples that demonstrate the notation itself inside pre or code elements to exclude them from rendering. To display an equation, enter it in regular page text.
Requirements and limitations
| Item | Details |
|---|---|
| Verified setup | Math Renderer 1.0.0, Blocs 6 for Mac, a Bootstrap 5 page |
| Math engine | KaTeX 0.16.22 |
| JavaScript | Required to render equations |
| External resources | Math fonts loaded from jsDelivr |
The JavaScript and CSS files are bundled with the Bric, but math fonts are loaded externally. This setup is not intended to provide fully offline rendering.
Expressions must use notation supported by KaTeX. Math Renderer does not typeset entire LaTeX documents or support arbitrary additional packages. It also has no dedicated setting for automatically wrapping long equations. Split equations as needed to fit your page width.
The Bric includes handling for Volt CMS, but the examples and verification in this article cover regular Blocs page text.