⚠️ [grid] 内のインラインLaTeX $...$ が [details] と併用すると BBCode が漏れる

BBCodeとLaTeXの[grid]および[details]でのレンダリング:予期せぬ動作の説明

Discourseが[grid]および[details]内でLaTeXをどのように処理するかを実験しており、数式を多用するフォーマットを使用している他のユーザーのために、その動作と回避策をここに文書化しておきたいと思います。

:warning: 問題

複数のLaTeX式を横並びに配置するために[grid]を使用する場合、グリッド内の2つの$...$インライン数式ブロックの間にわずかな空白を挿入するだけで、レンダリングが壊れてしまいます

  • [grid]は、横並びのコンテンツを表示し、\\text{whitespace} = 1 :white_check_mark:
  • しかし、[grid][/grid]のようなBBCodeタグが表示されてしまいます :cross_mark:

レイアウトは正しく表示されていますが、[grid]がテキストとして表示されているこのスクリーンショットを参照してください。

:backhand_index_pointing_right: スクリーンショット1:レンダリングは正しいが、[grid]が目に見える状態で表示されている


:magnifying_glass_tilted_left: 診断

DiscourseのMarkdownパーサーは次のように解釈します。

  • ブロック間に空白がない$...$インライン数式として解釈されます。
  • これにより、[grid]内でレイアウトの混乱が発生します。
  • [grid]は、インラインではなくブロックレベルのコンテンツを期待します。

:white_check_mark: ソリューション

正しいレンダリングを保証するために、[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]

管理パネルのすべてを更新してから、いくつかのテストを実行しようと思いました。


[details="デカルト座標における回転の公式を導出する"]
[grid]
$$\n\\nabla \\times \\mathbf{A} = \\left| \\begin{matrix}\n\\hat{i} \u0026 \\hat{j} \u0026 \\hat{k} \\\\\n\\partial_x \u0026 \\partial_y \u0026 \\partial_z \\\\\nA_x \u0026 A_y \u0026 A_z\n\\end{matrix} \\right|
$$
$$\n\\nabla \\times \\mathbf{A} = \\left| \\begin{matrix}\n\\hat{i} \u0026 \\hat{j} \u0026 \\hat{k} \\\\\n\\partial_x \u0026 \\partial_y \u0026 \\partial_z \\\\\nA_x \u0026 A_y \u0026 A_z\n\\end{matrix} \\right|
$$
[/grid]

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

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

パス :white_check_mark:


AIがグリッドの2つの$...$の間に過剰な空白を入れている
[details="デカルト座標における回転の公式を導出する"]
[grid]
$\\nabla \\times \\mathbf{A} = \\left| \\begin{matrix}\n\\hat{i} \u0026 \\hat{j} \u0026 \\hat{k} \\\\\n\\partial_x \u0026 \\partial_y \u0026 \\partial_z \\\\\nA_x \u0026 A_y \u0026 A_z\n\\end{matrix} \\right|$

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

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

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

失敗 :cross_mark:


[details="球座標における回転の公式を導出する"]

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

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

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

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

[/details]

パス :white_check_mark:


[details="球座標における回転の公式を導出する"]

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

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

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

[/details]

パス :white_check_mark:


[details="球座標における回転の公式を導出する"]

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

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

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

[/details]

そこが失敗するところです。

:warning: 問題は、[grid] → object および/または object → [/grid] の間に空白が少なすぎることです。

「いいね!」 1

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

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.