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

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

<img src="img/ffmpeg-webp.png" alt="PNG проходит пресс и становится WebP" width="720" />

## Из 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 — крутое видео](https://youtu.be/Ww8MzcBJUd4?si=WxVvv4p86D0WcHQN)**

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

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

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

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

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

```bash
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` создай заранее.

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

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

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

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

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

В HTML потом:

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

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

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

Дальше: кто напишет md за нас, если лень — [блок 3](03-ii.md).