# Блок 1. Языки разметки
Пишем **текст с пометками**. Программа сама рисует заголовки, списки, формулы. Word так не умеет: там кнопки, тут — символы в файле.
Три слоя, которые сегодня трогаем:
| Что | Когда |
|---|---|
| Markdown | 90% документа |
| HTML | md не умеет (размер картинки, выравнивание, пара трюков) |
| LaTeX | только формулы |
| Mermaid | схемы из текста |
---
## Markdown
Простой язык. Файл — обычный текст. Открывается где угодно. Git его любит (это потом).
Синтаксис чуть плавает между диалектами. В Cursor / GitHub / большинстве превью — **GitHub Flavored Markdown**. Этого хватает.
Ниже — живые примеры. Смотри превью, не исходник в одиночку.
### Заголовки
```md
# Большой
## Поменьше
### Ещё меньше
#### Мелочь
```
# Большой
## Поменьше
### Ещё меньше
#### Мелочь
### Акцент
**жирный** и *курсив* и ***оба***.
Можно `_курсив_` и `__жирный__`.
~~зачеркнуто~~ — ошибку видно, но история остаётся.
`кусок кода` в строке: пишется в обратных кавычках.
### Абзацы и разрыв
Пустая строка = новый абзац.
Два пробела в конце строки
дают перенос без нового абзаца.
---
Горизонтальная линия — три минуса.
### Списки
- пункт
- ещё
- вложенный
- и ещё
- последний
1. первый
2. второй
1. вложенная нумерация
3. третий
- [ ] сделать
- [x] уже сделано
- [ ] не забыть кофе
### Ссылки и картинки
[Сайт Markdown](https://www.markdownguide.org/)
Сноска в тексте[^1].
Картинка «из коробки» — без размера и выравнивания:
```md

```

Для сайта так часто **мало**: огромная PNG, не туда прижата. Тогда HTML — ниже.
### Цитаты и код
> Цитата.
> Можно в несколько строк.
>
> > и даже вложенная
Кусок кода с языком — подсветка в превью:
```python
print("привет")
```
```js
console.log("тоже привет");
```
Три обратные кавычки + имя языка.
### Таблица
| Команда | Что делает |
|---|---|
| `#` | заголовок |
| `*` / `-` | список |
| `**` | жирный |
| `` ` `` | код |
Выравнивание колонок:
| влево | центр | вправо |
|:---|:---:|---:|
| a | b | c |
| 10 | 20 | 30 |
### Мелочи, которые часто нужны
Клавиша: Ctrl+Shift+V
Верхний/нижний индекс чистым md **нет** — это уже HTML: H2O, E = mc2.
Экранирование: пишем `\*` если нужен символ `*`, а не курсив.
Автоссылка: https://cursor.com
---
## HTML внутри Markdown
Когда md упирается — вставляем HTML. Превью Cursor и экспорт в HTML это едят. PDF-плагины — почти всегда тоже, но проверяй.
Зачем чаще всего: **картинки**. В чистом md нельзя сказать «ширина 240px, прижать вправо, обтекание текстом».
### Размер
Чистый md:
```md

```
С шириной:
```html
```
Живьём, узко:
Шире:
Можно `height`, лучше одно измерение — второе само.
Или стиль:
```html
```
### Выравнивание
По центру:
```html

маленькая справа

маленькая справа
```
Текст обтекает картинку слева. Для лендинга и шпаргалок — самое то. Дальше не забудь сбросить float, иначе поедет всё вниз.
LaTeX — это целая система вёрстки научных текстов (книги, статьи, диссертации). Мощь, пакеты, боль с компиляцией.
**Нам сегодня не это.** В Markdown (и в Cursor) живёт кусок: математика в `$...$` / `$$...$$`. Под капотом обычно KaTeX или MathJax. Документ остаётся `.md`.
### В строке
```md
Энергия: $E = mc^2$.
```
Энергия: $E = mc^2$.
Дробь и корень: $\frac{a}{b}$, $\sqrt{x}$, $\sqrt[3]{8}$.
Греческое: $\alpha, \beta, \gamma, \pi, \omega, \hbar$.
Индекс и степень: $x_i$, $x^2$, $a_{n+1}^{2}$.
Бином: $\left( a + b \right)^n = \sum_{i=0}^n C_n^i \, a^i b^{n-i}$
### Блоком (по центру, крупно)
```md
$$
i\hbar\frac{\partial}{\partial t}\Psi(\mathbf{r}, t)
= \left[-\frac{\hbar^2}{2m}\nabla^2 + V(\mathbf{r}, t)\right]\Psi(\mathbf{r}, t)
$$
```
$$
i\hbar\frac{\partial}{\partial t}\Psi(\mathbf{r}, t)
= \left[-\frac{\hbar^2}{2m}\nabla^2 + V(\mathbf{r}, t)\right]\Psi(\mathbf{r}, t)
$$
Система:
$$
\begin{cases}
x + y = 1 \\
x - y = 0
\end{cases}
$$
Матрица:
$$
\begin{pmatrix}
a & b \\
c & d
\end{pmatrix}
\begin{pmatrix} x \\ y \end{pmatrix}
=
\begin{pmatrix} p \\ q \end{pmatrix}
$$
Интеграл: $\displaystyle \int_0^1 x^2\,dx = \frac{1}{3}$
Если формула в превью «сырая» — включи плагин Markdown+Math или проверь, что в настройках превью включён math. В PDF смотри, что экспортник тоже жуёт `$`.
---
## Mermaid
Схемы текстом. Не лезем в Visio. В Cursor нужен превью с поддержкой mermaid (часто хватает Markdown Preview + расширение Mermaid).
Три самых простых.
### Стрелки
```mermaid
flowchart LR
A[Идея] --> B[Markdown]
B --> C[Превью]
C --> D[PDF / HTML]
```
### Ветвление
```mermaid
flowchart TD
Q{Нужен размер картинки?}
Q -->|нет| MD[Чистый md]
Q -->|да| HTML[Тег img]
```
### Кто кому пишет
```mermaid
sequenceDiagram
participant Я
participant Cursor
Я->>Cursor: открой превью
Cursor-->>Я: вот документ
```
Сложные mindmap / pie — потом, если припрёт. Для доклада хватает flowchart.
Дальше: как это всё выгрузить из редактора и как не тащить на сайт пятимегабайтные PNG — [блок 2](02-eksport-i-ffmpeg.md).
[^1]: Сноска внизу файла. В pdf обычно работает.