Формат записки: картинки, формулы, схемы, графики и видео

Каждая записка на bl0g.ru — это Markdown с набором расширений: картинки с загрузкой и зумом, формулы MathJax, диаграммы mermaid, графики Vega-Lite, встроенные видео, колонки и карточки. Ниже — краткий обзор форматов с живыми примерами; по каждому есть подробный гид из серии #справка.

Картинки

Картинку вставляют кнопкой на панели редактора (или в «Новой статье»): она уходит на сервер, а в текст встаёт обычный Markdown:

![Подпись](/media/uploads/...)

Загруженный jpeg/png автоматически получает WebP-производную — страница не тащит тяжёлый оригинал. Клик по картинке раскрывает её на весь экран (зум), подпись из alt — под ней. Обложка записки задаётся при публикации в пропорции 4:1 и показывается над заголовком. Вот эта самая обложка прямо в тексте:

Формулы

Инлайн-формула — $...$ (в строке текста), выносная — $$...$$ (разделители на отдельных строках). Справа — то, что увидит читатель:

$$
\int_a^b f(x)\,dx
\quad\text{и}\quad
\sum_{i=1}^{n} i^2
$$

Дроби, корни, матрицы, многострочные выкладки и частые ошибки — в гиде MathJax в блоге.

Схемы (mermaid)

Блок ```mermaid рендерит диаграммы (графы, последовательности, ER), а тема перекрашивается под светлую или тёмную тему сайта:

flowchart LR
  A[Markdown] --> B[Формулы]
  A --> C[Схемы]
  A --> D[Графики]
  A --> E[Видео]
  B --> F{Записка}
  C --> F
  D --> F
  E --> F

Подписи узлов — в одну строку (санитайзер вырезает <br/>), пресеты и настройка цветов — в гиде Mermaid-темы.

Графики (Vega-Lite)

Блок ```vega — JSON-спека Vega-Lite: линии, точки, области, наши слои-композиции. Живой пример:

Совпадающие кривые на одном графике (линия + полупрозрачная область), составные спеки и ограничения — в гиде Графики Vega-Lite.

Видео

Фенс ```video со строкой-ссылкой: YouTube / RuTube / VK / OK / Vimeo / Dailymotion / Дзен превращаются в ленивый iframe (плеер подхватывается, только когда долистали), а файлы .mp4/.webm/.mov и ссылки на /media/... — во встроенный <video>:

Не распознанное видеофенсом показывается плашкой-ошибкой, не ломая страницу. Подробности — в гиде Видео в блоге.

Колонки и карточки

Фенсы ```columns ``` и ```cards ``` раскладывают текст по сетке (.n-2, .n-3, .n-4), разделитель колонок — строка :::. На узком экране колонки аккуратно складываются друг под другом:

Простой контейнер-«карточка» с полным Markdown внутри — фенс ```box. Цвета, фоны и прочие утилиты — в гиде attr_list и утилитарные классы.

Таблицы

Обычные |-таблицы, а классы .t-* на box-обёртке стилизуют их (рамки, зебра, шапка в тон темы):

Широкая таблица скроллится сама и не распирает страницу; жёсткий режим без сжатия — класс .h-scroll. Блоки кода подсвечиваются Pygments и получают кнопку «Копировать».

Ещё мелочи

• Заметки-плашки — !!! note / tip / warning / danger, сворачиваемые — ???.
• Вкладки === "Вкладка", чек-листы - [ ], спойлеры, эмодзи :smile:, клавиши ++ctrl+s++.
• Списки определений (Термин + строка : определение), верхние x^2^ и нижние H~2~O индексы, выделение ==mark==, зачёркнутое ~~текст~~.
• Инлайн-спан без стилей %%текст%% — носитель attr_list.

Куда смотреть дальше

Серия #справка по форматам: Markdown · attr_list и утилиты · MathJax · Mermaid · Vega-Lite · Видео · Эмодзи.