354 lines
9.7 KiB
Markdown
354 lines
9.7 KiB
Markdown
# Блок 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
|
||
|
||
```
|
||
|
||
|
||
|
||
Для сайта так часто **мало**: огромная 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
|
||
|
||
```
|
||
|
||
С шириной:
|
||
|
||
```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 обычно работает.
|