⚠️ Inline KaTeX/MathJax $...$ inside [grid] can leak BBCode when used with [details]

BBCode and LaTeX Rendering in [grid] and [details]: Unexpected Behavior Explained

I’ve been experimenting with how Discourse handles LaTeX inside [grid] and [details] and wanted to document the behavior and workaround here for others using math-heavy formatting.

:warning: Problem

When using [grid] to lay out multiple LaTeX expressions side-by-side, inserting even one whitespace between two $...$ inline math blocks inside the grid breaks the rendering:

  • [grid] shows side-by-side content with \text{whitespace} = 1 :white_check_mark:
  • But BBCode tags like [grid] and [/grid] become visible :cross_mark:

See this screenshot, where the layout looks correct but [grid] appears as text:

:backhand_index_pointing_right: Screenshot 1: [grid] showing visibly despite rendering correctly


:magnifying_glass_tilted_left: Diagnosis

Discourse’s markdown parser interprets:

  • $...$ with no whitespace between blocks as inline math
  • This causes layout confusion inside [grid]
  • [grid] expects block-level content, not inline

:white_check_mark: Solution

Use $$...$$ (block LaTeX) instead of inline $...$ inside [grid] to ensure correct rendering. Example:

[grid]
$$
\nabla \times \mathbf{A} = \left| \begin{matrix}
\hat{i} & \hat{j} & \hat{k} \\
\partial_x & \partial_y & \partial_z \\
A_x & A_y & A_z
\end{matrix} \right|
$$
$$
\nabla \times \mathbf{A} = \left| \begin{matrix}
\hat{i} & \hat{j} & \hat{k} \\
\partial_x & \partial_y & \partial_z \\
A_x & A_y & A_z
\end{matrix} \right|
$$
[/grid]

so i thought i’d Update everything on the admin panel, and set about doing some tests


[details="deriving the formula for cartesian curl"]
[grid]
$$
\nabla \times \mathbf{A} = \left| \begin{matrix}
\hat{i} & \hat{j} & \hat{k} \\
\partial_x & \partial_y & \partial_z \\
A_x & A_y & A_z
\end{matrix} \right|
$$
$$
\nabla \times \mathbf{A} = \left| \begin{matrix}
\hat{i} & \hat{j} & \hat{k} \\
\partial_x & \partial_y & \partial_z \\
A_x & A_y & A_z
\end{matrix} \right|
$$
[/grid]

[grid]
$$
\begin{align*}
\nabla \times \mathbf{A} =\ 
&\hat{i} \left| \begin{matrix}
\partial_y & \partial_z \\
A_y & A_z
\end{matrix} \right|
- \hat{j} \left| \begin{matrix}
\partial_x & \partial_z \\
A_x & A_z
\end{matrix} \right| \\
&+ \hat{k} \left| \begin{matrix}
\partial_x & \partial_y \\
A_x & A_y
\end{matrix} \right|
\end{align*}
$$

$$
\begin{align*}
\nabla \times \mathbf{A} =\ 
&\hat{i} \left| \begin{matrix}
\partial_y & \partial_z \\
A_y & A_z
\end{matrix} \right|
+ \hat{j} \left| \begin{matrix}
A_z & A_x \\
\partial_z & \partial_x
\end{matrix} \right| \\
&+ \hat{k} \left| \begin{matrix}
\partial_x & \partial_y \\
A_x & A_y
\end{matrix} \right|
\end{align*}
$$
[/grid]
[/details]

pass :white_check_mark:


AI being daft by putting excessive whitespace between two $...$ in grid
[details="deriving the formula for cartesian curl"] 
[grid]
$\nabla \times \mathbf{A} = \left| \begin{matrix}
\hat{i} & \hat{j} & \hat{k} \\
\partial_x & \partial_y & \partial_z \\
A_x & A_y & A_z
\end{matrix} \right|$

$\nabla \times \mathbf{A} = \left| \begin{matrix}
\hat{i} & \hat{j} & \hat{k} \\
\partial_x & \partial_y & \partial_z \\
A_x & A_y & A_z
\end{matrix} \right|$
[/grid]

[grid]
$\begin{aligned}
\nabla \times \mathbf{A} =\ 
&\hat{i} \left| \begin{matrix}
\partial_y & \partial_z \\
A_y & A_z
\end{matrix} \right|
- \hat{j} \left| \begin{matrix}
\partial_x & \partial_z \\
A_x & A_z
\end{matrix} \right| \\
&+ \hat{k} \left| \begin{matrix}
\partial_x & \partial_y \\
A_x & A_y
\end{matrix} \right|
\end{aligned}$

$\begin{aligned}
\nabla \times \mathbf{A} =\ 
&\hat{i} \left| \begin{matrix}
\partial_y & \partial_z \\
A_y & A_z
\end{matrix} \right|
+ \hat{j} \left| \begin{matrix}
A_z & A_x \\
\partial_z & \partial_x
\end{matrix} \right| \\
&+ \hat{k} \left| \begin{matrix}
\partial_x & \partial_y \\
A_x & A_y
\end{matrix} \right|
\end{aligned}$
[/grid]
[/details]

fail :cross_mark:


[details="deriving the formula for spherical curl"]

[grid]
$$
\nabla \times \mathbf{A} =
\frac{1}{r^2 \sin\theta}
\left| \begin{matrix}
\hat{r} & r\hat{\theta} & r\sin\theta\,\hat{\phi} \\
\partial_r & \partial_\theta & \partial_\phi \\
A_r & r A_\theta & r\sin\theta\, A_\phi
\end{matrix} \right|
$$

$$
= \frac{1}{r^2 \sin\theta}
\left| \begin{matrix}
\hat{r} & \hat{\theta} & \hat{\phi} \\
\partial_\theta & \partial_\phi & \partial_r \\
r A_\theta & r \sin\theta A_\phi & A_r
\end{matrix} \right|
$$
[/grid]

[grid]
$$
\begin{align*}
= \frac{1}{r^2 \sin\theta} \Big(
&\hat{r} \left| \begin{matrix} \partial_\theta & \partial_\phi \\ r A_\theta & r \sin\theta A_\phi \end{matrix} \right|
\ \\&- \hat{\theta} \left| \begin{matrix} \partial_r & \partial_\phi \\ A_r & r \sin\theta A_\phi \end{matrix} \right| \\
&+ \hat{\phi} \left| \begin{matrix} \partial_r & \partial_\theta \\ A_r & r A_\theta \end{matrix} \right|
\Big)
\end{align*}
$$

$$
\begin{align*}
= \frac{1}{r^2 \sin\theta} \Big(
&\hat{r} \left| \begin{matrix} \partial_\phi & \partial_r \\ r \sin\theta A_\phi & A_r \end{matrix} \right|
\ \\&+ \hat{\theta} \left| \begin{matrix} A_r & r \sin\theta A_\phi \\ \partial_r & \partial_\phi \end{matrix} \right| \\
&+ \hat{\phi} \left| \begin{matrix} \partial_\theta & \partial_r \\ r A_\theta & A_r \end{matrix} \right|
\Big)
\end{align*}
$$
[/grid]

[/details]

pass :white_check_mark:


[details="deriving the formula for spherical curl"]

[grid]
$$
\nabla \times \mathbf{A} =
\frac{1}{r^2 \sin\theta}
\left| \begin{matrix}
\hat{r} & r\hat{\theta} & r\sin\theta\,\hat{\phi} \\
\partial_r & \partial_\theta & \partial_\phi \\
A_r & r A_\theta & r\sin\theta\, A_\phi
\end{matrix} \right|
$$

$$
= \frac{1}{r^2 \sin\theta}
\left| \begin{matrix}
\hat{r} & \hat{\theta} & \hat{\phi} \\
\partial_\theta & \partial_\phi & \partial_r \\
r A_\theta & r \sin\theta A_\phi & A_r
\end{matrix} \right|
$$
[/grid]

[grid]
$\begin{align*}
= \frac{1}{r^2 \sin\theta} \Big(
&\hat{r} \left| \begin{matrix} \partial_\theta & \partial_\phi \\ r A_\theta & r \sin\theta A_\phi \end{matrix} \right|
\ \\&- \hat{\theta} \left| \begin{matrix} \partial_r & \partial_\phi \\ A_r & r \sin\theta A_\phi \end{matrix} \right| \\
&+ \hat{\phi} \left| \begin{matrix} \partial_r & \partial_\theta \\ A_r & r A_\theta \end{matrix} \right|
\Big)
\end{align*}$ $\begin{align*}
= \frac{1}{r^2 \sin\theta} \Big(
&\hat{r} \left| \begin{matrix} \partial_\phi & \partial_r \\ r \sin\theta A_\phi & A_r \end{matrix} \right|
\ \\&+ \hat{\theta} \left| \begin{matrix} A_r & r \sin\theta A_\phi \\ \partial_r & \partial_\phi \end{matrix} \right| \\
&+ \hat{\phi} \left| \begin{matrix} \partial_\theta & \partial_r \\ r A_\theta & A_r \end{matrix} \right|
\Big)
\end{align*}$
[/grid]

[/details]

pass :white_check_mark:


[details="deriving the formula for spherical curl"]

[grid]
$$
\nabla \times \mathbf{A} =
\frac{1}{r^2 \sin\theta}
\left| \begin{matrix}
\hat{r} & r\hat{\theta} & r\sin\theta\,\hat{\phi} \\
\partial_r & \partial_\theta & \partial_\phi \\
A_r & r A_\theta & r\sin\theta\, A_\phi
\end{matrix} \right|
$$

$$
= \frac{1}{r^2 \sin\theta}
\left| \begin{matrix}
\hat{r} & \hat{\theta} & \hat{\phi} \\
\partial_\theta & \partial_\phi & \partial_r \\
r A_\theta & r \sin\theta A_\phi & A_r
\end{matrix} \right|
$$
[/grid]

[grid] $\begin{align}
= \frac{1}{r^2 \sin\theta} \Big(
&\hat{r} \left| \begin{matrix} \partial_\theta & \partial_\phi \\ r A_\theta & r \sin\theta A_\phi \end{matrix} \right|
\ \\&- \hat{\theta} \left| \begin{matrix} \partial_r & \partial_\phi \\ A_r & r \sin\theta A_\phi \end{matrix} \right| \\
&+ \hat{\phi} \left| \begin{matrix} \partial_r & \partial_\theta \\ A_r & r A_\theta \end{matrix} \right|
\Big)
\end{align}$ $\begin{align}
= \frac{1}{r^2 \sin\theta} \Big(
&\hat{r} \left| \begin{matrix} \partial_\phi & \partial_r \\ r \sin\theta A_\phi & A_r \end{matrix} \right|
\ \\&+ \hat{\theta} \left| \begin{matrix} A_r & r \sin\theta A_\phi \\ \partial_r & \partial_\phi \end{matrix} \right| \\
&+ \hat{\phi} \left| \begin{matrix} \partial_\theta & \partial_r \\ r A_\theta & A_r \end{matrix} \right|
\Big)
\end{align}$ [/grid]

[/details]

that’s where it fails

:warning: the problem is that i’m putting too few whitespace between [grid] → object and/or object → [/grid]

1 Like

i thought i should at least conculde mathematically accurate information, not ChatGPT waffle :grinning_face:


\frac{1}{r^2 \sin\theta} \left| \begin{matrix} \textcolor{orange}{\hat{r}} & r\hat{\theta} & r\sin\theta\,\hat{\phi} \\ \partial_r & \boxed{\partial_\theta} & \boxed{\partial_\phi} \\ A_r & \boxed{r A_\theta} & \boxed{r\sin\theta\, A_\phi} \end{matrix} \right|
\frac{1}{r^2 \sin\theta} \left| \begin{matrix} \textcolor{orange}{\hat{r}} & r\hat{\theta} & r\sin\theta\,\hat{\phi} \\ \partial_r & \boxed{\partial_\theta} & \boxed{\partial_\phi} \\ A_r & \boxed{r A_\theta} & \boxed{r\sin\theta\, A_\phi} \end{matrix} \right|
the 1st term of the Curl

[center]
\Huge \frac{1}{r^2 \sin\theta} \cdot \textcolor{orange}{\hat{r}}\begin{vmatrix} \partial_\theta & \partial_\phi \\ r A_\theta & r\sin\theta\, A_\phi \end{vmatrix}
[/center]


\textcolor{red}{ \frac{1}{r^2 \sin\theta} \left| \begin{matrix} \hat{r} & \textcolor{purple}{r\hat{\theta}} & r\sin\theta\,\hat{\phi} \\ \left.\overrightarrow{\partial_r}\right| & \partial_\theta & \left|\overrightarrow{\;\;\;\;\;\partial_\phi\;\;\;\;\;\;}\right. \\ \left.\underrightarrow{A_r}\right| & r A_\theta & \underrightarrow{\biggl| \, r\sin\theta\, A_\phi \,} \end{matrix} \right| }
\textcolor{green}{ \frac{1}{r^2 \sin\theta} \left| \begin{matrix} \hat{r} & \textcolor{purple}{r\hat{\theta}} & r\sin\theta\,\hat{\phi} \\ \left|\overrightarrow{\partial_r}\right. & \partial_\theta & \left.\overrightarrow{\;\;\;\;\;\partial_\phi\;\;\;\;\;\;}\right| \\ \left|\underrightarrow{A_r}\right. & r A_\theta & \underrightarrow{ \, r\sin\theta\, A_\phi \, \biggl|} \end{matrix} \right| }
the 2nd term of the Curl

[center]
\Huge \textcolor{red}{- \frac{1}{r^2 \sin\theta} \cdot \textcolor{purple}{r\hat{\theta}}\begin{vmatrix} \partial_\phi & \partial_r \\ r\sin\theta\, A_\phi & A_r \end{vmatrix} }

\Huge \textcolor{green}{+ \frac{1}{r^2 \sin\theta} \cdot \textcolor{purple}{r\hat{\theta}}\begin{vmatrix} \partial_r & \partial_\phi \\ A_r & r\sin\theta\, A_\phi \end{vmatrix} }
[/center]


\frac{1}{r^2 \sin\theta} \left| \begin{matrix} \hat{r} & r\hat{\theta} & \textcolor{blue}{r\sin\theta\,\hat{\phi}} \\ \boxed{\partial_r} & \boxed{\partial_\theta} & \partial_\phi \\ \boxed{A_r} & \boxed{r A_\theta} & r\sin\theta\, A_\phi \end{matrix} \right|
\frac{1}{r^2 \sin\theta} \left| \begin{matrix} \hat{r} & r\hat{\theta} & \textcolor{blue}{r\sin\theta\,\hat{\phi}} \\ \boxed{\partial_r} & \boxed{\partial_\theta} & \partial_\phi \\ \boxed{A_r} & \boxed{r A_\theta} & r\sin\theta\, A_\phi \end{matrix} \right|
the 3rd term of the Curl

[center]
\Huge \frac{1}{r^2 \sin\theta} \cdot \textcolor{blue}{r\sin\theta\,\hat{\phi}}\begin{vmatrix} \partial_r & \partial_\theta \\ A_r & r A_\theta \end{vmatrix}
[/center]


i have created another Topic about colouring the text in the details panes titles’ , which could match the 3 colours on specific elements