cursor-demo/01-razmetka.md

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

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

Три слоя, которые сегодня трогаем:

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

---

Markdown

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

Синтаксис чуть плавает между диалектами. В Cursor / GitHub / большинстве превью — GitHub Flavored Markdown. Этого хватает.

Ниже — живые примеры. Смотри превью, не исходник в одиночку.

Заголовки

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

Большой

Поменьше

Ещё меньше

Мелочь

Акцент

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

Можно _курсив_ и __жирный__.

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

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

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

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

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

---

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

Списки

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

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

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

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

Сайт 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².

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

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

---

HTML внутри Markdown

Когда md упирается — вставляем HTML. Превью Cursor и экспорт в HTML это едят. PDF-плагины — почти всегда тоже, но проверяй.

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

Размер

Чистый md:

![лиса](img/html-images.png)

С шириной:

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

Живьём, узко:

Шире:

Можно height, лучше одно измерение — второе само.

Или стиль:

<img src="img/html-images.png" alt="лиса" style="width: 40%;">

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

По центру:

<p align="center">
  <img src="img/html-images.png" alt="центр" width="320">
</p>

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

<p align="right">
  <img src="img/markdown-hero.png" alt="md" width="280"><br>
  <em>маленькая справа</em>
</p>

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

Обтекание текстом (в HTML-странице работает хорошо, в PDF — как повезёт):

<img src="img/cursor-intro.png" alt="cursor" width="220" style="float: left; margin: 0 12px 8px 0;">

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

Ещё HTML, который спасает в md

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

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

Цвет и выделение (осторожно, не все экспорты любят):

<mark>жёлтым</mark>
<span style="color: #c45c26;">акцент</span>

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

Кнопка-ссылка на свой страх и риск:

<a href="https://www.markdownguide.org/">Markdown Guide</a>

Правило простое: сначала md, HTML — точечно. Не верстай всю страницу <div>-ами в .md, для этого уже HTML-файл.

---

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

LaTeX — это целая система вёрстки научных текстов (книги, статьи, диссертации). Мощь, пакеты, боль с компиляцией.

Нам сегодня не это. В Markdown (и в Cursor) живёт кусок: математика в $...$ / $$...$$. Под капотом обычно KaTeX или MathJax. Документ остаётся .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}

Блоком (по центру, крупно)

$$
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).

Три самых простых.

Стрелки

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-->>Я: вот документ

Сложные mindmap / pie — потом, если припрёт. Для доклада хватает flowchart.

Дальше: как это всё выгрузить из редактора и как не тащить на сайт пятимегабайтные PNG — блок 2.

---

1. Сноска внизу файла. В pdf обычно работает. ↩︎