⚠️ 当与 [details] 结合使用时，[grid] 内部的 Inline LaTeX $...$ 会泄露 BBCode

[Ethsim2 (Ethan)]

BBCode 和 LaTeX 在 [grid] 和 [details] 中的渲染：意外行为说明

我一直在尝试了解 Discourse 如何在 [grid] 和 [details] 中处理 LaTeX，并想在此记录下这种行为和解决方法，供其他使用大量数学公式格式的用户参考。

问题

当使用 [grid] 将多个 LaTeX 表达式并排显示时，在网格中插入 哪怕一个空格 在两个 $...$ 行内数学块之间 都会破坏渲染：

• [grid] 显示带 \\text{空格} = 1 的并排内容
• 但是像 [grid] 和 [/grid] 这样的 BBCode 标签会变得可见

请看这张截图，布局看起来是正确的，但 [grid] 却显示为文本：

截图 1：[grid] 在正确渲染的同时，BBCode 标签也可见

---

诊断

Discourse 的 markdown 解析器将：

• 块之间没有空格的 $...$ 解释为 行内数学
• 这会导致 [grid] 内部布局混乱
• [grid] 期望的是 块级内容，而不是行内内容

---

解决方案

在 [grid] 中使用 $$...$$（块级 LaTeX）而不是行内 $...$，以确保正确渲染。例如：

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

[Ethsim2 (Ethan)]

所以我想更新管理面板上的所有内容，然后开始做一些测试

---

[details="推导笛卡尔旋度公式"]
[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]

通过

---

AI 弄错了，在网格中的两个 $...$ 之间添加了过多的空格

[details="推导笛卡尔旋度公式"]
[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]

失败

---

[details="推导球坐标旋度公式"]

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

通过

---

[details="推导球坐标旋度公式"]

[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|
\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|
\end{align}$ [/grid]

[/details]

通过

---

[details="推导球坐标旋度公式"]

[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|
\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]

那里失败了

问题在于我在 [grid] → object 和/或 object → [/grid] 之间添加了太少的空格

[Ethsim2 (Ethan)]

我以为我至少应该提供数学上准确的信息，而不是ChatGPT的胡言乱语

---

\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|

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| }

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|

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]

---

我创建了另一个主题，关于在 details 面板标题中着色文本，这可以与特定元素的 3 种颜色相匹配