⚠️ Встроенный KaTeX/MathJax $...$ внутри [grid] может приводить к утечке BBCode при использовании с [details]

Поддержка
1

Отрисовка BBCode и LaTeX в [grid] и [details]: объяснение неожиданного поведения

Я экспериментировал с тем, как Discourse обрабатывает LaTeX внутри тегов [grid] и [details], и хотел задокументировать здесь это поведение и обходное решение для тех, кто использует математическое форматирование.

:warning: Проблема

При использовании [grid] для размещения нескольких математических выражений LaTeX рядом, вставка даже одного пробела между двумя блоками встроенной математики $...$ внутри сетки нарушает отрисовку:

  • [grid] показывает контент рядом с $\text{whitespace} = 1$ :white_check_mark:
  • Но теги BBCode, такие как [grid] и [/grid], становятся видимыми :cross_mark:

Посмотрите на этот скриншот, где макет выглядит правильно, но [grid] отображается как текст:

:backhand_index_pointing_right: Скриншот 1: [grid] виден, несмотря на корректную отрисовку

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

:magnifying_glass_tilted_left: Диагностика

Парсер Markdown в Discourse интерпретирует:

  • $...$ без пробелов между блоками как встроенную математику
  • Это вызывает путаницу в макете внутри [grid]
  • [grid] ожидает контент блочного уровня, а не встроенный

:white_check_mark: Решение

Используйте $$...$$ (блочный LaTeX) вместо встроенного $...$ внутри [grid], чтобы обеспечить корректную отрисовку. Пример:

[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

Так что я решил обновить всё на панели администратора и приступил к проведению некоторых тестов

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

Яркое крупное фото красного мака в полном цвету, демонстрирующее его нежные морщинистые лепестки и тёмный центральный семенной коробок на размытом зелёном фоне. (Подпись сгенерирована ИИ)
Яркое крупное фото красного мака в полном цвету, демонстрирующее его нежные морщинистые лепестки и тёмный центральный семенной коробок на размытом зелёном фоне. (Подпись сгенерирована ИИ)1513×820 32.7 KB

пройдено :white_check_mark:

ИИ ведёт себя глупо, добавляя лишние пробелы между двумя $...$ внутри [grid] 
[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]

Пушистая белая собака самоед гордо стоит в снежном пейзаже, смотрит прямо в камеру с весёлым выражением. (Подпись сгенерирована ИИ)
Пушистая белая собака самоед гордо стоит в снежном пейзаже, смотрит прямо в камеру с весёлым выражением. (Подпись сгенерирована ИИ)1489×831 33.5 KB

не пройдено :cross_mark:

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

Пушистая белая собака с висячими ушами внимательно сидит на узорчатом ковре, слегка повернув голову влево с весёлым выражением. (Подпись сгенерирована ИИ)
Пушистая белая собака с висячими ушами внимательно сидит на узорчатом ковре, слегка повернув голову влево с весёлым выражением. (Подпись сгенерирована ИИ)1499×833 39.6 KB

пройдено :white_check_mark:

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

Яркий воздушный шар, украшенный лоскутными узорами, мирно парит на фоне чистого голубого неба. (Подпись сгенерирована ИИ)
Яркий воздушный шар, украшенный лоскутными узорами, мирно парит на фоне чистого голубого неба. (Подпись сгенерирована ИИ)1491×821 41.9 KB

пройдено :white_check_mark:

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

именно здесь происходит сбой

На изображении представлена сложная математическая формула и процесс вывода, вероятно, связанный с сферическими координатами и векторным анализом, оформленный в виде кода с различными символами и уравнениями. (Подпись сгенерирована ИИ)
На изображении представлена сложная математическая формула и процесс вывода, вероятно, связанный с сферическими координатами и векторным анализом, оформленный в виде кода с различными символами и уравнениями. (Подпись сгенерирована ИИ)1482×825 42.6 KB

:warning: проблема в том, что я ставлю слишком мало пробелов между [grid] → объект и/или объект → [/grid]

3

Я думал, что стоит хотя бы заключить математически точную информацию, а не пустую болтовню ChatGPT :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|
первый член ротора

[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| }
второй член ротора

[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|
третий член ротора

[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, что могло бы соответствовать трём цветам на конкретных элементах.