277 lines
11 KiB
HTML
277 lines
11 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="ru">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<title>Блок 1. Языки разметки</title>
|
||
<link rel="stylesheet" href="css/style.css">
|
||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.11/dist/katex.min.css">
|
||
</head>
|
||
<body>
|
||
<header class="nav">
|
||
<div class="nav-inner">
|
||
<a class="brand" href="index.html">Демо разметки</a>
|
||
<nav>
|
||
<a href="index.html">Содержание</a>
|
||
<a href="00.html">0. Cursor</a>
|
||
<a class="current" href="01.html">1. Разметка</a>
|
||
<a href="02.html">2. Экспорт</a>
|
||
<a href="03.html">3. ИИ</a>
|
||
<a href="04.html">4. Git</a>
|
||
</nav>
|
||
</div>
|
||
</header>
|
||
|
||
<main class="wrap content">
|
||
<h1>Блок 1. Языки разметки</h1>
|
||
<img src="img/markdown-hero.png" alt="Markdown: из каши в документ" width="720">
|
||
<p>Пишем <strong>текст с пометками</strong>. Программа сама рисует заголовки, списки, формулы. Word так не умеет: там кнопки, тут — символы в файле.</p>
|
||
|
||
<table>
|
||
<thead><tr><th>Что</th><th>Когда</th></tr></thead>
|
||
<tbody>
|
||
<tr><td>Markdown</td><td>90% документа</td></tr>
|
||
<tr><td>HTML</td><td>md не умеет (размер картинки, выравнивание)</td></tr>
|
||
<tr><td>LaTeX</td><td>только формулы</td></tr>
|
||
<tr><td>Mermaid</td><td>схемы из текста</td></tr>
|
||
</tbody>
|
||
</table>
|
||
|
||
<h2>Markdown</h2>
|
||
<p>Простой язык. Файл — обычный текст. Открывается где угодно. Git его любит (это потом).</p>
|
||
<p>В Cursor / GitHub — <strong>GitHub Flavored Markdown</strong>. Этого хватает.</p>
|
||
|
||
<h3>Заголовки</h3>
|
||
<pre><code># Большой
|
||
## Поменьше
|
||
### Ещё меньше
|
||
#### Мелочь</code></pre>
|
||
<h1>Большой</h1>
|
||
<h2>Поменьше</h2>
|
||
<h3>Ещё меньше</h3>
|
||
<h4>Мелочь</h4>
|
||
|
||
<h3>Акцент</h3>
|
||
<p><strong>жирный</strong> и <em>курсив</em> и <strong><em>оба</em></strong>.</p>
|
||
<p>Можно <em>_курсив_</em> и <strong>__жирный__</strong> в исходнике md.</p>
|
||
<p><s>зачеркнуто</s> — ошибку видно, но история остаётся.</p>
|
||
<p><code>кусок кода</code> в строке: пишется в обратных кавычках.</p>
|
||
|
||
<h3>Абзацы и разрыв</h3>
|
||
<p>Пустая строка = новый абзац.</p>
|
||
<p>Два пробела в конце строки<br>дают перенос без нового абзаца.</p>
|
||
<hr>
|
||
<p>Горизонтальная линия — три минуса.</p>
|
||
|
||
<h3>Списки</h3>
|
||
<ul>
|
||
<li>пункт</li>
|
||
<li>ещё
|
||
<ul>
|
||
<li>вложенный</li>
|
||
<li>и ещё</li>
|
||
</ul>
|
||
</li>
|
||
<li>последний</li>
|
||
</ul>
|
||
<ol>
|
||
<li>первый</li>
|
||
<li>второй
|
||
<ol>
|
||
<li>вложенная нумерация</li>
|
||
</ol>
|
||
</li>
|
||
<li>третий</li>
|
||
</ol>
|
||
<ul>
|
||
<li><input type="checkbox" disabled> сделать</li>
|
||
<li><input type="checkbox" disabled checked> уже сделано</li>
|
||
<li><input type="checkbox" disabled> не забыть кофе</li>
|
||
</ul>
|
||
|
||
<h3>Ссылки и картинки</h3>
|
||
<p><a href="https://www.markdownguide.org/">Сайт Markdown</a></p>
|
||
<p>Сноска в тексте<sup><a href="#fn1">1</a></sup>.</p>
|
||
<p>Картинка «из коробки» — без размера и выравнивания:</p>
|
||
<pre><code></code></pre>
|
||
<p><img src="img/html-images.png" alt="лис в рамках"></p>
|
||
<p>Для сайта так часто <strong>мало</strong>: огромная PNG, не туда прижата. Тогда HTML — ниже.</p>
|
||
|
||
<h3>Цитаты и код</h3>
|
||
<blockquote>
|
||
<p>Цитата.<br>Можно в несколько строк.</p>
|
||
<blockquote>и даже вложенная</blockquote>
|
||
</blockquote>
|
||
<pre><code>print("привет")</code></pre>
|
||
<pre><code>console.log("тоже привет");</code></pre>
|
||
|
||
<h3>Таблица</h3>
|
||
<table>
|
||
<thead><tr><th>Команда</th><th>Что делает</th></tr></thead>
|
||
<tbody>
|
||
<tr><td><code>#</code></td><td>заголовок</td></tr>
|
||
<tr><td><code>*</code> / <code>-</code></td><td>список</td></tr>
|
||
<tr><td><code>**</code></td><td>жирный</td></tr>
|
||
<tr><td><code>`</code></td><td>код</td></tr>
|
||
</tbody>
|
||
</table>
|
||
<table>
|
||
<thead>
|
||
<tr>
|
||
<th style="text-align:left">влево</th>
|
||
<th style="text-align:center">центр</th>
|
||
<th style="text-align:right">вправо</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td style="text-align:left">a</td>
|
||
<td style="text-align:center">b</td>
|
||
<td style="text-align:right">c</td>
|
||
</tr>
|
||
<tr>
|
||
<td style="text-align:left">10</td>
|
||
<td style="text-align:center">20</td>
|
||
<td style="text-align:right">30</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
|
||
<h3>Мелочи</h3>
|
||
<p>Клавиша: <kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>V</kbd></p>
|
||
<p>Верхний/нижний индекс чистым md <strong>нет</strong> — это HTML: H<sub>2</sub>O, E = mc<sup>2</sup>.</p>
|
||
<p>Экранирование в md: пишем <code>\*</code> если нужен символ, а не курсив.</p>
|
||
<p>Автоссылка: <a href="https://cursor.com">https://cursor.com</a></p>
|
||
|
||
<hr>
|
||
<h2>HTML внутри Markdown</h2>
|
||
<p>Когда md упирается — вставляем HTML. Зачем чаще всего: <strong>картинки</strong>. В чистом md нельзя сказать «ширина 240px, прижать вправо».</p>
|
||
<img src="img/html-images.png" alt="три кадра с лисом" width="640">
|
||
|
||
<h3>Размер</h3>
|
||
<pre><code><img src="img/html-images.png" alt="лиса" width="240"></code></pre>
|
||
<p>Узко:</p>
|
||
<img src="img/html-images.png" alt="лиса узко" width="240">
|
||
<p>Шире:</p>
|
||
<img src="img/html-images.png" alt="лиса шире" width="480">
|
||
<p>Или стиль <code>width: 40%</code>:</p>
|
||
<img src="img/html-images.png" alt="лиса 40%" style="width: 40%;">
|
||
|
||
<h3>Выравнивание</h3>
|
||
<p>По центру:</p>
|
||
<p align="center">
|
||
<img src="img/html-images.png" alt="центр" width="320">
|
||
</p>
|
||
<p>Вправо + подпись:</p>
|
||
<p align="right">
|
||
<img src="img/markdown-hero.png" alt="md" width="280"><br>
|
||
<em>маленькая справа</em>
|
||
</p>
|
||
<p>Обтекание текстом:</p>
|
||
<img src="img/cursor-intro.png" alt="cursor" width="220" style="float: left; margin: 0 12px 8px 0;">
|
||
<p>Текст обтекает картинку слева. Для лендинга и шпаргалок — самое то. Дальше не забудь сбросить float.</p>
|
||
<br style="clear: both;">
|
||
|
||
<h3>Ещё HTML</h3>
|
||
<details>
|
||
<summary>Спойлер (клик)</summary>
|
||
<p>Секрет: внутри md можно прятать длинноты. На сайте — тем более.</p>
|
||
</details>
|
||
<p><mark>жёлтым</mark> и <span style="color: #c45c26;">акцент</span></p>
|
||
<p>Правило: <strong>сначала md, HTML — точечно</strong>. Целую страницу лучше уже как этот сайт, а не внутри <code>.md</code>.</p>
|
||
|
||
<hr>
|
||
<h2>LaTeX — только формулы</h2>
|
||
<img src="img/latex-board.png" alt="доска с формулами" width="720">
|
||
<p>LaTeX — целая система вёрстки научных текстов. <strong>Нам сегодня не это.</strong> В Markdown живёт кусок: математика в <code>$...$</code> / <code>$$...$$</code>. Здесь на сайте то же самое рисует KaTeX.</p>
|
||
|
||
<h3>В строке</h3>
|
||
<p>Энергия: $E = mc^2$.</p>
|
||
<p>Дробь и корень: $\frac{a}{b}$, $\sqrt{x}$, $\sqrt[3]{8}$.</p>
|
||
<p>Греческое: $\alpha, \beta, \gamma, \pi, \omega, \hbar$.</p>
|
||
<p>Индекс и степень: $x_i$, $x^2$, $a_{n+1}^{2}$.</p>
|
||
<p>Бином: $\left( a + b \right)^n = \sum_{i=0}^n C_n^i \, a^i b^{n-i}$</p>
|
||
|
||
<h3>Блоком</h3>
|
||
$$
|
||
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)
|
||
$$
|
||
<p>Система:</p>
|
||
$$
|
||
\begin{cases}
|
||
x + y = 1 \\
|
||
x - y = 0
|
||
\end{cases}
|
||
$$
|
||
<p>Матрица:</p>
|
||
$$
|
||
\begin{pmatrix}
|
||
a & b \\
|
||
c & d
|
||
\end{pmatrix}
|
||
\begin{pmatrix} x \\ y \end{pmatrix}
|
||
=
|
||
\begin{pmatrix} p \\ q \end{pmatrix}
|
||
$$
|
||
<p>Интеграл: $\displaystyle \int_0^1 x^2\,dx = \frac{1}{3}$</p>
|
||
|
||
<hr>
|
||
<h2>Mermaid</h2>
|
||
<img src="img/mermaid-pun.png" alt="русалка рисует блок-схему" width="720">
|
||
<p>Схемы текстом. Не лезем в Visio. На этой странице их рисует скрипт Mermaid.</p>
|
||
|
||
<h3>Стрелки</h3>
|
||
<pre class="mermaid">
|
||
flowchart LR
|
||
A[Идея] --> B[Markdown]
|
||
B --> C[Превью]
|
||
C --> D[PDF / HTML]
|
||
</pre>
|
||
|
||
<h3>Ветвление</h3>
|
||
<pre class="mermaid">
|
||
flowchart TD
|
||
Q{Нужен размер картинки?}
|
||
Q -->|нет| MD[Чистый md]
|
||
Q -->|да| HTML[Тег img]
|
||
</pre>
|
||
|
||
<h3>Кто кому пишет</h3>
|
||
<pre class="mermaid">
|
||
sequenceDiagram
|
||
participant Я
|
||
participant Cursor
|
||
Я->>Cursor: открой превью
|
||
Cursor-->>Я: вот документ
|
||
</pre>
|
||
|
||
<p>Дальше: выгрузка и лёгкие картинки — <a href="02.html">блок 2</a>.</p>
|
||
<p class="footnote" id="fn1"><sup>1</sup> Сноска. В pdf обычно тоже работает.</p>
|
||
|
||
<div class="pager">
|
||
<a href="00.html">← Блок 0. Cursor</a>
|
||
<a href="02.html">Блок 2. Экспорт →</a>
|
||
</div>
|
||
</main>
|
||
|
||
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.11/dist/katex.min.js"></script>
|
||
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.11/dist/contrib/auto-render.min.js"></script>
|
||
<script>
|
||
document.addEventListener("DOMContentLoaded", function () {
|
||
renderMathInElement(document.body, {
|
||
delimiters: [
|
||
{ left: "$$", right: "$$", display: true },
|
||
{ left: "$", right: "$", display: false }
|
||
],
|
||
ignoredTags: ["script", "noscript", "style", "textarea", "pre", "code"]
|
||
});
|
||
});
|
||
</script>
|
||
<script src="https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.min.js"></script>
|
||
<script>
|
||
mermaid.initialize({ startOnLoad: true, theme: "neutral" });
|
||
</script>
|
||
</body>
|
||
</html>
|