Подготовил презентацию
@@ -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>
|
||||
@@ -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). Сейчас просто открываем файлы и смотрим, как разметка оживает.
|
||||
@@ -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
|
||||

|
||||
```
|
||||
|
||||

|
||||
|
||||
Для сайта так часто **мало**: огромная 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
|
||||

|
||||
```
|
||||
|
||||
С шириной:
|
||||
|
||||
```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 обычно работает.
|
||||
@@ -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">"scale=800:-1"</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">"scale=800:-1"</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 "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>качество, 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">"scale=480:-1"</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"><<span class="hljs-name">img</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"img_web/cover.webp"</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">"обложка"</span> <span class="hljs-attr">width</span>=<span class="hljs-string">"800"</span>></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>
|
||||
@@ -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).
|
||||
@@ -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><img width=...></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>
|
||||
@@ -0,0 +1,35 @@
|
||||
# Блок 3. ИИ для разметки
|
||||
|
||||
Смысл не в том, чтобы «нейросеть написала роман». Смысл в **форматировании**: сырой текст, таблица из Excel, переписка, конспект — на вход, аккуратный Markdown на выход. Быстро и ровно.
|
||||
|
||||
Cursor тут как раз в своей тарелке: видит файл, правит файл, не надо копировать туда-сюда.
|
||||
|
||||
## Почему именно форматирование
|
||||
|
||||
Задача тупая и чёткая: заголовки, списки, таблицы, формулы в `$...$`, картинки. ИИ такое любит. Мало «творчества» — мало галлюцинаций.
|
||||
|
||||
В **бесплатном** Cursor на такие мелкие правки лимитов обычно хватает. Кончились — не драма, см. ниже.
|
||||
|
||||
Примеры промптов, без церемоний:
|
||||
|
||||
- «приведи этот файл к нормальному Markdown: заголовки, списки, таблица»
|
||||
- «формулы оберни в `$...$` / `$$...$$`»
|
||||
- «сделай mermaid-схему процесса из абзаца ниже»
|
||||
- «замени жирные картинки на `<img width=...>` по центру»
|
||||
|
||||
Кидаешь черновик в чат или `@файл` — получаешь diff. Смотришь превью. Не нравится кусок — «короче» / «без вот этой секции».
|
||||
|
||||
## Если лимиты Cursor кончились
|
||||
|
||||
Тот же черновик можно отнести наружу:
|
||||
|
||||
- **Gemini**
|
||||
- **ChatGPT (GPT)**
|
||||
|
||||
Просьба та же: «верни чистый Markdown». Вставляешь обратно в файл. Чуть больше ручной возни, зато не стоишь.
|
||||
|
||||
Для вёрстки документов это всё равно быстрее, чем кликать стили в Word полдня.
|
||||
|
||||
ИИ не вместо головы: таблицы с цифрами и формулы после него глазами пробежи. Зато скелет документа он собирает за минуту.
|
||||
|
||||
Про то, как не плодить десять «финальных» копий — [блок 4](04-git.md).
|
||||
@@ -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>
|
||||
@@ -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. Не сегодня. Сегодня достаточно понять, **зачем**.
|
||||
@@ -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>
|
||||
@@ -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`).
|
||||
|
||||
Поехали.
|
||||
|
After Width: | Height: | Size: 2.3 MiB |
|
After Width: | Height: | Size: 7.2 KiB |
|
After Width: | Height: | Size: 5.1 KiB |
|
After Width: | Height: | Size: 12 KiB |
|
After Width: | Height: | Size: 26 KiB |
|
After Width: | Height: | Size: 1.4 MiB |
|
After Width: | Height: | Size: 1.9 MiB |
|
After Width: | Height: | Size: 2.1 MiB |
|
After Width: | Height: | Size: 2.2 MiB |
|
After Width: | Height: | Size: 1.4 MiB |
|
After Width: | Height: | Size: 2.4 MiB |
|
After Width: | Height: | Size: 1.5 MiB |
|
After Width: | Height: | Size: 2.5 MiB |
|
After Width: | Height: | Size: 800 KiB |
|
After Width: | Height: | Size: 569 KiB |
|
After Width: | Height: | Size: 2.8 MiB |
|
After Width: | Height: | Size: 93 KiB |
|
After Width: | Height: | Size: 1.7 MiB |
|
After Width: | Height: | Size: 2.0 MiB |
|
After Width: | Height: | Size: 1.7 MiB |
|
After Width: | Height: | Size: 1.7 MiB |
|
After Width: | Height: | Size: 6.8 MiB |
|
After Width: | Height: | Size: 71 KiB |
@@ -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>
|
||||
@@ -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></code></pre>
|
||||
<p><img src="img/html-images.png" alt="лис в рамках"></p>
|
||||
<p>Для сайта так часто <strong>мало</strong>: огромная PNG, не туда прижата. Тогда HTML — ниже.</p>
|
||||
|
||||
<h3>Цитаты и код</h3>
|
||||
<blockquote>
|
||||
<p>Цитата.<br>Можно в несколько строк.</p>
|
||||
<blockquote>и даже вложенная</blockquote>
|
||||
</blockquote>
|
||||
<pre><code>print("привет")</code></pre>
|
||||
<pre><code>console.log("тоже привет");</code></pre>
|
||||
|
||||
<h3>Таблица</h3>
|
||||
<table>
|
||||
<thead><tr><th>Команда</th><th>Что делает</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td><code>#</code></td><td>заголовок</td></tr>
|
||||
<tr><td><code>*</code> / <code>-</code></td><td>список</td></tr>
|
||||
<tr><td><code>**</code></td><td>жирный</td></tr>
|
||||
<tr><td><code>`</code></td><td>код</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="text-align:left">влево</th>
|
||||
<th style="text-align:center">центр</th>
|
||||
<th style="text-align:right">вправо</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td style="text-align:left">a</td>
|
||||
<td style="text-align:center">b</td>
|
||||
<td style="text-align:right">c</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="text-align:left">10</td>
|
||||
<td style="text-align:center">20</td>
|
||||
<td style="text-align:right">30</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<h3>Мелочи</h3>
|
||||
<p>Клавиша: <kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>V</kbd></p>
|
||||
<p>Верхний/нижний индекс чистым md <strong>нет</strong> — это HTML: H<sub>2</sub>O, E = mc<sup>2</sup>.</p>
|
||||
<p>Экранирование в md: пишем <code>\*</code> если нужен символ, а не курсив.</p>
|
||||
<p>Автоссылка: <a href="https://cursor.com">https://cursor.com</a></p>
|
||||
|
||||
<hr>
|
||||
<h2>HTML внутри Markdown</h2>
|
||||
<p>Когда md упирается — вставляем HTML. Зачем чаще всего: <strong>картинки</strong>. В чистом md нельзя сказать «ширина 240px, прижать вправо».</p>
|
||||
<img src="img/html-images.png" alt="три кадра с лисом" width="640">
|
||||
|
||||
<h3>Размер</h3>
|
||||
<pre><code><img src="img/html-images.png" alt="лиса" width="240"></code></pre>
|
||||
<p>Узко:</p>
|
||||
<img src="img/html-images.png" alt="лиса узко" width="240">
|
||||
<p>Шире:</p>
|
||||
<img src="img/html-images.png" alt="лиса шире" width="480">
|
||||
<p>Или стиль <code>width: 40%</code>:</p>
|
||||
<img src="img/html-images.png" alt="лиса 40%" style="width: 40%;">
|
||||
|
||||
<h3>Выравнивание</h3>
|
||||
<p>По центру:</p>
|
||||
<p align="center">
|
||||
<img src="img/html-images.png" alt="центр" width="320">
|
||||
</p>
|
||||
<p>Вправо + подпись:</p>
|
||||
<p align="right">
|
||||
<img src="img/markdown-hero.png" alt="md" width="280"><br>
|
||||
<em>маленькая справа</em>
|
||||
</p>
|
||||
<p>Обтекание текстом:</p>
|
||||
<img src="img/cursor-intro.png" alt="cursor" width="220" style="float: left; margin: 0 12px 8px 0;">
|
||||
<p>Текст обтекает картинку слева. Для лендинга и шпаргалок — самое то. Дальше не забудь сбросить float.</p>
|
||||
<br style="clear: both;">
|
||||
|
||||
<h3>Ещё HTML</h3>
|
||||
<details>
|
||||
<summary>Спойлер (клик)</summary>
|
||||
<p>Секрет: внутри md можно прятать длинноты. На сайте — тем более.</p>
|
||||
</details>
|
||||
<p><mark>жёлтым</mark> и <span style="color: #c45c26;">акцент</span></p>
|
||||
<p>Правило: <strong>сначала md, HTML — точечно</strong>. Целую страницу лучше уже как этот сайт, а не внутри <code>.md</code>.</p>
|
||||
|
||||
<hr>
|
||||
<h2>LaTeX — только формулы</h2>
|
||||
<img src="img/latex-board.png" alt="доска с формулами" width="720">
|
||||
<p>LaTeX — целая система вёрстки научных текстов. <strong>Нам сегодня не это.</strong> В Markdown живёт кусок: математика в <code>$...$</code> / <code>$$...$$</code>. Здесь на сайте то же самое рисует KaTeX.</p>
|
||||
|
||||
<h3>В строке</h3>
|
||||
<p>Энергия: $E = mc^2$.</p>
|
||||
<p>Дробь и корень: $\frac{a}{b}$, $\sqrt{x}$, $\sqrt[3]{8}$.</p>
|
||||
<p>Греческое: $\alpha, \beta, \gamma, \pi, \omega, \hbar$.</p>
|
||||
<p>Индекс и степень: $x_i$, $x^2$, $a_{n+1}^{2}$.</p>
|
||||
<p>Бином: $\left( a + b \right)^n = \sum_{i=0}^n C_n^i \, a^i b^{n-i}$</p>
|
||||
|
||||
<h3>Блоком</h3>
|
||||
$$
|
||||
i\hbar\frac{\partial}{\partial t}\Psi(\mathbf{r}, t)
|
||||
= \left[-\frac{\hbar^2}{2m}\nabla^2 + V(\mathbf{r}, t)\right]\Psi(\mathbf{r}, t)
|
||||
$$
|
||||
<p>Система:</p>
|
||||
$$
|
||||
\begin{cases}
|
||||
x + y = 1 \\
|
||||
x - y = 0
|
||||
\end{cases}
|
||||
$$
|
||||
<p>Матрица:</p>
|
||||
$$
|
||||
\begin{pmatrix}
|
||||
a & b \\
|
||||
c & d
|
||||
\end{pmatrix}
|
||||
\begin{pmatrix} x \\ y \end{pmatrix}
|
||||
=
|
||||
\begin{pmatrix} p \\ q \end{pmatrix}
|
||||
$$
|
||||
<p>Интеграл: $\displaystyle \int_0^1 x^2\,dx = \frac{1}{3}$</p>
|
||||
|
||||
<hr>
|
||||
<h2>Mermaid</h2>
|
||||
<img src="img/mermaid-pun.png" alt="русалка рисует блок-схему" width="720">
|
||||
<p>Схемы текстом. Не лезем в Visio. На этой странице их рисует скрипт Mermaid.</p>
|
||||
|
||||
<h3>Стрелки</h3>
|
||||
<pre class="mermaid">
|
||||
flowchart LR
|
||||
A[Идея] --> B[Markdown]
|
||||
B --> C[Превью]
|
||||
C --> D[PDF / HTML]
|
||||
</pre>
|
||||
|
||||
<h3>Ветвление</h3>
|
||||
<pre class="mermaid">
|
||||
flowchart TD
|
||||
Q{Нужен размер картинки?}
|
||||
Q -->|нет| MD[Чистый md]
|
||||
Q -->|да| HTML[Тег img]
|
||||
</pre>
|
||||
|
||||
<h3>Кто кому пишет</h3>
|
||||
<pre class="mermaid">
|
||||
sequenceDiagram
|
||||
participant Я
|
||||
participant Cursor
|
||||
Я->>Cursor: открой превью
|
||||
Cursor-->>Я: вот документ
|
||||
</pre>
|
||||
|
||||
<p>Дальше: выгрузка и лёгкие картинки — <a href="02.html">блок 2</a>.</p>
|
||||
<p class="footnote" id="fn1"><sup>1</sup> Сноска. В pdf обычно тоже работает.</p>
|
||||
|
||||
<div class="pager">
|
||||
<a href="00.html">← Блок 0. Cursor</a>
|
||||
<a href="02.html">Блок 2. Экспорт →</a>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.11/dist/katex.min.js"></script>
|
||||
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.11/dist/contrib/auto-render.min.js"></script>
|
||||
<script>
|
||||
document.addEventListener("DOMContentLoaded", function () {
|
||||
renderMathInElement(document.body, {
|
||||
delimiters: [
|
||||
{ left: "$$", right: "$$", display: true },
|
||||
{ left: "$", right: "$", display: false }
|
||||
],
|
||||
ignoredTags: ["script", "noscript", "style", "textarea", "pre", "code"]
|
||||
});
|
||||
});
|
||||
</script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.min.js"></script>
|
||||
<script>
|
||||
mermaid.initialize({ startOnLoad: true, theme: "neutral" });
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -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><img src="img_web/cover.webp" alt="обложка" width="800"></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>
|
||||
@@ -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><img width=...></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>
|
||||
@@ -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>
|
||||
@@ -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; }
|
||||
}
|
||||
|
After Width: | Height: | Size: 1.9 MiB |
|
After Width: | Height: | Size: 2.1 MiB |
|
After Width: | Height: | Size: 2.2 MiB |
|
After Width: | Height: | Size: 1.4 MiB |
|
After Width: | Height: | Size: 2.4 MiB |
|
After Width: | Height: | Size: 1.5 MiB |
|
After Width: | Height: | Size: 2.5 MiB |
|
After Width: | Height: | Size: 2.8 MiB |
@@ -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>
|
||||
@@ -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
|
||||
@@ -0,0 +1 @@
|
||||
$env:Path = [System.Environment]::GetEnvironmentVariable("Path", "Machine") + ";" + [System.Environment]::GetEnvironmentVariable("Path", "User")
|
||||