Одно из таких расширений — Custom Containers — позволяет использовать специальный синтаксис для создания стилизованных блоков, а также для замены полезных HTML-конструкций вроде
<details> + <summary> без необходимости использовать HTML внутри Markdown-документа.Пример из документации Vitepress
Использование сырого HTML внутри Markdown считается плохой практикой, так как затрудняет чтение исходника, что против философии Markdown, а ещё может привести к неверной интерпретации при использовании индентации.
<!-- ❌ Плохо -->
<details>
<summary>Показать подробности</summary>
Какой-то текст
</details>
<!-- ✅ Хорошо -->
::: details Показать подробности
Какой-то текст
:::
Но написать я хотел не об этом 🤷♂️
Иной раз возникает необходимость использовать один контейнер внутри другого, и вот здесь нужно знать о том, что вот эти три двоеточия
::: работают точно также, как и символы ``` при использовании fenced code blocks (о них уже писал ранее в блоге).А именно — их необязательно должно быть три, их должно быть не менее трёх и они должны быть парными.
Это в каком-то роде очевидно, если задуматься, но информации об этом в интернете можно сказать нет, и я об этом не знал.
То есть правильный вариант вложения custom containers друг в друга выглядит так:
::::: details Свёрнутый блок
:::: details Вложенный блок
::: info
Какой-то информационный текст
:::
::::
:::::
Мне это в голову не пришло и я пошёл позориться с issue в репозиторий
eslint-plugin-markdown-preferences.Вы теперь знаете и позориться не будете 🫡