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

Support
1

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

screenshot showing visible [grid] BBCode
screenshot showing visible [grid] BBCode708×545 21.5 KB

: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]

A fluffy, ginger cat is curled up asleep on a grey cushion, looking very comfortable and peaceful. (Captioned by AI)
A fluffy, ginger cat is curled up asleep on a grey cushion, looking very comfortable and peaceful. (Captioned by AI)1484×421 13.9 KB

2

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]

A vibrant, close-up photograph depicts a red poppy in full bloom, showcasing its delicate, crinkled petals and dark central seed pod against a blurred green background. (Captioned by AI)
A vibrant, close-up photograph depicts a red poppy in full bloom, showcasing its delicate, crinkled petals and dark central seed pod against a blurred green background. (Captioned by AI)1513×820 32.7 KB

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]

A fluffy, white Samoyed dog stands proudly in a snowy landscape, looking directly at the camera with a cheerful expression. (Captioned by AI)
A fluffy, white Samoyed dog stands proudly in a snowy landscape, looking directly at the camera with a cheerful expression. (Captioned by AI)1489×831 33.5 KB

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]

A fluffy, white dog with floppy ears sits attentively on a patterned rug, looking slightly to the left with a cheerful expression. (Captioned by AI)
A fluffy, white dog with floppy ears sits attentively on a patterned rug, looking slightly to the left with a cheerful expression. (Captioned by AI)1499×833 39.6 KB

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]

A brightly coloured hot air balloon, adorned with patchwork patterns, floats peacefully against a clear blue sky. (Captioned by AI)
A brightly coloured hot air balloon, adorned with patchwork patterns, floats peacefully against a clear blue sky. (Captioned by AI)1491×821 41.9 KB

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

The image displays a complex mathematical formula and derivation process, likely related to spherical coordinates and vector calculus, presented in a code-like format with various symbols and equations. (Captioned by AI)
The image displays a complex mathematical formula and derivation process, likely related to spherical coordinates and vector calculus, presented in a code-like format with various symbols and equations. (Captioned by AI)1482×825 42.6 KB

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

1 Like
3

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