Этот пост показывает, какие элементы можно использовать в блогах и обновлениях BOOSTER. Его удобно держать как пример для редактора: копируйте нужный блок и меняйте текст, ссылки или картинки.

Заголовки и обычный текст

Используйте #, ##, ### для структуры. Первый # Заголовок становится названием страницы, а внутри статьи автоматически убирается, чтобы не дублировать H1.

Подзаголовок третьего уровня

Обычный текст поддерживает жирное выделение, inline-code, ссылки и переносы строк. Например: перейти к разделу обновлений.

Списки

Маркированный список:

  • Booster обновления можно публиковать отдельно от блога.
  • У каждого обновления есть свой URL.
  • Видео вставляется простой ссылкой на отдельной строке.

Нумерованный список:

  1. Подготовить текст обновления.
  2. Добавить картинки или видео.
  3. Проверить предпросмотр в админке.
  4. Опубликовать.

Чеклист:

  • Создать раздел /updates.
  • Добавить поддержку YouTube.
  • Разделить обычные видео и Shorts.
  • Удалить тестовые публикации перед релизом, если они не нужны.

Цитаты

Цитату можно использовать для важного вывода, результата обновления или короткого комментария команды.

Таблицы

Элемент Как вставлять Как выглядит
Обычное видео YouTube-ссылка watch или youtu.be Широкий блок 16:9
Shorts Ссылка /shorts/... Вертикальный блок 9:16
Картинка `![alt](url "layout caption: текст")`
Код Тройные кавычки Тёмный блок кода

Обычное YouTube-видео

Ссылка на обычное видео должна стоять отдельной строкой:

YouTube Shorts

Ссылка Shorts тоже ставится отдельной строкой. Она автоматически отображается вертикальным блоком:

Изображения

Картинки можно вставлять обычным Markdown. В кавычках после ссылки можно указать layout и подпись.

Широкая картинка:

Канбан-доска BOOSTER
Wide - хорошо подходит для скриншотов интерфейса

Картинка-обложка:

Интерфейс BOOSTER
Cover - крупный визуальный блок для важного экрана

Небольшая картинка:

Мобильное приложение BOOSTER
Small - компактный блок по центру

Картинка справа:

Интерфейс справа
Right - картинка обтекается текстом справа

Этот абзац показывает обтекание картинки. Такой формат удобно использовать, когда нужно коротко описать экран, не разрывая текст большим визуальным блоком. На мобильных устройствах плавающие изображения автоматически становятся обычными блоками на всю ширину.

Картинка слева:

Интерфейс слева
Left - картинка обтекается текстом слева

Ещё один абзац для проверки обтекания. Такой вариант можно использовать в длинных текстах, где картинка дополняет мысль, но не должна занимать весь экран.

Код

ts
type UpdatePost = {
  slug: string;
  title: string;
  videoType?: "video" | "shorts";
};

const post: UpdatePost = {
  slug: "vozmozhnosti-oformleniya-postov",
  title: "Возможности оформления постов",
  videoType: "shorts"
};

Mermaid-блок

Mermaid сейчас показывается как безопасный блок кода. Его можно использовать как заготовку для схем:

Mermaid diagram
flowchart LR
  A[Markdown] --> B[Server render]
  B --> C[SEO page]
  B --> D[Preview in admin]

HTML экранируется

Если вставить HTML, он не выполнится как код. Это сделано специально, чтобы посты оставались безопасными.

<script>alert("Этот код не выполнится")</script>

Мини-шаблон для нового обновления

md
---
title: "Название обновления"
description: "Короткое описание для карточки и SEO."
slug: "nazvanie-novoj-funkcii"
date: "2026-07-25T13:05:00.000Z"
tags: ["Функция", "Видео"]
draft: false
---

# Название обновления

Коротко опишите, что появилось и кому это полезно.

https://youtube.com/shorts/v4PFlQffE1w?si=hMtS_x-hRfpta2dC