# Блок 1. Языки разметки Markdown: из каши в документ Пишем **текст с пометками**. Программа сама рисует заголовки, списки, формулы. 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 | ### Мелочи, которые часто нужны Клавиша: Ctrl+Shift+V Верхний/нижний индекс чистым md **нет** — это уже HTML: H2O, E = mc2. Экранирование: пишем `\*` если нужен символ `*`, а не курсив. Автоссылка: https://cursor.com --- ## HTML внутри Markdown Когда md упирается — вставляем HTML. Превью Cursor и экспорт в HTML это едят. PDF-плагины — почти всегда тоже, но проверяй. Зачем чаще всего: **картинки**. В чистом md нельзя сказать «ширина 240px, прижать вправо, обтекание текстом». три кадра с лисом — нам как раз про размер и выравнивание ### Размер Чистый md: ```md ![лиса](img/html-images.png) ``` С шириной: ```html лиса ``` Живьём, узко: лиса узко Шире: лиса шире Можно `height`, лучше одно измерение — второе само. Или стиль: ```html лиса ``` лиса 40% ### Выравнивание По центру: ```html

центр

```

центр

Вправо + подпись: ```html

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

```

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

Обтекание текстом (в HTML-странице работает хорошо, в PDF — как повезёт): ```html cursor ``` cursor Текст обтекает картинку слева. Для лендинга и шпаргалок — самое то. Дальше не забудь сбросить float, иначе поедет всё вниз.
### Ещё HTML, который спасает в md
Спойлер (клик) Секрет: внутри md можно прятать длинноты.
Цвет и выделение (осторожно, не все экспорты любят): ```html жёлтым акцент ``` жёлтым и акцент Кнопка-ссылка на свой страх и риск: ```html Markdown Guide ``` Правило простое: **сначала md, HTML — точечно**. Не верстай всю страницу `
`-ами в `.md`, для этого уже HTML-файл. --- ## LaTeX — только формулы доска с формулами 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 обычно работает.