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

Markdown: из каши в документ

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

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

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

Markdown

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

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

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

Заголовки

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

Большой

Поменьше

Ещё меньше

Мелочь

Акцент

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

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

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

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

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

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

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

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

Списки

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

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

Сайт Markdown

Сноска в тексте[^1].

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

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

лис в рамках

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

Цитаты и код

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

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

Кусок кода с языком — подсветка в превью:

print("привет")

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:

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

С шириной:

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

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

лиса узко

Шире:

лиса шире

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

Или стиль:

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

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

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

<img src="img/cursor-intro.png" alt="cursor" width="220" style="float: left; margin: 0 12px 8px 0;">
cursor Текст обтекает картинку слева. Для лендинга и шпаргалок — самое то. Дальше не забудь сбросить 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=mc2E = mc^2.

Дробь и корень: ab\frac{a}{b}, x\sqrt{x}, 83\sqrt[3]{8}.

Греческое: α,β,γ,π,ω,ℏ\alpha, \beta, \gamma, \pi, \omega, \hbar.

Индекс и степень: xix_i, x2x^2, an+12a_{n+1}^{2}.

Бином: (a+b)n=∑i=0nCni aibn−i\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ℏ∂∂tΨ(r,t)=[−ℏ22m∇2+V(r,t)]Ψ(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)

Система:

{x+y=1x−y=0\begin{cases} x + y = 1 \\ x - y = 0 \end{cases}

Матрица:

(abcd)(xy)=(pq)\begin{pmatrix} a & b \\ c & d \end{pmatrix} \begin{pmatrix} x \\ y \end{pmatrix} = \begin{pmatrix} p \\ q \end{pmatrix}

Интеграл: ∫01x2 dx=13\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 обычно работает.