Подготовил презентацию

2026-09-02 11:58:25 +03:00
commit 251a3975be
52 changed files with 4101 additions and 0 deletions
@@ -0,0 +1,276 @@
+<!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>![лис в рамках](img/html-images.png)</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>&lt;img src="img/html-images.png" alt="лиса" width="240"&gt;</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>