⚠️ [grid] 내부 인라인 KaTeX/MathJax $...$는 [details]와 함께 사용할 때 BBCode가 새어 나갈 수 있습니다

[Ethsim2 (Ethan)]

[grid] 및 [details]에서 BBCode와 LaTeX 렌더링: 예상치 못한 동작 설명

[grid]와 [details] 내부에서 Discourse가 LaTeX를 처리하는 방식을 실험해 보았고, 수식 중심의 포맷팅을 사용하는 다른 사용자를 위해 이 동작과 우회 방법을 여기에 문서화하고자 합니다.

문제

[grid]를 사용하여 여러 LaTeX 수식을 나란히 배치할 때, 그리드 내부의 두 ... 인라인 수학 블록 사이에 공백을 하나만 삽입해도 렌더링이 깨집니다:

• $\text{whitespace} = 1$인 상태에서 [grid]는 나란한 콘텐츠를 표시합니다
• 그러나 [grid]와 [/grid]와 같은 BBCode 태그가 가시적으로 표시됩니다

레이아웃은 올바르게 보이지만 [grid]가 텍스트로 표시되는 것을 보여 주는 아래 스크린샷을 참조하십시오:

스크린샷 1: 올바르게 렌더링되었음에도 [grid]가 가시적으로 표시됨

---

진단

Discourse의 마크다운 파서는 다음과 같이 해석합니다:

• 블록 사이에 공백이 없는 $…$를 인라인 수학으로 인식합니다
• 이로 인해 [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|
\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|
\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]

여기서 실패합니다

문제는 [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의 1번째 항

[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의 2번째 항

[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의 3번째 항

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

---

상세 패널 제목의 텍스트를 특정 요소의 3가지 색상과 일치시킬 수 있는 또 다른 주제를 만들었습니다.