117 lines
4.7 KiB
Markdown
117 lines
4.7 KiB
Markdown
# Блок 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).
|