Блок 1. Языки разметки

Пишем текст с пометками. Программа сама рисует заголовки, списки, формулы. Word так не умеет: там кнопки, тут — символы в файле.

Что	Когда
Markdown	90% документа
HTML	md не умеет (размер картинки, выравнивание)
LaTeX	только формулы
Mermaid	схемы из текста

Markdown

Простой язык. Файл — обычный текст. Открывается где угодно. Git его любит (это потом).

В Cursor / GitHub — GitHub Flavored Markdown. Этого хватает.

Заголовки

# Большой
## Поменьше
### Ещё меньше
#### Мелочь

Большой

Поменьше

Ещё меньше

Мелочь

Акцент

жирный и курсив и оба.

Можно _курсив_ и __жирный__ в исходнике md.

~~зачеркнуто~~ — ошибку видно, но история остаётся.

кусок кода в строке: пишется в обратных кавычках.

Абзацы и разрыв

Пустая строка = новый абзац.

Два пробела в конце строки
дают перенос без нового абзаца.

Горизонтальная линия — три минуса.

Списки

пункт
ещё
- вложенный
- и ещё
последний

первый
второй
1. вложенная нумерация
третий

сделать
уже сделано
не забыть кофе

Ссылки и картинки

Сайт Markdown

Сноска в тексте¹.

Картинка «из коробки» — без размера и выравнивания:

![лис в рамках](img/html-images.png)

лис в рамках

Для сайта так часто мало: огромная PNG, не туда прижата. Тогда HTML — ниже.

Цитаты и код

Цитата.
Можно в несколько строк.

и даже вложенная

print("привет")

console.log("тоже привет");

Таблица

Команда	Что делает
`#`	заголовок
`*` / `-`	список
`**`	жирный
`	код

влево	центр	вправо
a	b	c
10	20	30

Мелочи

Клавиша: Ctrl+Shift+V

Верхний/нижний индекс чистым md нет — это HTML: H₂O, E = mc².

Экранирование в md: пишем \* если нужен символ, а не курсив.

Автоссылка: https://cursor.com

HTML внутри Markdown

Когда md упирается — вставляем HTML. Зачем чаще всего: картинки. В чистом md нельзя сказать «ширина 240px, прижать вправо».

Размер

<img src="img/html-images.png" alt="лиса" width="240">

Узко:

Шире:

Или стиль width: 40%:

Выравнивание

По центру:

центр

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

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

Обтекание текстом:

Текст обтекает картинку слева. Для лендинга и шпаргалок — самое то. Дальше не забудь сбросить float.

Ещё HTML

Спойлер (клик)

Секрет: внутри md можно прятать длинноты. На сайте — тем более.

жёлтым и акцент

Правило: сначала md, HTML — точечно. Целую страницу лучше уже как этот сайт, а не внутри .md.

LaTeX — только формулы

$доска с формулами$

LaTeX — целая система вёрстки научных текстов. Нам сегодня не это. В Markdown живёт кусок: математика в $...$ / $$...$$. Здесь на сайте то же самое рисует KaTeX.

В строке

Энергия: $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}$

Блоком

$$ 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}$

Mermaid

Схемы текстом. Не лезем в Visio. На этой странице их рисует скрипт Mermaid.

Стрелки

flowchart LR
  A[Идея] --> B[Markdown]
  B --> C[Превью]
  C --> D[PDF / HTML]

Ветвление

flowchart TD
  Q{Нужен размер картинки?}
  Q -->|нет| MD[Чистый md]
  Q -->|да| HTML[Тег img]

Кто кому пишет

sequenceDiagram
  participant Я
  participant Cursor
  Я->>Cursor: открой превью
  Cursor-->>Я: вот документ

Дальше: выгрузка и лёгкие картинки — блок 2.

¹ Сноска. В pdf обычно тоже работает.