Подготовил презентацию

2026-09-02 11:58:25 +03:00
commit 251a3975be
52 changed files with 4101 additions and 0 deletions
@@ -0,0 +1,353 @@
+# Блок 1. Языки разметки
+
+<img src="img/markdown-hero.png" alt="Markdown: из каши в документ" width="720" />
+
+Пишем **текст с пометками**. Программа сама рисует заголовки, списки, формулы. 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
+![лис в рамках](img/html-images.png)
+```
+
+![лис в рамках](img/html-images.png)
+
+Для сайта так часто **мало**: огромная PNG, не туда прижата. Тогда HTML — ниже.
+
+### Цитаты и код
+
+> Цитата.
+> Можно в несколько строк.
+>
+> > и даже вложенная
+
+Кусок кода с языком — подсветка в превью:
+
+```python
+print("привет")
+```
+
+```js
+console.log("тоже привет");
+```
+
+Три обратные кавычки + имя языка.
+
+### Таблица
+
+| Команда | Что делает |
+|---|---|
+| `#` | заголовок |
+| `*` / `-` | список |
+| `**` | жирный |
+| `` ` `` | код |
+
+Выравнивание колонок:
+
+| влево | центр | вправо |
+|:---|:---:|---:|
+| a | b | c |
+| 10 | 20 | 30 |
+
+### Мелочи, которые часто нужны
+
+Клавиша: <kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>V</kbd>
+
+Верхний/нижний индекс чистым md **нет** — это уже HTML: H<sub>2</sub>O, E = mc<sup>2</sup>.
+
+Экранирование: пишем `\*` если нужен символ `*`, а не курсив.
+
+Автоссылка: https://cursor.com
+
+---
+
+## HTML внутри Markdown
+
+Когда md упирается — вставляем HTML. Превью Cursor и экспорт в HTML это едят. PDF-плагины — почти всегда тоже, но проверяй.
+
+Зачем чаще всего: **картинки**. В чистом md нельзя сказать «ширина 240px, прижать вправо, обтекание текстом».
+
+<img src="img/html-images.png" alt="три кадра с лисом — нам как раз про размер и выравнивание" width="640" />
+
+### Размер
+
+Чистый md:
+
+```md
+![лиса](img/html-images.png)
+```
+
+С шириной:
+
+```html
+<img src="img/html-images.png" alt="лиса" width="240">
+```
+
+Живьём, узко:
+
+<img src="img/html-images.png" alt="лиса узко" width="240">
+
+Шире:
+
+<img src="img/html-images.png" alt="лиса шире" width="480">
+
+Можно `height`, лучше одно измерение — второе само.
+
+Или стиль:
+
+```html
+<img src="img/html-images.png" alt="лиса" style="width: 40%;">
+```
+
+<img src="img/html-images.png" alt="лиса 40%" style="width: 40%;">
+
+### Выравнивание
+
+По центру:
+
+```html
+<p align="center">
+  <img src="img/html-images.png" alt="центр" width="320">
+</p>
+```
+
+<p align="center">
+  <img src="img/html-images.png" alt="центр" width="320">
+</p>
+
+Вправо + подпись:
+
+```html
+<p align="right">
+  <img src="img/markdown-hero.png" alt="md" width="280"><br>
+  <em>маленькая справа</em>
+</p>
+```
+
+<p align="right">
+  <img src="img/markdown-hero.png" alt="md" width="280"><br>
+  <em>маленькая справа</em>
+</p>
+
+Обтекание текстом (в HTML-странице работает хорошо, в PDF — как повезёт):
+
+```html
+<img src="img/cursor-intro.png" alt="cursor" width="220" style="float: left; margin: 0 12px 8px 0;">
+```
+
+<img src="img/cursor-intro.png" alt="cursor" width="220" style="float: left; margin: 0 12px 8px 0;">
+Текст обтекает картинку слева. Для лендинга и шпаргалок — самое то. Дальше не забудь сбросить float, иначе поедет всё вниз.
+
+<br style="clear: both;">
+
+### Ещё HTML, который спасает в md
+
+<details>
+<summary>Спойлер (клик)</summary>
+
+Секрет: внутри md можно прятать длинноты.
+
+</details>
+
+Цвет и выделение (осторожно, не все экспорты любят):
+
+```html
+<mark>жёлтым</mark>
+<span style="color: #c45c26;">акцент</span>
+```
+
+<mark>жёлтым</mark> и <span style="color: #c45c26;">акцент</span>
+
+Кнопка-ссылка на свой страх и риск:
+
+```html
+<a href="https://www.markdownguide.org/">Markdown Guide</a>
+```
+
+Правило простое: **сначала md, HTML — точечно**. Не верстай всю страницу `<div>`-ами в `.md`, для этого уже HTML-файл.
+
+---
+
+## LaTeX — только формулы
+
+<img src="img/latex-board.png" alt="доска с формулами" width="720" />
+
+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
+
+<img src="img/mermaid-pun.png" alt="русалка рисует блок-схему" width="720" />
+
+Схемы текстом. Не лезем в 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 обычно работает.