Блок 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.

Для доклада PDF — ок. Для сайта лучше HTML.

Mermaid

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

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

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

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

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

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

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

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

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

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

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

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

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

ffmpeg -i img/cover.png -vf "scale=480:-1" -c:v libwebp -quality 75 img_web/cover-480.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 -version.

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