# ⚠️ Inline KaTeX/MathJax $...$ inside \[grid\] can leak BBCode when used with \[details\] **URL:** https://meta.discourse.org/t/inline-katex-mathjax-inside-grid-can-leak-bbcode-when-used-with-details/372802 **Category:** Support **Tags:** math **Created:** [July 3, 2025, 4:22pm UTC](https://meta.discourse.org/t/inline-katex-mathjax-inside-grid-can-leak-bbcode-when-used-with-details/372802 "2025-07-03T16:22:25Z") **Posts on this page:** 4 **Page:** 1
### Author: ![Ethsim2](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/ethsim2/32/522255_2.png) [@Ethsim2](https://meta.discourse.org/u/Ethsim2) #### Post date: [July 3, 2025, 4:22pm UTC](https://meta.discourse.org/t/inline-katex-mathjax-inside-grid-can-leak-bbcode-when-used-with-details/372802/1 "2025-07-03T16:22:25Z")
## 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. ### ⚠ 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 ✅ - **But BBCode tags like `[grid]` and `[/grid]` become visible** ❌ See this screenshot, where the layout looks correct but `[grid]` appears as text: 👉 **Screenshot 1: `[grid]` showing visibly despite rendering correctly** ![screenshot showing visible [grid] BBCode](https://global.discourse-cdn.com/meta/original/4X/b/0/e/b0ea810f54c14fd495383dbe4f533725ae4f5519.png) * * * ### 🔍 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 * * * ### ✅ Solution Use `$$...$$` (block LaTeX) **instead of inline `$...$`** inside `[grid]` to ensure correct rendering. Example: ```bbcode [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)](https://global.discourse-cdn.com/meta/original/4X/1/9/0/1907c0575c38679a7c6335a5876b6edeae535129.png) ---
### Author: ![Ethsim2](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/ethsim2/32/522255_2.png) [@Ethsim2](https://meta.discourse.org/u/Ethsim2) #### Post date: [July 3, 2025, 5:01pm UTC](https://meta.discourse.org/t/inline-katex-mathjax-inside-grid-can-leak-bbcode-when-used-with-details/372802/2 "2025-07-03T17:01:14Z")
so i thought i’d Update everything on the admin panel, and set about doing some tests * * * ```plaintext [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)](https://global.discourse-cdn.com/meta/original/4X/8/d/7/8d7fe08224f7588dffbf39090af73aca1dad25d5.png) pass ✅ * * * > **AI being daft by putting excessive whitespace between two $...$ in grid** > > ```plaintext > [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)](https://global.discourse-cdn.com/meta/original/4X/5/2/a/52ae14fcd353b3c2d98ae82f0bb3163578c76fb0.png) > > fail ❌ * * * ```plaintext [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)](https://global.discourse-cdn.com/meta/original/4X/c/b/5/cb5a20ed3ef4632050a020083ef60023c0b5424d.png) pass ✅ * * * ```plaintext [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)](https://global.discourse-cdn.com/meta/original/4X/f/1/6/f1685844896e56aa509c0b4bb40345fb97bb4a85.png) pass ✅ * * * ```plaintext [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)](https://global.discourse-cdn.com/meta/original/4X/1/4/c/14c710265f41e423bd77009411aab227a7a43522.png) ⚠ the problem is that i’m putting too few whitespace between [grid] → `object` and/or `object` → [/grid] ---
### Author: ![Ethsim2](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/ethsim2/32/522255_2.png) [@Ethsim2](https://meta.discourse.org/u/Ethsim2) #### Post date: [July 3, 2025, 6:17pm UTC](https://meta.discourse.org/t/inline-katex-mathjax-inside-grid-can-leak-bbcode-when-used-with-details/372802/3 "2025-07-03T18:17:43Z")
i thought i should at least conculde mathematically accurate information, not ChatGPT waffle 😀 * * * \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](https://meta.discourse.org/t/support-bbcode-latex-html-rendering-in-details-titles-when-relevant-plugins-are-installed/372813) about colouring the text in the details panes titles’ , which could match the 3 colours on specific elements ---
### Author: ![system](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/system/32/443519_2.png) [@system](https://meta.discourse.org/u/system) #### Post date: [August 2, 2025, 6:17pm UTC](https://meta.discourse.org/t/inline-katex-mathjax-inside-grid-can-leak-bbcode-when-used-with-details/372802/4 "2025-08-02T18:17:49Z")
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.