Блок 2. Экспорт и картинки для веба

md — исходник. Людям часто нужен PDF, HTML, слайды. Картинки на сайте лучше лёгкие.

Из Markdown в другие форматы

В Cursor те же расширения, что в VS Code: Ctrl+Shift+X.

Markdown PDF

Расширение: Markdown PDF (yzane.markdown-pdf).

Умеет из открытого .md:

PDF
HTML
PNG (снимок)
иногда Markdown (пересобрать)

Как пользоваться: правый клик по файлу или по превью → Markdown PDF: Export (pdf) / Export (html).

Настройки, которые стоит глянуть один раз:

формат страницы (A4)
поля
ломать ли код на границе страницы
включён ли math (формулы)
тема / CSS — если хочется «не как из Word 2003»

Для доклада PDF — ок. Для сайта лучше HTML (или статический генератор, это уже другой разговор).

Mermaid

Расширение: Markdown Preview Mermaid Support (bierner.markdown-mermaid) — чтобы схемы из блока 1 рисовались в превью.

Без него ```mermaid так и останется серой простынёй.

Markdown PDF часто подхватывает mermaid, если превью его уже рисует. Экспортировал — открой PDF и проверь схемы. Нет схемы — сначала mermaid-плагин, потом снова Export.

Есть ещё Mermaid Editor / предпросмотр отдельных .mmd — не обязательно, если всё живёт внутри md.

Что ещё бывает

Плагин / штука	Зачем
Markdown PDF	быстрый pdf/html из файла
Markdown Preview Mermaid Support	схемы в превью
Markdown All in One	оглавление, шорткаты
Pandoc (уже не плагин, а комбайн)	md → docx/tex/html, если припрёт Word

Для сегодняшнего круга хватает Markdown PDF + Mermaid.

ffmpeg — картинки для вёрстки

ffmpeg — комбайн для видео/аудио/картинок из терминала. Режет ролики, меняет кодеки, клеит. Одна программа вместо зоопарка конвертеров.

Разбор «что это вообще такое» лучше смотреть тут (очень советую):

FFmpeg — крутое видео

Нам из всего комбайна — узкий кусок: для сайта. Тяжёлые PNG/JPG в HTML — страница тупит. Делаем WebP: меньше вес, в браузерах давно ок.

Идея: ширина под макет (например 800px), качество ~80, папка отдельно от исходников.

Из команды ffmpeg.txt:

ffmpeg -i input.jpg -vf "scale=800:-1" -c:v libwebp -quality 80 output.webp

С картинкой из этой папки:

ffmpeg -i img/cover.png -vf "scale=800:-1" -c:v libwebp -quality 80 img_web/cover.webp

Что значат куски:

Кусок	Смысл
`-i ...`	вход
`-vf "scale=800:-1"`	ширина 800, высота сама (пропорции)
`-c:v libwebp`	кодек WebP
`-quality 80`	качество, 80 — нормальный компромисс

Папку img_web создай заранее.

Ещё пара рабочих:

Другая ширина под узкую колонку:

ffmpeg -i img/cover.png -vf "scale=480:-1" -c:v libwebp -quality 75 img_web/cover-480.webp

JPG → WebP без смены размера:

ffmpeg -i input.jpg -c:v libwebp -quality 80 output.webp

В HTML потом:

<img src="img_web/cover.webp" alt="обложка" width="800">

Исходники в img/ не трогаем — это «негатив». На страницу отдаём WebP.

ffmpeg в PATH: в терминале ffmpeg -version. Нет команды — поставь сборку под Windows и переоткрой терминал.

Дальше: кто напишет md за нас, если лень — блок 3.