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

This commit is contained in:
Legenda
2026-09-02 11:58:25 +03:00
commit 251a3975be
52 changed files with 4101 additions and 0 deletions
+381
View File
@@ -0,0 +1,381 @@
<!DOCTYPE html>
<html>
<head>
<title>00-cursor.md</title>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
<style>
/* https://github.com/microsoft/vscode/blob/master/extensions/markdown-language-features/media/markdown.css */
/*---------------------------------------------------------------------------------------------
* Copyright (c) Microsoft Corporation. All rights reserved.
* Licensed under the MIT License. See License.txt in the project root for license information.
*--------------------------------------------------------------------------------------------*/
body {
font-family: var(--vscode-markdown-font-family, -apple-system, BlinkMacSystemFont, "Segoe WPC", "Segoe UI", "Ubuntu", "Droid Sans", sans-serif);
font-size: var(--vscode-markdown-font-size, 14px);
padding: 0 26px;
line-height: var(--vscode-markdown-line-height, 22px);
word-wrap: break-word;
}
#code-csp-warning {
position: fixed;
top: 0;
right: 0;
color: white;
margin: 16px;
text-align: center;
font-size: 12px;
font-family: sans-serif;
background-color:#444444;
cursor: pointer;
padding: 6px;
box-shadow: 1px 1px 1px rgba(0,0,0,.25);
}
#code-csp-warning:hover {
text-decoration: none;
background-color:#007acc;
box-shadow: 2px 2px 2px rgba(0,0,0,.25);
}
body.scrollBeyondLastLine {
margin-bottom: calc(100vh - 22px);
}
body.showEditorSelection .code-line {
position: relative;
}
body.showEditorSelection .code-active-line:before,
body.showEditorSelection .code-line:hover:before {
content: "";
display: block;
position: absolute;
top: 0;
left: -12px;
height: 100%;
}
body.showEditorSelection li.code-active-line:before,
body.showEditorSelection li.code-line:hover:before {
left: -30px;
}
.vscode-light.showEditorSelection .code-active-line:before {
border-left: 3px solid rgba(0, 0, 0, 0.15);
}
.vscode-light.showEditorSelection .code-line:hover:before {
border-left: 3px solid rgba(0, 0, 0, 0.40);
}
.vscode-light.showEditorSelection .code-line .code-line:hover:before {
border-left: none;
}
.vscode-dark.showEditorSelection .code-active-line:before {
border-left: 3px solid rgba(255, 255, 255, 0.4);
}
.vscode-dark.showEditorSelection .code-line:hover:before {
border-left: 3px solid rgba(255, 255, 255, 0.60);
}
.vscode-dark.showEditorSelection .code-line .code-line:hover:before {
border-left: none;
}
.vscode-high-contrast.showEditorSelection .code-active-line:before {
border-left: 3px solid rgba(255, 160, 0, 0.7);
}
.vscode-high-contrast.showEditorSelection .code-line:hover:before {
border-left: 3px solid rgba(255, 160, 0, 1);
}
.vscode-high-contrast.showEditorSelection .code-line .code-line:hover:before {
border-left: none;
}
img {
max-width: 100%;
max-height: 100%;
}
a {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
a:focus,
input:focus,
select:focus,
textarea:focus {
outline: 1px solid -webkit-focus-ring-color;
outline-offset: -1px;
}
hr {
border: 0;
height: 2px;
border-bottom: 2px solid;
}
h1 {
padding-bottom: 0.3em;
line-height: 1.2;
border-bottom-width: 1px;
border-bottom-style: solid;
}
h1, h2, h3 {
font-weight: normal;
}
table {
border-collapse: collapse;
}
table > thead > tr > th {
text-align: left;
border-bottom: 1px solid;
}
table > thead > tr > th,
table > thead > tr > td,
table > tbody > tr > th,
table > tbody > tr > td {
padding: 5px 10px;
}
table > tbody > tr + tr > td {
border-top: 1px solid;
}
blockquote {
margin: 0 7px 0 5px;
padding: 0 16px 0 10px;
border-left-width: 5px;
border-left-style: solid;
}
code {
font-family: Menlo, Monaco, Consolas, "Droid Sans Mono", "Courier New", monospace, "Droid Sans Fallback";
font-size: 1em;
line-height: 1.357em;
}
body.wordWrap pre {
white-space: pre-wrap;
}
pre:not(.hljs),
pre.hljs code > div {
padding: 16px;
border-radius: 3px;
overflow: auto;
}
pre code {
color: var(--vscode-editor-foreground);
tab-size: 4;
}
/** Theming */
.vscode-light pre {
background-color: rgba(220, 220, 220, 0.4);
}
.vscode-dark pre {
background-color: rgba(10, 10, 10, 0.4);
}
.vscode-high-contrast pre {
background-color: rgb(0, 0, 0);
}
.vscode-high-contrast h1 {
border-color: rgb(0, 0, 0);
}
.vscode-light table > thead > tr > th {
border-color: rgba(0, 0, 0, 0.69);
}
.vscode-dark table > thead > tr > th {
border-color: rgba(255, 255, 255, 0.69);
}
.vscode-light h1,
.vscode-light hr,
.vscode-light table > tbody > tr + tr > td {
border-color: rgba(0, 0, 0, 0.18);
}
.vscode-dark h1,
.vscode-dark hr,
.vscode-dark table > tbody > tr + tr > td {
border-color: rgba(255, 255, 255, 0.18);
}
</style>
<style>
/* Tomorrow Theme */
/* http://jmblog.github.com/color-themes-for-google-code-highlightjs */
/* Original theme - https://github.com/chriskempson/tomorrow-theme */
/* Tomorrow Comment */
.hljs-comment,
.hljs-quote {
color: #8e908c;
}
/* Tomorrow Red */
.hljs-variable,
.hljs-template-variable,
.hljs-tag,
.hljs-name,
.hljs-selector-id,
.hljs-selector-class,
.hljs-regexp,
.hljs-deletion {
color: #c82829;
}
/* Tomorrow Orange */
.hljs-number,
.hljs-built_in,
.hljs-builtin-name,
.hljs-literal,
.hljs-type,
.hljs-params,
.hljs-meta,
.hljs-link {
color: #f5871f;
}
/* Tomorrow Yellow */
.hljs-attribute {
color: #eab700;
}
/* Tomorrow Green */
.hljs-string,
.hljs-symbol,
.hljs-bullet,
.hljs-addition {
color: #718c00;
}
/* Tomorrow Blue */
.hljs-title,
.hljs-section {
color: #4271ae;
}
/* Tomorrow Purple */
.hljs-keyword,
.hljs-selector-tag {
color: #8959a8;
}
.hljs {
display: block;
overflow-x: auto;
color: #4d4d4c;
padding: 0.5em;
}
.hljs-emphasis {
font-style: italic;
}
.hljs-strong {
font-weight: bold;
}
</style>
<style>
/*
* Markdown PDF CSS
*/
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe WPC", "Segoe UI", "Ubuntu", "Droid Sans", sans-serif, "Meiryo";
padding: 0 12px;
}
pre {
background-color: #f8f8f8;
border: 1px solid #cccccc;
border-radius: 3px;
overflow-x: auto;
white-space: pre-wrap;
overflow-wrap: break-word;
}
pre:not(.hljs) {
padding: 23px;
line-height: 19px;
}
blockquote {
background: rgba(127, 127, 127, 0.1);
border-color: rgba(0, 122, 204, 0.5);
}
.emoji {
height: 1.4em;
}
code {
font-size: 14px;
line-height: 19px;
}
/* for inline code */
:not(pre):not(.hljs) > code {
color: #C9AE75; /* Change the old color so it seems less like an error */
font-size: inherit;
}
/* Page Break : use <div class="page"/> or <div class="page"></div> to insert page break
-------------------------------------------------------- */
.page {
page-break-after: always;
}
</style>
<script src="https://unpkg.com/mermaid/dist/mermaid.min.js"></script>
</head>
<body>
<script>
mermaid.initialize({
startOnLoad: true,
theme: document.body.classList.contains('vscode-dark') || document.body.classList.contains('vscode-high-contrast')
? 'dark'
: 'default'
});
</script>
<h1 id="блок-0-cursor--зачем-он-тут">Блок 0. Cursor — зачем он тут</h1>
<img src="img/cursor-intro.png" alt="Cursor как мастерская" width="720" />
<p>Это редактор кода (форк VS Code) с нормальным ИИ внутри: чат видит файлы, может править их сам, не через копипаст.</p>
<p>Сегодня он нам нужен как <strong>сцена</strong>:</p>
<ul>
<li>слева текст <code>.md</code></li>
<li>справа превью (как это выглядит «для людей»)</li>
<li>плагины те же, что в VS Code: Markdown PDF, Mermaid и т.д.</li>
<li>если надо быстро привести документ в порядок — ИИ в чате, не Word</li>
</ul>
<p>Подробнее про ИИ — в <a href="03-ii.md">блоке 3</a>. Сейчас просто открываем файлы и смотрим, как разметка оживает.</p>
</body>
</html>
+14
View File
@@ -0,0 +1,14 @@
# Блок 0. Cursor — зачем он тут
<img src="img/cursor-intro.png" alt="Cursor как мастерская" width="720" />
Это редактор кода (форк VS Code) с нормальным ИИ внутри: чат видит файлы, может править их сам, не через копипаст.
Сегодня он нам нужен как **сцена**:
- слева текст `.md`
- справа превью (как это выглядит «для людей»)
- плагины те же, что в VS Code: Markdown PDF, Mermaid и т.д.
- если надо быстро привести документ в порядок — ИИ в чате, не Word
Подробнее про ИИ — в [блоке 3](03-ii.md). Сейчас просто открываем файлы и смотрим, как разметка оживает.
+677
View File
File diff suppressed because one or more lines are too long
+353
View File
@@ -0,0 +1,353 @@
# Блок 1. Языки разметки
<img src="img/markdown-hero.png" alt="Markdown: из каши в документ" width="720" />
Пишем **текст с пометками**. Программа сама рисует заголовки, списки, формулы. Word так не умеет: там кнопки, тут — символы в файле.
Три слоя, которые сегодня трогаем:
| Что | Когда |
|---|---|
| Markdown | 90% документа |
| HTML | md не умеет (размер картинки, выравнивание, пара трюков) |
| LaTeX | только формулы |
| Mermaid | схемы из текста |
---
## Markdown
Простой язык. Файл — обычный текст. Открывается где угодно. Git его любит (это потом).
Синтаксис чуть плавает между диалектами. В Cursor / GitHub / большинстве превью — **GitHub Flavored Markdown**. Этого хватает.
Ниже — живые примеры. Смотри превью, не исходник в одиночку.
### Заголовки
```md
# Большой
## Поменьше
### Ещё меньше
#### Мелочь
```
# Большой
## Поменьше
### Ещё меньше
#### Мелочь
### Акцент
**жирный** и *курсив* и ***оба***.
Можно `_курсив_` и `__жирный__`.
~~зачеркнуто~~ — ошибку видно, но история остаётся.
`кусок кода` в строке: пишется в обратных кавычках.
### Абзацы и разрыв
Пустая строка = новый абзац.
Два пробела в конце строки
дают перенос без нового абзаца.
---
Горизонтальная линия — три минуса.
### Списки
- пункт
- ещё
- вложенный
- и ещё
- последний
1. первый
2. второй
1. вложенная нумерация
3. третий
- [ ] сделать
- [x] уже сделано
- [ ] не забыть кофе
### Ссылки и картинки
[Сайт Markdown](https://www.markdownguide.org/)
Сноска в тексте[^1].
Картинка «из коробки» — без размера и выравнивания:
```md
![лис в рамках](img/html-images.png)
```
![лис в рамках](img/html-images.png)
Для сайта так часто **мало**: огромная PNG, не туда прижата. Тогда HTML — ниже.
### Цитаты и код
> Цитата.
> Можно в несколько строк.
>
> > и даже вложенная
Кусок кода с языком — подсветка в превью:
```python
print("привет")
```
```js
console.log("тоже привет");
```
Три обратные кавычки + имя языка.
### Таблица
| Команда | Что делает |
|---|---|
| `#` | заголовок |
| `*` / `-` | список |
| `**` | жирный |
| `` ` `` | код |
Выравнивание колонок:
| влево | центр | вправо |
|:---|:---:|---:|
| a | b | c |
| 10 | 20 | 30 |
### Мелочи, которые часто нужны
Клавиша: <kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>V</kbd>
Верхний/нижний индекс чистым md **нет** — это уже HTML: H<sub>2</sub>O, E = mc<sup>2</sup>.
Экранирование: пишем `\*` если нужен символ `*`, а не курсив.
Автоссылка: https://cursor.com
---
## HTML внутри Markdown
Когда md упирается — вставляем HTML. Превью Cursor и экспорт в HTML это едят. PDF-плагины — почти всегда тоже, но проверяй.
Зачем чаще всего: **картинки**. В чистом md нельзя сказать «ширина 240px, прижать вправо, обтекание текстом».
<img src="img/html-images.png" alt="три кадра с лисом — нам как раз про размер и выравнивание" width="640" />
### Размер
Чистый md:
```md
![лиса](img/html-images.png)
```
С шириной:
```html
<img src="img/html-images.png" alt="лиса" width="240">
```
Живьём, узко:
<img src="img/html-images.png" alt="лиса узко" width="240">
Шире:
<img src="img/html-images.png" alt="лиса шире" width="480">
Можно `height`, лучше одно измерение — второе само.
Или стиль:
```html
<img src="img/html-images.png" alt="лиса" style="width: 40%;">
```
<img src="img/html-images.png" alt="лиса 40%" style="width: 40%;">
### Выравнивание
По центру:
```html
<p align="center">
<img src="img/html-images.png" alt="центр" width="320">
</p>
```
<p align="center">
<img src="img/html-images.png" alt="центр" width="320">
</p>
Вправо + подпись:
```html
<p align="right">
<img src="img/markdown-hero.png" alt="md" width="280"><br>
<em>маленькая справа</em>
</p>
```
<p align="right">
<img src="img/markdown-hero.png" alt="md" width="280"><br>
<em>маленькая справа</em>
</p>
Обтекание текстом (в HTML-странице работает хорошо, в PDF — как повезёт):
```html
<img src="img/cursor-intro.png" alt="cursor" width="220" style="float: left; margin: 0 12px 8px 0;">
```
<img src="img/cursor-intro.png" alt="cursor" width="220" style="float: left; margin: 0 12px 8px 0;">
Текст обтекает картинку слева. Для лендинга и шпаргалок — самое то. Дальше не забудь сбросить float, иначе поедет всё вниз.
<br style="clear: both;">
### Ещё HTML, который спасает в md
<details>
<summary>Спойлер (клик)</summary>
Секрет: внутри md можно прятать длинноты.
</details>
Цвет и выделение (осторожно, не все экспорты любят):
```html
<mark>жёлтым</mark>
<span style="color: #c45c26;">акцент</span>
```
<mark>жёлтым</mark> и <span style="color: #c45c26;">акцент</span>
Кнопка-ссылка на свой страх и риск:
```html
<a href="https://www.markdownguide.org/">Markdown Guide</a>
```
Правило простое: **сначала md, HTML — точечно**. Не верстай всю страницу `<div>`-ами в `.md`, для этого уже HTML-файл.
---
## LaTeX — только формулы
<img src="img/latex-board.png" alt="доска с формулами" width="720" />
LaTeX — это целая система вёрстки научных текстов (книги, статьи, диссертации). Мощь, пакеты, боль с компиляцией.
**Нам сегодня не это.** В Markdown (и в Cursor) живёт кусок: математика в `$...$` / `$$...$$`. Под капотом обычно KaTeX или MathJax. Документ остаётся `.md`.
### В строке
```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}$
### Блоком (по центру, крупно)
```md
$$
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
<img src="img/mermaid-pun.png" alt="русалка рисует блок-схему" width="720" />
Схемы текстом. Не лезем в Visio. В Cursor нужен превью с поддержкой mermaid (часто хватает Markdown Preview + расширение Mermaid).
Три самых простых.
### Стрелки
```mermaid
flowchart LR
A[Идея] --> B[Markdown]
B --> C[Превью]
C --> D[PDF / HTML]
```
### Ветвление
```mermaid
flowchart TD
Q{Нужен размер картинки?}
Q -->|нет| MD[Чистый md]
Q -->|да| HTML[Тег img]
```
### Кто кому пишет
```mermaid
sequenceDiagram
participant Я
participant Cursor
Я->>Cursor: открой превью
Cursor-->>Я: вот документ
```
Сложные mindmap / pie — потом, если припрёт. Для доклада хватает flowchart.
Дальше: как это всё выгрузить из редактора и как не тащить на сайт пятимегабайтные PNG — [блок 2](02-eksport-i-ffmpeg.md).
[^1]: Сноска внизу файла. В pdf обычно работает.
+481
View File
@@ -0,0 +1,481 @@
<!DOCTYPE html>
<html>
<head>
<title>02-eksport-i-ffmpeg.md</title>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
<style>
/* https://github.com/microsoft/vscode/blob/master/extensions/markdown-language-features/media/markdown.css */
/*---------------------------------------------------------------------------------------------
* Copyright (c) Microsoft Corporation. All rights reserved.
* Licensed under the MIT License. See License.txt in the project root for license information.
*--------------------------------------------------------------------------------------------*/
body {
font-family: var(--vscode-markdown-font-family, -apple-system, BlinkMacSystemFont, "Segoe WPC", "Segoe UI", "Ubuntu", "Droid Sans", sans-serif);
font-size: var(--vscode-markdown-font-size, 14px);
padding: 0 26px;
line-height: var(--vscode-markdown-line-height, 22px);
word-wrap: break-word;
}
#code-csp-warning {
position: fixed;
top: 0;
right: 0;
color: white;
margin: 16px;
text-align: center;
font-size: 12px;
font-family: sans-serif;
background-color:#444444;
cursor: pointer;
padding: 6px;
box-shadow: 1px 1px 1px rgba(0,0,0,.25);
}
#code-csp-warning:hover {
text-decoration: none;
background-color:#007acc;
box-shadow: 2px 2px 2px rgba(0,0,0,.25);
}
body.scrollBeyondLastLine {
margin-bottom: calc(100vh - 22px);
}
body.showEditorSelection .code-line {
position: relative;
}
body.showEditorSelection .code-active-line:before,
body.showEditorSelection .code-line:hover:before {
content: "";
display: block;
position: absolute;
top: 0;
left: -12px;
height: 100%;
}
body.showEditorSelection li.code-active-line:before,
body.showEditorSelection li.code-line:hover:before {
left: -30px;
}
.vscode-light.showEditorSelection .code-active-line:before {
border-left: 3px solid rgba(0, 0, 0, 0.15);
}
.vscode-light.showEditorSelection .code-line:hover:before {
border-left: 3px solid rgba(0, 0, 0, 0.40);
}
.vscode-light.showEditorSelection .code-line .code-line:hover:before {
border-left: none;
}
.vscode-dark.showEditorSelection .code-active-line:before {
border-left: 3px solid rgba(255, 255, 255, 0.4);
}
.vscode-dark.showEditorSelection .code-line:hover:before {
border-left: 3px solid rgba(255, 255, 255, 0.60);
}
.vscode-dark.showEditorSelection .code-line .code-line:hover:before {
border-left: none;
}
.vscode-high-contrast.showEditorSelection .code-active-line:before {
border-left: 3px solid rgba(255, 160, 0, 0.7);
}
.vscode-high-contrast.showEditorSelection .code-line:hover:before {
border-left: 3px solid rgba(255, 160, 0, 1);
}
.vscode-high-contrast.showEditorSelection .code-line .code-line:hover:before {
border-left: none;
}
img {
max-width: 100%;
max-height: 100%;
}
a {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
a:focus,
input:focus,
select:focus,
textarea:focus {
outline: 1px solid -webkit-focus-ring-color;
outline-offset: -1px;
}
hr {
border: 0;
height: 2px;
border-bottom: 2px solid;
}
h1 {
padding-bottom: 0.3em;
line-height: 1.2;
border-bottom-width: 1px;
border-bottom-style: solid;
}
h1, h2, h3 {
font-weight: normal;
}
table {
border-collapse: collapse;
}
table > thead > tr > th {
text-align: left;
border-bottom: 1px solid;
}
table > thead > tr > th,
table > thead > tr > td,
table > tbody > tr > th,
table > tbody > tr > td {
padding: 5px 10px;
}
table > tbody > tr + tr > td {
border-top: 1px solid;
}
blockquote {
margin: 0 7px 0 5px;
padding: 0 16px 0 10px;
border-left-width: 5px;
border-left-style: solid;
}
code {
font-family: Menlo, Monaco, Consolas, "Droid Sans Mono", "Courier New", monospace, "Droid Sans Fallback";
font-size: 1em;
line-height: 1.357em;
}
body.wordWrap pre {
white-space: pre-wrap;
}
pre:not(.hljs),
pre.hljs code > div {
padding: 16px;
border-radius: 3px;
overflow: auto;
}
pre code {
color: var(--vscode-editor-foreground);
tab-size: 4;
}
/** Theming */
.vscode-light pre {
background-color: rgba(220, 220, 220, 0.4);
}
.vscode-dark pre {
background-color: rgba(10, 10, 10, 0.4);
}
.vscode-high-contrast pre {
background-color: rgb(0, 0, 0);
}
.vscode-high-contrast h1 {
border-color: rgb(0, 0, 0);
}
.vscode-light table > thead > tr > th {
border-color: rgba(0, 0, 0, 0.69);
}
.vscode-dark table > thead > tr > th {
border-color: rgba(255, 255, 255, 0.69);
}
.vscode-light h1,
.vscode-light hr,
.vscode-light table > tbody > tr + tr > td {
border-color: rgba(0, 0, 0, 0.18);
}
.vscode-dark h1,
.vscode-dark hr,
.vscode-dark table > tbody > tr + tr > td {
border-color: rgba(255, 255, 255, 0.18);
}
</style>
<style>
/* Tomorrow Theme */
/* http://jmblog.github.com/color-themes-for-google-code-highlightjs */
/* Original theme - https://github.com/chriskempson/tomorrow-theme */
/* Tomorrow Comment */
.hljs-comment,
.hljs-quote {
color: #8e908c;
}
/* Tomorrow Red */
.hljs-variable,
.hljs-template-variable,
.hljs-tag,
.hljs-name,
.hljs-selector-id,
.hljs-selector-class,
.hljs-regexp,
.hljs-deletion {
color: #c82829;
}
/* Tomorrow Orange */
.hljs-number,
.hljs-built_in,
.hljs-builtin-name,
.hljs-literal,
.hljs-type,
.hljs-params,
.hljs-meta,
.hljs-link {
color: #f5871f;
}
/* Tomorrow Yellow */
.hljs-attribute {
color: #eab700;
}
/* Tomorrow Green */
.hljs-string,
.hljs-symbol,
.hljs-bullet,
.hljs-addition {
color: #718c00;
}
/* Tomorrow Blue */
.hljs-title,
.hljs-section {
color: #4271ae;
}
/* Tomorrow Purple */
.hljs-keyword,
.hljs-selector-tag {
color: #8959a8;
}
.hljs {
display: block;
overflow-x: auto;
color: #4d4d4c;
padding: 0.5em;
}
.hljs-emphasis {
font-style: italic;
}
.hljs-strong {
font-weight: bold;
}
</style>
<style>
/*
* Markdown PDF CSS
*/
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe WPC", "Segoe UI", "Ubuntu", "Droid Sans", sans-serif, "Meiryo";
padding: 0 12px;
}
pre {
background-color: #f8f8f8;
border: 1px solid #cccccc;
border-radius: 3px;
overflow-x: auto;
white-space: pre-wrap;
overflow-wrap: break-word;
}
pre:not(.hljs) {
padding: 23px;
line-height: 19px;
}
blockquote {
background: rgba(127, 127, 127, 0.1);
border-color: rgba(0, 122, 204, 0.5);
}
.emoji {
height: 1.4em;
}
code {
font-size: 14px;
line-height: 19px;
}
/* for inline code */
:not(pre):not(.hljs) > code {
color: #C9AE75; /* Change the old color so it seems less like an error */
font-size: inherit;
}
/* Page Break : use <div class="page"/> or <div class="page"></div> to insert page break
-------------------------------------------------------- */
.page {
page-break-after: always;
}
</style>
<script src="https://unpkg.com/mermaid/dist/mermaid.min.js"></script>
</head>
<body>
<script>
mermaid.initialize({
startOnLoad: true,
theme: document.body.classList.contains('vscode-dark') || document.body.classList.contains('vscode-high-contrast')
? 'dark'
: 'default'
});
</script>
<h1 id="блок-2-экспорт-и-картинки-для-веба">Блок 2. Экспорт и картинки для веба</h1>
<p>md — исходник. Людям часто нужен PDF, HTML, слайды. Картинки на сайте лучше лёгкие.</p>
<img src="img/ffmpeg-webp.png" alt="PNG проходит пресс и становится WebP" width="720" />
<h2 id="из-markdown-в-другие-форматы">Из Markdown в другие форматы</h2>
<p>В Cursor те же расширения, что в VS Code: <code>Ctrl+Shift+X</code>.</p>
<h3 id="markdown-pdf">Markdown PDF</h3>
<p>Расширение: <strong>Markdown PDF</strong> (<code>yzane.markdown-pdf</code>).</p>
<p>Умеет из открытого <code>.md</code>:</p>
<ul>
<li>PDF</li>
<li>HTML</li>
<li>PNG (снимок)</li>
<li>иногда Markdown (пересобрать)</li>
</ul>
<p>Как пользоваться: правый клик по файлу или по превью → <code>Markdown PDF: Export (pdf)</code> / <code>Export (html)</code>.</p>
<p>Настройки, которые стоит глянуть один раз:</p>
<ul>
<li>формат страницы (A4)</li>
<li>поля</li>
<li>ломать ли код на границе страницы</li>
<li>включён ли math (формулы)</li>
<li>тема / CSS — если хочется «не как из Word 2003»</li>
</ul>
<p>Для доклада PDF — ок. Для сайта лучше HTML (или статический генератор, это уже другой разговор).</p>
<h3 id="mermaid">Mermaid</h3>
<p>Расширение: <strong>Markdown Preview Mermaid Support</strong> (<code>bierner.markdown-mermaid</code>) — чтобы схемы из блока 1 рисовались в превью.</p>
<p>Без него <code>```mermaid</code> так и останется серой простынёй.</p>
<p>Markdown PDF часто подхватывает mermaid, <strong>если</strong> превью его уже рисует. Экспортировал — открой PDF и проверь схемы. Нет схемы — сначала mermaid-плагин, потом снова Export.</p>
<p>Есть ещё <strong>Mermaid Editor</strong> / предпросмотр отдельных <code>.mmd</code> — не обязательно, если всё живёт внутри md.</p>
<h3 id="что-ещё-бывает">Что ещё бывает</h3>
<table>
<thead>
<tr>
<th>Плагин / штука</th>
<th>Зачем</th>
</tr>
</thead>
<tbody>
<tr>
<td>Markdown PDF</td>
<td>быстрый pdf/html из файла</td>
</tr>
<tr>
<td>Markdown Preview Mermaid Support</td>
<td>схемы в превью</td>
</tr>
<tr>
<td>Markdown All in One</td>
<td>оглавление, шорткаты</td>
</tr>
<tr>
<td>Pandoc (уже не плагин, а комбайн)</td>
<td>md → docx/tex/html, если припрёт Word</td>
</tr>
</tbody>
</table>
<p>Для сегодняшнего круга хватает <strong>Markdown PDF + Mermaid</strong>.</p>
<hr>
<h2 id="ffmpeg--картинки-для-вёрстки">ffmpeg — картинки для вёрстки</h2>
<p>ffmpeg — комбайн для видео/аудио/картинок из терминала. Режет ролики, меняет кодеки, клеит. Одна программа вместо зоопарка конвертеров.</p>
<p>Разбор «что это вообще такое» лучше смотреть тут (очень советую):</p>
<p><strong><a href="https://youtu.be/Ww8MzcBJUd4?si=WxVvv4p86D0WcHQN">FFmpeg — крутое видео</a></strong></p>
<p>Нам из всего комбайна — узкий кусок: <strong>для сайта</strong>. Тяжёлые PNG/JPG в HTML — страница тупит. Делаем <strong>WebP</strong>: меньше вес, в браузерах давно ок.</p>
<p>Идея: ширина под макет (например 800px), качество ~80, папка отдельно от исходников.</p>
<p>Из <code>команды ffmpeg.txt</code>:</p>
<pre class="hljs"><code><div>ffmpeg -i input.jpg -vf <span class="hljs-string">&quot;scale=800:-1&quot;</span> -c:v libwebp -quality 80 output.webp
</div></code></pre>
<p>С картинкой из этой папки:</p>
<pre class="hljs"><code><div>ffmpeg -i img/cover.png -vf <span class="hljs-string">&quot;scale=800:-1&quot;</span> -c:v libwebp -quality 80 img_web/cover.webp
</div></code></pre>
<p>Что значат куски:</p>
<table>
<thead>
<tr>
<th>Кусок</th>
<th>Смысл</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>-i ...</code></td>
<td>вход</td>
</tr>
<tr>
<td><code>-vf &quot;scale=800:-1&quot;</code></td>
<td>ширина 800, высота сама (пропорции)</td>
</tr>
<tr>
<td><code>-c:v libwebp</code></td>
<td>кодек WebP</td>
</tr>
<tr>
<td><code>-quality 80</code></td>
<td>качество, 80 — нормальный компромисс</td>
</tr>
</tbody>
</table>
<p>Папку <code>img_web</code> создай заранее.</p>
<p>Ещё пара рабочих:</p>
<p>Другая ширина под узкую колонку:</p>
<pre class="hljs"><code><div>ffmpeg -i img/cover.png -vf <span class="hljs-string">&quot;scale=480:-1&quot;</span> -c:v libwebp -quality 75 img_web/cover-480.webp
</div></code></pre>
<p>JPG → WebP без смены размера:</p>
<pre class="hljs"><code><div>ffmpeg -i input.jpg -c:v libwebp -quality 80 output.webp
</div></code></pre>
<p>В HTML потом:</p>
<pre class="hljs"><code><div><span class="hljs-tag">&lt;<span class="hljs-name">img</span> <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;img_web/cover.webp&quot;</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">&quot;обложка&quot;</span> <span class="hljs-attr">width</span>=<span class="hljs-string">&quot;800&quot;</span>&gt;</span>
</div></code></pre>
<p>Исходники в <code>img/</code> не трогаем — это «негатив». На страницу отдаём WebP.</p>
<p>ffmpeg в PATH: в терминале <code>ffmpeg -version</code>. Нет команды — поставь сборку под Windows и переоткрой терминал.</p>
<p>Дальше: кто напишет md за нас, если лень — <a href="03-ii.md">блок 3</a>.</p>
</body>
</html>
+116
View File
@@ -0,0 +1,116 @@
# Блок 2. Экспорт и картинки для веба
md — исходник. Людям часто нужен PDF, HTML, слайды. Картинки на сайте лучше лёгкие.
<img src="img/ffmpeg-webp.png" alt="PNG проходит пресс и становится WebP" width="720" />
## Из Markdown в другие форматы
В Cursor те же расширения, что в VS Code: `Ctrl+Shift+X`.
### Markdown PDF
Расширение: **Markdown PDF** (`yzane.markdown-pdf`).
Умеет из открытого `.md`:
- PDF
- HTML
- PNG (снимок)
- иногда Markdown (пересобрать)
Как пользоваться: правый клик по файлу или по превью → `Markdown PDF: Export (pdf)` / `Export (html)`.
Настройки, которые стоит глянуть один раз:
- формат страницы (A4)
- поля
- ломать ли код на границе страницы
- включён ли math (формулы)
- тема / CSS — если хочется «не как из Word 2003»
Для доклада PDF — ок. Для сайта лучше HTML (или статический генератор, это уже другой разговор).
### Mermaid
Расширение: **Markdown Preview Mermaid Support** (`bierner.markdown-mermaid`) — чтобы схемы из блока 1 рисовались в превью.
Без него ` ```mermaid ` так и останется серой простынёй.
Markdown PDF часто подхватывает mermaid, **если** превью его уже рисует. Экспортировал — открой PDF и проверь схемы. Нет схемы — сначала mermaid-плагин, потом снова Export.
Есть ещё **Mermaid Editor** / предпросмотр отдельных `.mmd` — не обязательно, если всё живёт внутри md.
### Что ещё бывает
| Плагин / штука | Зачем |
|---|---|
| Markdown PDF | быстрый pdf/html из файла |
| Markdown Preview Mermaid Support | схемы в превью |
| Markdown All in One | оглавление, шорткаты |
| Pandoc (уже не плагин, а комбайн) | md → docx/tex/html, если припрёт Word |
Для сегодняшнего круга хватает **Markdown PDF + Mermaid**.
---
## ffmpeg — картинки для вёрстки
ffmpeg — комбайн для видео/аудио/картинок из терминала. Режет ролики, меняет кодеки, клеит. Одна программа вместо зоопарка конвертеров.
Разбор «что это вообще такое» лучше смотреть тут (очень советую):
**[FFmpeg — крутое видео](https://youtu.be/Ww8MzcBJUd4?si=WxVvv4p86D0WcHQN)**
Нам из всего комбайна — узкий кусок: **для сайта**. Тяжёлые PNG/JPG в HTML — страница тупит. Делаем **WebP**: меньше вес, в браузерах давно ок.
Идея: ширина под макет (например 800px), качество ~80, папка отдельно от исходников.
Из `команды ffmpeg.txt`:
```bash
ffmpeg -i input.jpg -vf "scale=800:-1" -c:v libwebp -quality 80 output.webp
```
С картинкой из этой папки:
```bash
ffmpeg -i img/cover.png -vf "scale=800:-1" -c:v libwebp -quality 80 img_web/cover.webp
```
Что значат куски:
| Кусок | Смысл |
|---|---|
| `-i ...` | вход |
| `-vf "scale=800:-1"` | ширина 800, высота сама (пропорции) |
| `-c:v libwebp` | кодек WebP |
| `-quality 80` | качество, 80 — нормальный компромисс |
Папку `img_web` создай заранее.
Ещё пара рабочих:
Другая ширина под узкую колонку:
```bash
ffmpeg -i img/cover.png -vf "scale=480:-1" -c:v libwebp -quality 75 img_web/cover-480.webp
```
JPG → WebP без смены размера:
```bash
ffmpeg -i input.jpg -c:v libwebp -quality 80 output.webp
```
В HTML потом:
```html
<img src="img_web/cover.webp" alt="обложка" width="800">
```
Исходники в `img/` не трогаем — это «негатив». На страницу отдаём WebP.
ffmpeg в PATH: в терминале `ffmpeg -version`. Нет команды — поставь сборку под Windows и переоткрой терминал.
Дальше: кто напишет md за нас, если лень — [блок 3](03-ii.md).
+394
View File
@@ -0,0 +1,394 @@
<!DOCTYPE html>
<html>
<head>
<title>03-ii.md</title>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
<style>
/* https://github.com/microsoft/vscode/blob/master/extensions/markdown-language-features/media/markdown.css */
/*---------------------------------------------------------------------------------------------
* Copyright (c) Microsoft Corporation. All rights reserved.
* Licensed under the MIT License. See License.txt in the project root for license information.
*--------------------------------------------------------------------------------------------*/
body {
font-family: var(--vscode-markdown-font-family, -apple-system, BlinkMacSystemFont, "Segoe WPC", "Segoe UI", "Ubuntu", "Droid Sans", sans-serif);
font-size: var(--vscode-markdown-font-size, 14px);
padding: 0 26px;
line-height: var(--vscode-markdown-line-height, 22px);
word-wrap: break-word;
}
#code-csp-warning {
position: fixed;
top: 0;
right: 0;
color: white;
margin: 16px;
text-align: center;
font-size: 12px;
font-family: sans-serif;
background-color:#444444;
cursor: pointer;
padding: 6px;
box-shadow: 1px 1px 1px rgba(0,0,0,.25);
}
#code-csp-warning:hover {
text-decoration: none;
background-color:#007acc;
box-shadow: 2px 2px 2px rgba(0,0,0,.25);
}
body.scrollBeyondLastLine {
margin-bottom: calc(100vh - 22px);
}
body.showEditorSelection .code-line {
position: relative;
}
body.showEditorSelection .code-active-line:before,
body.showEditorSelection .code-line:hover:before {
content: "";
display: block;
position: absolute;
top: 0;
left: -12px;
height: 100%;
}
body.showEditorSelection li.code-active-line:before,
body.showEditorSelection li.code-line:hover:before {
left: -30px;
}
.vscode-light.showEditorSelection .code-active-line:before {
border-left: 3px solid rgba(0, 0, 0, 0.15);
}
.vscode-light.showEditorSelection .code-line:hover:before {
border-left: 3px solid rgba(0, 0, 0, 0.40);
}
.vscode-light.showEditorSelection .code-line .code-line:hover:before {
border-left: none;
}
.vscode-dark.showEditorSelection .code-active-line:before {
border-left: 3px solid rgba(255, 255, 255, 0.4);
}
.vscode-dark.showEditorSelection .code-line:hover:before {
border-left: 3px solid rgba(255, 255, 255, 0.60);
}
.vscode-dark.showEditorSelection .code-line .code-line:hover:before {
border-left: none;
}
.vscode-high-contrast.showEditorSelection .code-active-line:before {
border-left: 3px solid rgba(255, 160, 0, 0.7);
}
.vscode-high-contrast.showEditorSelection .code-line:hover:before {
border-left: 3px solid rgba(255, 160, 0, 1);
}
.vscode-high-contrast.showEditorSelection .code-line .code-line:hover:before {
border-left: none;
}
img {
max-width: 100%;
max-height: 100%;
}
a {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
a:focus,
input:focus,
select:focus,
textarea:focus {
outline: 1px solid -webkit-focus-ring-color;
outline-offset: -1px;
}
hr {
border: 0;
height: 2px;
border-bottom: 2px solid;
}
h1 {
padding-bottom: 0.3em;
line-height: 1.2;
border-bottom-width: 1px;
border-bottom-style: solid;
}
h1, h2, h3 {
font-weight: normal;
}
table {
border-collapse: collapse;
}
table > thead > tr > th {
text-align: left;
border-bottom: 1px solid;
}
table > thead > tr > th,
table > thead > tr > td,
table > tbody > tr > th,
table > tbody > tr > td {
padding: 5px 10px;
}
table > tbody > tr + tr > td {
border-top: 1px solid;
}
blockquote {
margin: 0 7px 0 5px;
padding: 0 16px 0 10px;
border-left-width: 5px;
border-left-style: solid;
}
code {
font-family: Menlo, Monaco, Consolas, "Droid Sans Mono", "Courier New", monospace, "Droid Sans Fallback";
font-size: 1em;
line-height: 1.357em;
}
body.wordWrap pre {
white-space: pre-wrap;
}
pre:not(.hljs),
pre.hljs code > div {
padding: 16px;
border-radius: 3px;
overflow: auto;
}
pre code {
color: var(--vscode-editor-foreground);
tab-size: 4;
}
/** Theming */
.vscode-light pre {
background-color: rgba(220, 220, 220, 0.4);
}
.vscode-dark pre {
background-color: rgba(10, 10, 10, 0.4);
}
.vscode-high-contrast pre {
background-color: rgb(0, 0, 0);
}
.vscode-high-contrast h1 {
border-color: rgb(0, 0, 0);
}
.vscode-light table > thead > tr > th {
border-color: rgba(0, 0, 0, 0.69);
}
.vscode-dark table > thead > tr > th {
border-color: rgba(255, 255, 255, 0.69);
}
.vscode-light h1,
.vscode-light hr,
.vscode-light table > tbody > tr + tr > td {
border-color: rgba(0, 0, 0, 0.18);
}
.vscode-dark h1,
.vscode-dark hr,
.vscode-dark table > tbody > tr + tr > td {
border-color: rgba(255, 255, 255, 0.18);
}
</style>
<style>
/* Tomorrow Theme */
/* http://jmblog.github.com/color-themes-for-google-code-highlightjs */
/* Original theme - https://github.com/chriskempson/tomorrow-theme */
/* Tomorrow Comment */
.hljs-comment,
.hljs-quote {
color: #8e908c;
}
/* Tomorrow Red */
.hljs-variable,
.hljs-template-variable,
.hljs-tag,
.hljs-name,
.hljs-selector-id,
.hljs-selector-class,
.hljs-regexp,
.hljs-deletion {
color: #c82829;
}
/* Tomorrow Orange */
.hljs-number,
.hljs-built_in,
.hljs-builtin-name,
.hljs-literal,
.hljs-type,
.hljs-params,
.hljs-meta,
.hljs-link {
color: #f5871f;
}
/* Tomorrow Yellow */
.hljs-attribute {
color: #eab700;
}
/* Tomorrow Green */
.hljs-string,
.hljs-symbol,
.hljs-bullet,
.hljs-addition {
color: #718c00;
}
/* Tomorrow Blue */
.hljs-title,
.hljs-section {
color: #4271ae;
}
/* Tomorrow Purple */
.hljs-keyword,
.hljs-selector-tag {
color: #8959a8;
}
.hljs {
display: block;
overflow-x: auto;
color: #4d4d4c;
padding: 0.5em;
}
.hljs-emphasis {
font-style: italic;
}
.hljs-strong {
font-weight: bold;
}
</style>
<style>
/*
* Markdown PDF CSS
*/
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe WPC", "Segoe UI", "Ubuntu", "Droid Sans", sans-serif, "Meiryo";
padding: 0 12px;
}
pre {
background-color: #f8f8f8;
border: 1px solid #cccccc;
border-radius: 3px;
overflow-x: auto;
white-space: pre-wrap;
overflow-wrap: break-word;
}
pre:not(.hljs) {
padding: 23px;
line-height: 19px;
}
blockquote {
background: rgba(127, 127, 127, 0.1);
border-color: rgba(0, 122, 204, 0.5);
}
.emoji {
height: 1.4em;
}
code {
font-size: 14px;
line-height: 19px;
}
/* for inline code */
:not(pre):not(.hljs) > code {
color: #C9AE75; /* Change the old color so it seems less like an error */
font-size: inherit;
}
/* Page Break : use <div class="page"/> or <div class="page"></div> to insert page break
-------------------------------------------------------- */
.page {
page-break-after: always;
}
</style>
<script src="https://unpkg.com/mermaid/dist/mermaid.min.js"></script>
</head>
<body>
<script>
mermaid.initialize({
startOnLoad: true,
theme: document.body.classList.contains('vscode-dark') || document.body.classList.contains('vscode-high-contrast')
? 'dark'
: 'default'
});
</script>
<h1 id="блок-3-ии-для-разметки">Блок 3. ИИ для разметки</h1>
<p>Смысл не в том, чтобы «нейросеть написала роман». Смысл в <strong>форматировании</strong>: сырой текст, таблица из Excel, переписка, конспект — на вход, аккуратный Markdown на выход. Быстро и ровно.</p>
<p>Cursor тут как раз в своей тарелке: видит файл, правит файл, не надо копировать туда-сюда.</p>
<h2 id="почему-именно-форматирование">Почему именно форматирование</h2>
<p>Задача тупая и чёткая: заголовки, списки, таблицы, формулы в <code>$...$</code>, картинки. ИИ такое любит. Мало «творчества» — мало галлюцинаций.</p>
<p>В <strong>бесплатном</strong> Cursor на такие мелкие правки лимитов обычно хватает. Кончились — не драма, см. ниже.</p>
<p>Примеры промптов, без церемоний:</p>
<ul>
<li>«приведи этот файл к нормальному Markdown: заголовки, списки, таблица»</li>
<li>«формулы оберни в <code>$...$</code> / <code>$$...$$</code>»</li>
<li>«сделай mermaid-схему процесса из абзаца ниже»</li>
<li>«замени жирные картинки на <code>&lt;img width=...&gt;</code> по центру»</li>
</ul>
<p>Кидаешь черновик в чат или <code>@файл</code> — получаешь diff. Смотришь превью. Не нравится кусок — «короче» / «без вот этой секции».</p>
<h2 id="если-лимиты-cursor-кончились">Если лимиты Cursor кончились</h2>
<p>Тот же черновик можно отнести наружу:</p>
<ul>
<li><strong>Gemini</strong></li>
<li><strong>ChatGPT (GPT)</strong></li>
</ul>
<p>Просьба та же: «верни чистый Markdown». Вставляешь обратно в файл. Чуть больше ручной возни, зато не стоишь.</p>
<p>Для вёрстки документов это всё равно быстрее, чем кликать стили в Word полдня.</p>
<p>ИИ не вместо головы: таблицы с цифрами и формулы после него глазами пробежи. Зато скелет документа он собирает за минуту.</p>
<p>Про то, как не плодить десять «финальных» копий — <a href="04-git.md">блок 4</a>.</p>
</body>
</html>
+35
View File
@@ -0,0 +1,35 @@
# Блок 3. ИИ для разметки
Смысл не в том, чтобы «нейросеть написала роман». Смысл в **форматировании**: сырой текст, таблица из Excel, переписка, конспект — на вход, аккуратный Markdown на выход. Быстро и ровно.
Cursor тут как раз в своей тарелке: видит файл, правит файл, не надо копировать туда-сюда.
## Почему именно форматирование
Задача тупая и чёткая: заголовки, списки, таблицы, формулы в `$...$`, картинки. ИИ такое любит. Мало «творчества» — мало галлюцинаций.
В **бесплатном** Cursor на такие мелкие правки лимитов обычно хватает. Кончились — не драма, см. ниже.
Примеры промптов, без церемоний:
- «приведи этот файл к нормальному Markdown: заголовки, списки, таблица»
- «формулы оберни в `$...$` / `$$...$$`»
- «сделай mermaid-схему процесса из абзаца ниже»
- «замени жирные картинки на `<img width=...>` по центру»
Кидаешь черновик в чат или `@файл` — получаешь diff. Смотришь превью. Не нравится кусок — «короче» / «без вот этой секции».
## Если лимиты Cursor кончились
Тот же черновик можно отнести наружу:
- **Gemini**
- **ChatGPT (GPT)**
Просьба та же: «верни чистый Markdown». Вставляешь обратно в файл. Чуть больше ручной возни, зато не стоишь.
Для вёрстки документов это всё равно быстрее, чем кликать стили в Word полдня.
ИИ не вместо головы: таблицы с цифрами и формулы после него глазами пробежи. Зато скелет документа он собирает за минуту.
Про то, как не плодить десять «финальных» копий — [блок 4](04-git.md).
+390
View File
@@ -0,0 +1,390 @@
<!DOCTYPE html>
<html>
<head>
<title>04-git.md</title>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
<style>
/* https://github.com/microsoft/vscode/blob/master/extensions/markdown-language-features/media/markdown.css */
/*---------------------------------------------------------------------------------------------
* Copyright (c) Microsoft Corporation. All rights reserved.
* Licensed under the MIT License. See License.txt in the project root for license information.
*--------------------------------------------------------------------------------------------*/
body {
font-family: var(--vscode-markdown-font-family, -apple-system, BlinkMacSystemFont, "Segoe WPC", "Segoe UI", "Ubuntu", "Droid Sans", sans-serif);
font-size: var(--vscode-markdown-font-size, 14px);
padding: 0 26px;
line-height: var(--vscode-markdown-line-height, 22px);
word-wrap: break-word;
}
#code-csp-warning {
position: fixed;
top: 0;
right: 0;
color: white;
margin: 16px;
text-align: center;
font-size: 12px;
font-family: sans-serif;
background-color:#444444;
cursor: pointer;
padding: 6px;
box-shadow: 1px 1px 1px rgba(0,0,0,.25);
}
#code-csp-warning:hover {
text-decoration: none;
background-color:#007acc;
box-shadow: 2px 2px 2px rgba(0,0,0,.25);
}
body.scrollBeyondLastLine {
margin-bottom: calc(100vh - 22px);
}
body.showEditorSelection .code-line {
position: relative;
}
body.showEditorSelection .code-active-line:before,
body.showEditorSelection .code-line:hover:before {
content: "";
display: block;
position: absolute;
top: 0;
left: -12px;
height: 100%;
}
body.showEditorSelection li.code-active-line:before,
body.showEditorSelection li.code-line:hover:before {
left: -30px;
}
.vscode-light.showEditorSelection .code-active-line:before {
border-left: 3px solid rgba(0, 0, 0, 0.15);
}
.vscode-light.showEditorSelection .code-line:hover:before {
border-left: 3px solid rgba(0, 0, 0, 0.40);
}
.vscode-light.showEditorSelection .code-line .code-line:hover:before {
border-left: none;
}
.vscode-dark.showEditorSelection .code-active-line:before {
border-left: 3px solid rgba(255, 255, 255, 0.4);
}
.vscode-dark.showEditorSelection .code-line:hover:before {
border-left: 3px solid rgba(255, 255, 255, 0.60);
}
.vscode-dark.showEditorSelection .code-line .code-line:hover:before {
border-left: none;
}
.vscode-high-contrast.showEditorSelection .code-active-line:before {
border-left: 3px solid rgba(255, 160, 0, 0.7);
}
.vscode-high-contrast.showEditorSelection .code-line:hover:before {
border-left: 3px solid rgba(255, 160, 0, 1);
}
.vscode-high-contrast.showEditorSelection .code-line .code-line:hover:before {
border-left: none;
}
img {
max-width: 100%;
max-height: 100%;
}
a {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
a:focus,
input:focus,
select:focus,
textarea:focus {
outline: 1px solid -webkit-focus-ring-color;
outline-offset: -1px;
}
hr {
border: 0;
height: 2px;
border-bottom: 2px solid;
}
h1 {
padding-bottom: 0.3em;
line-height: 1.2;
border-bottom-width: 1px;
border-bottom-style: solid;
}
h1, h2, h3 {
font-weight: normal;
}
table {
border-collapse: collapse;
}
table > thead > tr > th {
text-align: left;
border-bottom: 1px solid;
}
table > thead > tr > th,
table > thead > tr > td,
table > tbody > tr > th,
table > tbody > tr > td {
padding: 5px 10px;
}
table > tbody > tr + tr > td {
border-top: 1px solid;
}
blockquote {
margin: 0 7px 0 5px;
padding: 0 16px 0 10px;
border-left-width: 5px;
border-left-style: solid;
}
code {
font-family: Menlo, Monaco, Consolas, "Droid Sans Mono", "Courier New", monospace, "Droid Sans Fallback";
font-size: 1em;
line-height: 1.357em;
}
body.wordWrap pre {
white-space: pre-wrap;
}
pre:not(.hljs),
pre.hljs code > div {
padding: 16px;
border-radius: 3px;
overflow: auto;
}
pre code {
color: var(--vscode-editor-foreground);
tab-size: 4;
}
/** Theming */
.vscode-light pre {
background-color: rgba(220, 220, 220, 0.4);
}
.vscode-dark pre {
background-color: rgba(10, 10, 10, 0.4);
}
.vscode-high-contrast pre {
background-color: rgb(0, 0, 0);
}
.vscode-high-contrast h1 {
border-color: rgb(0, 0, 0);
}
.vscode-light table > thead > tr > th {
border-color: rgba(0, 0, 0, 0.69);
}
.vscode-dark table > thead > tr > th {
border-color: rgba(255, 255, 255, 0.69);
}
.vscode-light h1,
.vscode-light hr,
.vscode-light table > tbody > tr + tr > td {
border-color: rgba(0, 0, 0, 0.18);
}
.vscode-dark h1,
.vscode-dark hr,
.vscode-dark table > tbody > tr + tr > td {
border-color: rgba(255, 255, 255, 0.18);
}
</style>
<style>
/* Tomorrow Theme */
/* http://jmblog.github.com/color-themes-for-google-code-highlightjs */
/* Original theme - https://github.com/chriskempson/tomorrow-theme */
/* Tomorrow Comment */
.hljs-comment,
.hljs-quote {
color: #8e908c;
}
/* Tomorrow Red */
.hljs-variable,
.hljs-template-variable,
.hljs-tag,
.hljs-name,
.hljs-selector-id,
.hljs-selector-class,
.hljs-regexp,
.hljs-deletion {
color: #c82829;
}
/* Tomorrow Orange */
.hljs-number,
.hljs-built_in,
.hljs-builtin-name,
.hljs-literal,
.hljs-type,
.hljs-params,
.hljs-meta,
.hljs-link {
color: #f5871f;
}
/* Tomorrow Yellow */
.hljs-attribute {
color: #eab700;
}
/* Tomorrow Green */
.hljs-string,
.hljs-symbol,
.hljs-bullet,
.hljs-addition {
color: #718c00;
}
/* Tomorrow Blue */
.hljs-title,
.hljs-section {
color: #4271ae;
}
/* Tomorrow Purple */
.hljs-keyword,
.hljs-selector-tag {
color: #8959a8;
}
.hljs {
display: block;
overflow-x: auto;
color: #4d4d4c;
padding: 0.5em;
}
.hljs-emphasis {
font-style: italic;
}
.hljs-strong {
font-weight: bold;
}
</style>
<style>
/*
* Markdown PDF CSS
*/
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe WPC", "Segoe UI", "Ubuntu", "Droid Sans", sans-serif, "Meiryo";
padding: 0 12px;
}
pre {
background-color: #f8f8f8;
border: 1px solid #cccccc;
border-radius: 3px;
overflow-x: auto;
white-space: pre-wrap;
overflow-wrap: break-word;
}
pre:not(.hljs) {
padding: 23px;
line-height: 19px;
}
blockquote {
background: rgba(127, 127, 127, 0.1);
border-color: rgba(0, 122, 204, 0.5);
}
.emoji {
height: 1.4em;
}
code {
font-size: 14px;
line-height: 19px;
}
/* for inline code */
:not(pre):not(.hljs) > code {
color: #C9AE75; /* Change the old color so it seems less like an error */
font-size: inherit;
}
/* Page Break : use <div class="page"/> or <div class="page"></div> to insert page break
-------------------------------------------------------- */
.page {
page-break-after: always;
}
</style>
<script src="https://unpkg.com/mermaid/dist/mermaid.min.js"></script>
</head>
<body>
<script>
mermaid.initialize({
startOnLoad: true,
theme: document.body.classList.contains('vscode-dark') || document.body.classList.contains('vscode-high-contrast')
? 'dark'
: 'default'
});
</script>
<h1 id="блок-4-git--зачем-без-команд">Блок 4. Git — зачем, без команд</h1>
<img src="img/git-vs-word.png" alt="слева каша файлов Word, справа спокойное дерево версий" width="720" />
<p>Рецензирование в Word знакомо: правки, комментарии, файл туда-сюда почтой.</p>
<p>Имена, которые все видели:</p>
<p><code>презентация_финал_конец_финал2_теперь_точно.docx</code></p>
<p>Работает, пока участников двое и неделя. Потом теряется, кто какую версию открыл.</p>
<h2 id="чем-git-лучше-хотя-порог-выше">Чем git лучше (хотя порог выше)</h2>
<p>Git хранит <strong>историю</strong>, не десяток копий. Один репозиторий, много маленьких снимков: кто, когда, что поменял.</p>
<p>Зачем это нам, раз документы — Markdown:</p>
<ul>
<li>md — текст. Git видит <strong>строки</strong>, не бинарный комбайн Word.</li>
<li>можно ветки: ты пилишь раздел, коллега — другой, потом склеить.</li>
<li>рецензия = просмотр разницы (diff), а не «включи режим исправлений и молись, что трек-changes не разъехался».</li>
<li>откат: «как было в прошлый четверг» — не археология папки Загрузки.</li>
</ul>
<p>Сложнее, да. Это не кнопка «сохранить как». Зато конец зоопарку файлов.</p>
<h2 id="что-взять-с-собой">Что взять с собой</h2>
<p>Сегодня <strong>не учим команды</strong>. Это вектор: репозиторий, коммит, ветка, diff, удалённый сервер (GitHub / свой Gitea / что есть).</p>
<p>Освоил git + Markdown — документы живут как код. Почта с <code>финал3.docx</code> становится смешной.</p>
<p>Если останется время — отдельная сессия: init, commit, push. Не сегодня. Сегодня достаточно понять, <strong>зачем</strong>.</p>
</body>
</html>
+32
View File
@@ -0,0 +1,32 @@
# Блок 4. Git — зачем, без команд
<img src="img/git-vs-word.png" alt="слева каша файлов Word, справа спокойное дерево версий" width="720" />
Рецензирование в Word знакомо: правки, комментарии, файл туда-сюда почтой.
Имена, которые все видели:
`презентация_финал_конец_финал2_теперь_точно.docx`
Работает, пока участников двое и неделя. Потом теряется, кто какую версию открыл.
## Чем git лучше (хотя порог выше)
Git хранит **историю**, не десяток копий. Один репозиторий, много маленьких снимков: кто, когда, что поменял.
Зачем это нам, раз документы — Markdown:
- md — текст. Git видит **строки**, не бинарный комбайн Word.
- можно ветки: ты пилишь раздел, коллега — другой, потом склеить.
- рецензия = просмотр разницы (diff), а не «включи режим исправлений и молись, что трек-changes не разъехался».
- откат: «как было в прошлый четверг» — не археология папки Загрузки.
Сложнее, да. Это не кнопка «сохранить как». Зато конец зоопарку файлов.
## Что взять с собой
Сегодня **не учим команды**. Это вектор: репозиторий, коммит, ветка, diff, удалённый сервер (GitHub / свой Gitea / что есть).
Освоил git + Markdown — документы живут как код. Почта с `финал3.docx` становится смешной.
Если останется время — отдельная сессия: init, commit, push. Не сегодня. Сегодня достаточно понять, **зачем**.
+410
View File
@@ -0,0 +1,410 @@
<!DOCTYPE html>
<html>
<head>
<title>README.md</title>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
<style>
/* https://github.com/microsoft/vscode/blob/master/extensions/markdown-language-features/media/markdown.css */
/*---------------------------------------------------------------------------------------------
* Copyright (c) Microsoft Corporation. All rights reserved.
* Licensed under the MIT License. See License.txt in the project root for license information.
*--------------------------------------------------------------------------------------------*/
body {
font-family: var(--vscode-markdown-font-family, -apple-system, BlinkMacSystemFont, "Segoe WPC", "Segoe UI", "Ubuntu", "Droid Sans", sans-serif);
font-size: var(--vscode-markdown-font-size, 14px);
padding: 0 26px;
line-height: var(--vscode-markdown-line-height, 22px);
word-wrap: break-word;
}
#code-csp-warning {
position: fixed;
top: 0;
right: 0;
color: white;
margin: 16px;
text-align: center;
font-size: 12px;
font-family: sans-serif;
background-color:#444444;
cursor: pointer;
padding: 6px;
box-shadow: 1px 1px 1px rgba(0,0,0,.25);
}
#code-csp-warning:hover {
text-decoration: none;
background-color:#007acc;
box-shadow: 2px 2px 2px rgba(0,0,0,.25);
}
body.scrollBeyondLastLine {
margin-bottom: calc(100vh - 22px);
}
body.showEditorSelection .code-line {
position: relative;
}
body.showEditorSelection .code-active-line:before,
body.showEditorSelection .code-line:hover:before {
content: "";
display: block;
position: absolute;
top: 0;
left: -12px;
height: 100%;
}
body.showEditorSelection li.code-active-line:before,
body.showEditorSelection li.code-line:hover:before {
left: -30px;
}
.vscode-light.showEditorSelection .code-active-line:before {
border-left: 3px solid rgba(0, 0, 0, 0.15);
}
.vscode-light.showEditorSelection .code-line:hover:before {
border-left: 3px solid rgba(0, 0, 0, 0.40);
}
.vscode-light.showEditorSelection .code-line .code-line:hover:before {
border-left: none;
}
.vscode-dark.showEditorSelection .code-active-line:before {
border-left: 3px solid rgba(255, 255, 255, 0.4);
}
.vscode-dark.showEditorSelection .code-line:hover:before {
border-left: 3px solid rgba(255, 255, 255, 0.60);
}
.vscode-dark.showEditorSelection .code-line .code-line:hover:before {
border-left: none;
}
.vscode-high-contrast.showEditorSelection .code-active-line:before {
border-left: 3px solid rgba(255, 160, 0, 0.7);
}
.vscode-high-contrast.showEditorSelection .code-line:hover:before {
border-left: 3px solid rgba(255, 160, 0, 1);
}
.vscode-high-contrast.showEditorSelection .code-line .code-line:hover:before {
border-left: none;
}
img {
max-width: 100%;
max-height: 100%;
}
a {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
a:focus,
input:focus,
select:focus,
textarea:focus {
outline: 1px solid -webkit-focus-ring-color;
outline-offset: -1px;
}
hr {
border: 0;
height: 2px;
border-bottom: 2px solid;
}
h1 {
padding-bottom: 0.3em;
line-height: 1.2;
border-bottom-width: 1px;
border-bottom-style: solid;
}
h1, h2, h3 {
font-weight: normal;
}
table {
border-collapse: collapse;
}
table > thead > tr > th {
text-align: left;
border-bottom: 1px solid;
}
table > thead > tr > th,
table > thead > tr > td,
table > tbody > tr > th,
table > tbody > tr > td {
padding: 5px 10px;
}
table > tbody > tr + tr > td {
border-top: 1px solid;
}
blockquote {
margin: 0 7px 0 5px;
padding: 0 16px 0 10px;
border-left-width: 5px;
border-left-style: solid;
}
code {
font-family: Menlo, Monaco, Consolas, "Droid Sans Mono", "Courier New", monospace, "Droid Sans Fallback";
font-size: 1em;
line-height: 1.357em;
}
body.wordWrap pre {
white-space: pre-wrap;
}
pre:not(.hljs),
pre.hljs code > div {
padding: 16px;
border-radius: 3px;
overflow: auto;
}
pre code {
color: var(--vscode-editor-foreground);
tab-size: 4;
}
/** Theming */
.vscode-light pre {
background-color: rgba(220, 220, 220, 0.4);
}
.vscode-dark pre {
background-color: rgba(10, 10, 10, 0.4);
}
.vscode-high-contrast pre {
background-color: rgb(0, 0, 0);
}
.vscode-high-contrast h1 {
border-color: rgb(0, 0, 0);
}
.vscode-light table > thead > tr > th {
border-color: rgba(0, 0, 0, 0.69);
}
.vscode-dark table > thead > tr > th {
border-color: rgba(255, 255, 255, 0.69);
}
.vscode-light h1,
.vscode-light hr,
.vscode-light table > tbody > tr + tr > td {
border-color: rgba(0, 0, 0, 0.18);
}
.vscode-dark h1,
.vscode-dark hr,
.vscode-dark table > tbody > tr + tr > td {
border-color: rgba(255, 255, 255, 0.18);
}
</style>
<style>
/* Tomorrow Theme */
/* http://jmblog.github.com/color-themes-for-google-code-highlightjs */
/* Original theme - https://github.com/chriskempson/tomorrow-theme */
/* Tomorrow Comment */
.hljs-comment,
.hljs-quote {
color: #8e908c;
}
/* Tomorrow Red */
.hljs-variable,
.hljs-template-variable,
.hljs-tag,
.hljs-name,
.hljs-selector-id,
.hljs-selector-class,
.hljs-regexp,
.hljs-deletion {
color: #c82829;
}
/* Tomorrow Orange */
.hljs-number,
.hljs-built_in,
.hljs-builtin-name,
.hljs-literal,
.hljs-type,
.hljs-params,
.hljs-meta,
.hljs-link {
color: #f5871f;
}
/* Tomorrow Yellow */
.hljs-attribute {
color: #eab700;
}
/* Tomorrow Green */
.hljs-string,
.hljs-symbol,
.hljs-bullet,
.hljs-addition {
color: #718c00;
}
/* Tomorrow Blue */
.hljs-title,
.hljs-section {
color: #4271ae;
}
/* Tomorrow Purple */
.hljs-keyword,
.hljs-selector-tag {
color: #8959a8;
}
.hljs {
display: block;
overflow-x: auto;
color: #4d4d4c;
padding: 0.5em;
}
.hljs-emphasis {
font-style: italic;
}
.hljs-strong {
font-weight: bold;
}
</style>
<style>
/*
* Markdown PDF CSS
*/
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe WPC", "Segoe UI", "Ubuntu", "Droid Sans", sans-serif, "Meiryo";
padding: 0 12px;
}
pre {
background-color: #f8f8f8;
border: 1px solid #cccccc;
border-radius: 3px;
overflow-x: auto;
white-space: pre-wrap;
overflow-wrap: break-word;
}
pre:not(.hljs) {
padding: 23px;
line-height: 19px;
}
blockquote {
background: rgba(127, 127, 127, 0.1);
border-color: rgba(0, 122, 204, 0.5);
}
.emoji {
height: 1.4em;
}
code {
font-size: 14px;
line-height: 19px;
}
/* for inline code */
:not(pre):not(.hljs) > code {
color: #C9AE75; /* Change the old color so it seems less like an error */
font-size: inherit;
}
/* Page Break : use <div class="page"/> or <div class="page"></div> to insert page break
-------------------------------------------------------- */
.page {
page-break-after: always;
}
</style>
<script src="https://unpkg.com/mermaid/dist/mermaid.min.js"></script>
</head>
<body>
<script>
mermaid.initialize({
startOnLoad: true,
theme: document.body.classList.contains('vscode-dark') || document.body.classList.contains('vscode-high-contrast')
? 'dark'
: 'default'
});
</script>
<h1 id="демо-markdown-html-формулы-схемы">Демо: Markdown, HTML, формулы, схемы</h1>
<p>Показываем в <strong>Cursor</strong>. Открыли папку — листаем файлы по порядку. Превью: <code>Ctrl+Shift+V</code> (или иконка превью справа сверху).</p>
<table>
<thead>
<tr>
<th>Блок</th>
<th>Файл</th>
<th>О чём</th>
</tr>
</thead>
<tbody>
<tr>
<td>0</td>
<td><a href="00-cursor.md">00-cursor.md</a></td>
<td>Зачем Cursor, совсем коротко</td>
</tr>
<tr>
<td>1</td>
<td><a href="01-razmetka.md">01-razmetka.md</a></td>
<td>Markdown, HTML внутри md, формулы, Mermaid</td>
</tr>
<tr>
<td>2</td>
<td><a href="02-eksport-i-ffmpeg.md">02-eksport-i-ffmpeg.md</a></td>
<td>PDF/HTML из md, плагины, картинки в WebP</td>
</tr>
<tr>
<td>3</td>
<td><a href="03-ii.md">03-ii.md</a></td>
<td>ИИ для вёрстки документов</td>
</tr>
<tr>
<td>4</td>
<td><a href="04-git.md">04-git.md</a></td>
<td>Git вместо «финал_конец_2.docx»</td>
</tr>
</tbody>
</table>
<p>Картинки лежат в <code>img/</code>. Команды ffmpeg — в <code>команды ffmpeg.txt</code>.</p>
<p>Поехали.</p>
</body>
</html>
+17
View File
@@ -0,0 +1,17 @@
# Демо: Markdown, HTML, формулы, схемы
Показываем в **Cursor**. Открыли папку — листаем файлы по порядку. Превью: `Ctrl+Shift+V` (или иконка превью справа сверху).
| Блок | Файл | О чём |
|---|---|---|
| 0 | [00-cursor.md](00-cursor.md) | Зачем Cursor, совсем коротко |
| 1 | [01-razmetka.md](01-razmetka.md) | Markdown, HTML внутри md, формулы, Mermaid |
| 2 | [02-eksport-i-ffmpeg.md](02-eksport-i-ffmpeg.md) | PDF/HTML из md, плагины, картинки в WebP |
| 3 | [03-ii.md](03-ii.md) | ИИ для вёрстки документов |
| 4 | [04-git.md](04-git.md) | Git вместо «финал_конец_2.docx» |
Картинки лежат в `img/`. Команды ffmpeg — в `команды ffmpeg.txt`.
Собранный сайт: папка [`site/`](site/index.html) (`index.html`, `00.html` … `04.html`).
Поехали.
Binary file not shown.

After

Width:  |  Height:  |  Size: 2.3 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 12 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 26 KiB

BIN
View File
Binary file not shown.

After

Width:  |  Height:  |  Size: 1.4 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.9 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.1 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.2 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.4 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.4 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.5 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.5 MiB

BIN
View File
Binary file not shown.

After

Width:  |  Height:  |  Size: 800 KiB

BIN
View File
Binary file not shown.

After

Width:  |  Height:  |  Size: 569 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.8 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 93 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.7 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.0 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.7 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.7 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.8 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 71 KiB

+44
View File
@@ -0,0 +1,44 @@
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Блок 0. Cursor</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header class="nav">
<div class="nav-inner">
<a class="brand" href="index.html">Демо разметки</a>
<nav>
<a href="index.html">Содержание</a>
<a class="current" href="00.html">0. Cursor</a>
<a 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>Блок 0. Cursor — зачем он тут</h1>
<img src="img/cursor-intro.png" alt="Cursor как мастерская" width="720">
<p>Это редактор кода (форк VS Code) с нормальным ИИ внутри: чат видит файлы, может править их сам, не через копипаст.</p>
<p>Сегодня он нам нужен как <strong>сцена</strong>:</p>
<ul>
<li>слева текст <code>.md</code></li>
<li>справа превью (как это выглядит «для людей»)</li>
<li>плагины те же, что в VS Code: Markdown PDF, Mermaid и т.д.</li>
<li>если надо быстро привести документ в порядок — ИИ в чате, не Word</li>
</ul>
<p>Подробнее про ИИ — в <a href="03.html">блоке 3</a>. Сейчас просто открываем файлы и смотрим, как разметка оживает.</p>
<div class="pager">
<a href="index.html">← Содержание</a>
<a href="01.html">Блок 1. Разметка →</a>
</div>
</main>
</body>
</html>
+276
View File
@@ -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>
+97
View File
@@ -0,0 +1,97 @@
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Блок 2. Экспорт и ffmpeg</title>
<link rel="stylesheet" href="css/style.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 href="01.html">1. Разметка</a>
<a class="current" 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>Блок 2. Экспорт и картинки для веба</h1>
<p>md — исходник. Людям часто нужен PDF, HTML, слайды. Картинки на сайте лучше лёгкие.</p>
<img src="img/ffmpeg-webp.png" alt="PNG проходит пресс и становится WebP" width="720">
<h2>Из Markdown в другие форматы</h2>
<p>В Cursor те же расширения, что в VS Code: <kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>X</kbd>.</p>
<h3>Markdown PDF</h3>
<p>Расширение: <strong>Markdown PDF</strong> (<code>yzane.markdown-pdf</code>).</p>
<p>Умеет из открытого <code>.md</code>:</p>
<ul>
<li>PDF</li>
<li>HTML</li>
<li>PNG (снимок)</li>
<li>иногда Markdown (пересобрать)</li>
</ul>
<p>Как пользоваться: правый клик по файлу или по превью → <code>Markdown PDF: Export (pdf)</code> / <code>Export (html)</code>.</p>
<p>Настройки, которые стоит глянуть один раз: формат A4, поля, переносы кода, math, тема/CSS.</p>
<p>Для доклада PDF — ок. Для сайта лучше HTML.</p>
<h3>Mermaid</h3>
<p>Расширение: <strong>Markdown Preview Mermaid Support</strong> (<code>bierner.markdown-mermaid</code>) — чтобы схемы из блока 1 рисовались в превью.</p>
<p>Без него блок mermaid так и останется серой простынёй.</p>
<p>Markdown PDF часто подхватывает mermaid, <strong>если</strong> превью его уже рисует. Экспортировал — открой PDF и проверь схемы.</p>
<h3>Что ещё бывает</h3>
<table>
<thead><tr><th>Плагин / штука</th><th>Зачем</th></tr></thead>
<tbody>
<tr><td>Markdown PDF</td><td>быстрый pdf/html из файла</td></tr>
<tr><td>Markdown Preview Mermaid Support</td><td>схемы в превью</td></tr>
<tr><td>Markdown All in One</td><td>оглавление, шорткаты</td></tr>
<tr><td>Pandoc</td><td>md → docx/tex/html, если припрёт Word</td></tr>
</tbody>
</table>
<p>Для сегодняшнего круга хватает <strong>Markdown PDF + Mermaid</strong>.</p>
<h2>ffmpeg — картинки для вёрстки</h2>
<p>ffmpeg — комбайн для видео/аудио/картинок из терминала. Режет ролики, меняет кодеки, клеит. Одна программа вместо зоопарка конвертеров.</p>
<p>Разбор «что это вообще такое» лучше смотреть тут (очень советую):</p>
<p><strong><a href="https://youtu.be/Ww8MzcBJUd4?si=WxVvv4p86D0WcHQN">FFmpeg — крутое видео</a></strong></p>
<p>Нам из всего комбайна — узкий кусок: <strong>для сайта</strong>. Тяжёлые PNG/JPG в HTML — страница тупит. Делаем <strong>WebP</strong>.</p>
<p>Идея: ширина под макет (например 800px), качество ~80, папка отдельно от исходников.</p>
<pre><code>ffmpeg -i input.jpg -vf "scale=800:-1" -c:v libwebp -quality 80 output.webp</code></pre>
<pre><code>ffmpeg -i img/cover.png -vf "scale=800:-1" -c:v libwebp -quality 80 img_web/cover.webp</code></pre>
<table>
<thead><tr><th>Кусок</th><th>Смысл</th></tr></thead>
<tbody>
<tr><td><code>-i ...</code></td><td>вход</td></tr>
<tr><td><code>-vf "scale=800:-1"</code></td><td>ширина 800, высота сама</td></tr>
<tr><td><code>-c:v libwebp</code></td><td>кодек WebP</td></tr>
<tr><td><code>-quality 80</code></td><td>качество, нормальный компромисс</td></tr>
</tbody>
</table>
<p>Папку <code>img_web</code> создай заранее.</p>
<pre><code>ffmpeg -i img/cover.png -vf "scale=480:-1" -c:v libwebp -quality 75 img_web/cover-480.webp</code></pre>
<pre><code>ffmpeg -i input.jpg -c:v libwebp -quality 80 output.webp</code></pre>
<p>В HTML потом:</p>
<pre><code>&lt;img src="img_web/cover.webp" alt="обложка" width="800"&gt;</code></pre>
<p>Исходники в <code>img/</code> не трогаем — это «негатив». На страницу отдаём WebP.</p>
<p>Проверка: в терминале <code>ffmpeg -version</code>.</p>
<p>Дальше: кто напишет md за нас, если лень — <a href="03.html">блок 3</a>.</p>
<div class="pager">
<a href="01.html">← Блок 1. Разметка</a>
<a href="03.html">Блок 3. ИИ →</a>
</div>
</main>
</body>
</html>
+58
View File
@@ -0,0 +1,58 @@
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Блок 3. ИИ</title>
<link rel="stylesheet" href="css/style.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 href="01.html">1. Разметка</a>
<a href="02.html">2. Экспорт</a>
<a class="current" href="03.html">3. ИИ</a>
<a href="04.html">4. Git</a>
</nav>
</div>
</header>
<main class="wrap content">
<h1>Блок 3. ИИ для разметки</h1>
<p>Смысл не в том, чтобы «нейросеть написала роман». Смысл в <strong>форматировании</strong>: сырой текст, таблица из Excel, переписка, конспект — на вход, аккуратный Markdown на выход. Быстро и ровно.</p>
<p>Cursor тут как раз в своей тарелке: видит файл, правит файл, не надо копировать туда-сюда.</p>
<h2>Почему именно форматирование</h2>
<p>Задача тупая и чёткая: заголовки, списки, таблицы, формулы в <code>$...$</code>, картинки. ИИ такое любит. Мало «творчества» — мало галлюцинаций.</p>
<p>В <strong>бесплатном</strong> Cursor на такие мелкие правки лимитов обычно хватает. Кончились — не драма, см. ниже.</p>
<p>Примеры промптов, без церемоний:</p>
<ul>
<li>«приведи этот файл к нормальному Markdown: заголовки, списки, таблица»</li>
<li>«формулы оберни в <code>$...$</code> / <code>$$...$$</code>»</li>
<li>«сделай mermaid-схему процесса из абзаца ниже»</li>
<li>«замени жирные картинки на <code>&lt;img width=...&gt;</code> по центру»</li>
</ul>
<p>Кидаешь черновик в чат или <code>@файл</code> — получаешь diff. Смотришь превью. Не нравится кусок — «короче» / «без вот этой секции».</p>
<h2>Если лимиты Cursor кончились</h2>
<p>Тот же черновик можно отнести наружу:</p>
<ul>
<li><strong>Gemini</strong></li>
<li><strong>ChatGPT (GPT)</strong></li>
</ul>
<p>Просьба та же: «верни чистый Markdown». Вставляешь обратно в файл. Чуть больше ручной возни, зато не стоишь.</p>
<p>Для вёрстки документов это всё равно быстрее, чем кликать стили в Word полдня.</p>
<p>ИИ не вместо головы: таблицы с цифрами и формулы после него глазами пробежи. Зато скелет документа он собирает за минуту.</p>
<p>Про то, как не плодить десять «финальных» копий — <a href="04.html">блок 4</a>.</p>
<div class="pager">
<a href="02.html">← Блок 2. Экспорт</a>
<a href="04.html">Блок 4. Git →</a>
</div>
</main>
</body>
</html>
+55
View File
@@ -0,0 +1,55 @@
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Блок 4. Git</title>
<link rel="stylesheet" href="css/style.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 href="01.html">1. Разметка</a>
<a href="02.html">2. Экспорт</a>
<a href="03.html">3. ИИ</a>
<a class="current" href="04.html">4. Git</a>
</nav>
</div>
</header>
<main class="wrap content">
<h1>Блок 4. Git — зачем, без команд</h1>
<img src="img/git-vs-word.png" alt="слева каша файлов Word, справа спокойное дерево версий" width="720">
<p>Рецензирование в Word знакомо: правки, комментарии, файл туда-сюда почтой.</p>
<p>Имена, которые все видели:</p>
<pre><code>презентация_финал_конец_финал2_теперь_точно.docx</code></pre>
<p>Работает, пока участников двое и неделя. Потом теряется, кто какую версию открыл.</p>
<h2>Чем git лучше (хотя порог выше)</h2>
<p>Git хранит <strong>историю</strong>, не десяток копий. Один репозиторий, много маленьких снимков: кто, когда, что поменял.</p>
<p>Зачем это нам, раз документы — Markdown:</p>
<ul>
<li>md — текст. Git видит <strong>строки</strong>, не бинарный комбайн Word.</li>
<li>можно ветки: ты пилишь раздел, коллега — другой, потом склеить.</li>
<li>рецензия = просмотр разницы (diff), а не «включи режим исправлений и молись, что трек-changes не разъехался».</li>
<li>откат: «как было в прошлый четверг» — не археология папки Загрузки.</li>
</ul>
<p>Сложнее, да. Это не кнопка «сохранить как». Зато конец зоопарку файлов.</p>
<h2>Что взять с собой</h2>
<p>Сегодня <strong>не учим команды</strong>. Это вектор: репозиторий, коммит, ветка, diff, удалённый сервер (GitHub / свой Gitea / что есть).</p>
<p>Освоил git + Markdown — документы живут как код. Почта с <code>финал3.docx</code> становится смешной.</p>
<p>Если останется время — отдельная сессия: init, commit, push. Не сегодня. Сегодня достаточно понять, <strong>зачем</strong>.</p>
<div class="pager">
<a href="03.html">← Блок 3. ИИ</a>
<a href="index.html">Содержание →</a>
</div>
</main>
</body>
</html>
+200
View File
@@ -0,0 +1,200 @@
:root {
--bg: #f6f1e8;
--paper: #fffaf3;
--ink: #1f2a2e;
--muted: #5c6a70;
--teal: #1f7a72;
--teal-d: #155e58;
--coral: #c45c26;
--line: #e4d9c8;
--code-bg: #243033;
--code-fg: #e8efe8;
}
* { box-sizing: border-box; }
html, body {
margin: 0;
padding: 0;
background: var(--bg);
color: var(--ink);
font: 18px/1.55 "Segoe UI", "PT Sans", sans-serif;
}
a { color: var(--teal-d); }
a:hover { color: var(--coral); }
.wrap {
max-width: 820px;
margin: 0 auto;
padding: 0 20px 64px;
}
.nav {
position: sticky;
top: 0;
z-index: 5;
background: rgba(246, 241, 232, 0.94);
border-bottom: 1px solid var(--line);
backdrop-filter: blur(8px);
}
.nav-inner {
max-width: 960px;
margin: 0 auto;
padding: 10px 16px;
display: flex;
flex-wrap: wrap;
gap: 8px 14px;
align-items: center;
}
.brand {
font-weight: 700;
text-decoration: none;
color: var(--ink);
margin-right: 8px;
}
.nav-inner nav {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.nav-inner nav a {
text-decoration: none;
font-size: 14px;
padding: 4px 10px;
border-radius: 999px;
color: var(--muted);
}
.nav-inner nav a:hover,
.nav-inner nav a.current {
background: #e7f3f1;
color: var(--teal-d);
}
h1, h2, h3, h4 { line-height: 1.25; }
h1 { font-size: 2rem; margin: 1.2em 0 0.5em; }
h2 { font-size: 1.45rem; margin-top: 1.6em; }
h3 { font-size: 1.15rem; }
.lead { font-size: 1.15rem; color: var(--muted); }
img.hero,
.content img {
max-width: 100%;
height: auto;
border-radius: 12px;
}
img.hero { display: block; margin: 8px 0 24px; }
.content img { margin: 8px 0; }
.card-list {
list-style: none;
padding: 0;
margin: 28px 0;
}
.card-list li {
background: var(--paper);
border: 1px solid var(--line);
border-radius: 12px;
margin: 0 0 12px;
}
.card-list a {
display: block;
padding: 14px 16px;
text-decoration: none;
color: inherit;
}
.card-list a:hover { background: #e7f3f1; }
.card-list strong { color: var(--teal-d); }
.card-list span { display: block; color: var(--muted); font-size: 0.95rem; margin-top: 4px; }
table {
border-collapse: collapse;
width: 100%;
background: var(--paper);
margin: 12px 0 20px;
}
th, td {
border: 1px solid var(--line);
padding: 8px 10px;
text-align: left;
}
th { background: #efe6d8; }
pre, code {
font-family: Consolas, "Cascadia Mono", monospace;
}
code {
background: #efe6d8;
padding: 0.1em 0.35em;
border-radius: 4px;
font-size: 0.9em;
}
pre {
background: var(--code-bg);
color: var(--code-fg);
padding: 14px 16px;
border-radius: 10px;
overflow: auto;
}
pre code { background: none; color: inherit; padding: 0; }
blockquote {
margin: 12px 0;
padding: 4px 0 4px 16px;
border-left: 4px solid var(--teal);
color: var(--muted);
}
hr {
border: 0;
border-top: 1px solid var(--line);
margin: 28px 0;
}
.pager {
display: flex;
justify-content: space-between;
gap: 12px;
margin-top: 40px;
padding-top: 16px;
border-top: 1px solid var(--line);
}
.pager a {
text-decoration: none;
font-weight: 600;
}
kbd {
font-family: inherit;
border: 1px solid var(--line);
background: #fff;
padding: 0 6px;
border-radius: 4px;
box-shadow: 0 1px 0 var(--line);
}
.footnote { font-size: 0.9rem; color: var(--muted); }
.mermaid { background: var(--paper); padding: 12px; border-radius: 10px; }
@media (max-width: 640px) {
.nav-inner nav a { font-size: 13px; padding: 4px 8px; }
h1 { font-size: 1.6rem; }
}
Binary file not shown.

After

Width:  |  Height:  |  Size: 1.9 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.1 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.2 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.4 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.4 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.5 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.5 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.8 MiB

+68
View File
@@ -0,0 +1,68 @@
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Демо разметки — содержание</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header class="nav">
<div class="nav-inner">
<a class="brand" href="index.html">Демо разметки</a>
<nav>
<a class="current" href="index.html">Содержание</a>
<a href="00.html">0. Cursor</a>
<a 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">
<h1>Содержание</h1>
<p class="lead">Небольшой сайт по блокам демо. Листай сверху или карточки ниже.</p>
<img class="hero" src="img/site-index-hero.png" alt="Книга, которая становится сайтом с оглавлением">
<ol class="card-list">
<li>
<a href="00.html">
<strong>Блок 0. Cursor</strong>
<span>Зачем редактор, совсем коротко. Потом будет подробнее.</span>
</a>
</li>
<li>
<a href="01.html">
<strong>Блок 1. Языки разметки</strong>
<span>Markdown, HTML внутри md, формулы, простой Mermaid.</span>
</a>
</li>
<li>
<a href="02.html">
<strong>Блок 2. Экспорт и ffmpeg</strong>
<span>PDF/HTML из md, плагины, картинки в WebP для сайта.</span>
</a>
</li>
<li>
<a href="03.html">
<strong>Блок 3. ИИ</strong>
<span>Форматирование документов: Cursor, а если лимиты кончились — Gemini / GPT.</span>
</a>
</li>
<li>
<a href="04.html">
<strong>Блок 4. Git</strong>
<span>Почему это лучше бесконечных «финал2.docx». Без команд.</span>
</a>
</li>
</ol>
<div class="pager">
<span></span>
<a href="00.html">Блок 0. Cursor →</a>
</div>
</main>
</body>
</html>
+2
View File
@@ -0,0 +1,2 @@
ffmpeg -i input.jpg -vf "scale=800:-1" -c:v libwebp -quality 80 output.webp
ffmpeg -i img/cover.png -vf "scale=800:-1" -c:v libwebp -quality 80 img_web/cover.webp
+1
View File
@@ -0,0 +1 @@
$env:Path = [System.Environment]::GetEnvironmentVariable("Path", "Machine") + ";" + [System.Environment]::GetEnvironmentVariable("Path", "User")