Это полное руководство по использованию Markdown в проекте Hub. Здесь вы найдете все доступные варианты форматирования с примерами синтаксиса и результатами отображения.
Заголовки
Заголовки используются для структурирования документа и создания оглавления.
Заголовок 1 уровня (H1)
# Заголовок 1 уровня (H1)
Заголовок 2 уровня (H2)
## Заголовок 2 уровня (H2)
Заголовок 3 уровня (H3)
### Заголовок 3 уровня (H3)
Заголовок 4 уровня (H4)
#### Заголовок 4 уровня (H4)
Заголовок 5 уровня (H5)
##### Заголовок 5 уровня (H5)
Заголовок 6 уровня (H6)
###### Заголовок 6 уровня (H6)
Форматирование текста
Базовое форматирование
Жирный текст создается двойными звездочками или подчеркиваниями.
**Жирный текст**
__Жирный текст__
Курсивный текст создается одинарными звездочками или подчеркиваниями.
*Курсивный текст*
_Курсивный текст_
Жирный и курсивный текст можно комбинировать.
***Жирный и курсивный текст***
**_Жирный и курсивный текст_**
Расширенное форматирование
Зачеркнутый текст использует двойные тильды.
~~Зачеркнутый текст~~
Встроенный код создается одинарными обратными кавычками.
`Встроенный код`
Подчеркнутый текст
<u>Подчеркнутый текст</u>
выделенный текст
<mark>выделенный текст</mark>
текст
<sub>текст</sub>
текст
<sup>текст</sup>
Списки
Маркированные списки
- Первый элемент
- Второй элемент
- Третий элемент
- Вложенный элемент
- Еще один вложенный элемент
- Четвертый элемент
- Первый элемент
- Второй элемент
- Третий элемент
- Вложенный элемент
- Еще один вложенный элемент
- Четвертый элемент
Нумерованные списки
- Первый элемент
- Второй элемент
- Третий элемент
- Вложенный элемент
- Еще один вложенный элемент
- Четвертый элемент
1. Первый элемент
2. Второй элемент
3. Третий элемент
1. Вложенный элемент
2. Еще один вложенный элемент
4. Четвертый элемент
Списки задач
- [x] Завершенная задача
- [ ] Незавершенная задача
- [ ] Еще одна задача
- [x] Вложенная завершенная задача
- [ ] Вложенная незавершенная задача
Ссылки и изображения
Ссылки
Текст ссылки создается следующим синтаксисом:
[Текст ссылки](https://opensophy.com)
Автоматическая ссылка: https://opensophy.com
https://opensophy.com
Изображения
Изображения вставляются следующим образом:
Изображения с описанием:
Цитаты
Это простая цитата.
Она может занимать несколько строк.
> Это простая цитата.
> Она может занимать несколько строк.
Это вложенная цитата.
Еще более глубокая вложенность.
И еще глубже.
> Это вложенная цитата.
>> Еще более глубокая вложенность.
>>> И еще глубже.
Блоки уведомления
Hub поддерживает специальные блоки уведомлений.
Полезная информация, которую пользователи должны знать, даже при беглом просмотре.
:::note
Полезная информация, которую пользователи должны знать, даже при беглом просмотре.
:::
Полезный совет для улучшения работы пользователя.
:::tip
Полезный совет для улучшения работы пользователя.
:::
Ключевая информация, необходимая для успешного выполнения задачи.
:::important
Ключевая информация, необходимая для успешного выполнения задачи.
:::
Срочная информация, требующая немедленного внимания для предотвращения проблем.
:::warning
Срочная информация, требующая немедленного внимания для предотвращения проблем.
:::
Рекомендации о рисках или негативных последствиях определенных действий.
:::caution
Рекомендации о рисках или негативных последствиях определенных действий.
:::
Блоки кода
Вкладки
:::tabs
:::tab[Пример 1]
```javascript
const x = 1;
```
:::
:::tab[Пример 2]
```typescript
const x: number = 1;
```
:::
:::
Встроенный код
Используйте const variable = value; для объявления переменных.
Используйте `const variable = value;` для объявления переменных.
Блоки кода с подсветкой синтаксиса
function greet(name) {
console.log(`Hello, ${name}!`);
return `Welcome to Hub, ${name}`;
}
const result = greet('User');
```javascript
function greet(name) {
console.log(`Hello, ${name}!`);
return `Welcome to Hub, ${name}`;
}
const result = greet('User');
```
def calculate_sum(a, b):
"""Вычисляет сумму двух чисел"""
return a + b
result = calculate_sum(10, 20)
print(f"Результат: {result}")
```python
def calculate_sum(a, b):
"""Вычисляет сумму двух чисел"""
return a + b
result = calculate_sum(10, 20)
print(f"Результат: {result}")
```
interface User {
id: number;
name: string;
email: string;
}
const createUser = (name: string, email: string): User => {
return {
id: Math.random(),
name,
email
};
};
```typescript
interface User {
id: number;
name: string;
email: string;
}
const createUser = (name: string, email: string): User => {
return {
id: Math.random(),
name,
email
};
};
```
# Установка зависимостей
npm install
# Запуск проекта в режиме разработки
npm run dev
# Сборка проекта для продакшена
npm run build
```bash
# Установка зависимостей
npm install
# Запуск проекта в режиме разработки
npm run dev
# Сборка проекта для продакшена
npm run build
```
Таблицы
Простая таблица
| Заголовок 1 |
Заголовок 2 |
Заголовок 3 |
| Ячейка 1 |
Ячейка 2 |
Ячейка 3 |
| Ячейка 4 |
Ячейка 5 |
Ячейка 6 |
| Ячейка 7 |
Ячейка 8 |
Ячейка 9 |
| Заголовок 1 | Заголовок 2 | Заголовок 3 |
|-------------|-------------|-------------|
| Ячейка 1 | Ячейка 2 | Ячейка 3 |
| Ячейка 4 | Ячейка 5 | Ячейка 6 |
| Ячейка 7 | Ячейка 8 | Ячейка 9 |
Таблица с выравниванием
| Слева |
По центру |
Справа |
| Текст слева |
По центру |
Текст справа |
| Еще текст |
Еще текст |
Еще текст |
| Слева | По центру | Справа |
|:------------|:-----------:|------------:|
| Текст слева | По центру | Текст справа|
| Еще текст | Еще текст | Еще текст |
Таблица с форматированием
| Название |
Описание |
Статус |
| Hub |
Документация проекта |
✅ Активен |
| API |
REST API для разработки |
🔄 В разработке |
| CLI |
Командная строка |
❌ Устарело |
| Название | Описание | Статус |
|-------------|---------------------------|-----------------|
| **Hub** | *Документация проекта* | ✅ Активен |
| **API** | `REST API` для разработки | 🔄 В разработке |
| **CLI** | ~~Командная строка~~ | ❌ Устарело |
Большая таблица с данными
| ID |
Название |
Категория |
Тип |
Дата создания |
Автор |
Статус |
Версия |
| 001 |
Проект Alpha |
Разработка |
Frontend |
2026-01-15 |
Ivan |
Активен |
2.1.0 |
| 002 |
Проект Beta |
Документация |
Backend |
2026-01-20 |
Maria |
В работе |
1.5.3 |
| 003 |
Проект Gamma |
Тестирование |
QA |
2026-02-01 |
Alex |
Завершен |
3.0.0 |
| 004 |
Проект Delta |
Безопасность |
Security |
2026-02-10 |
Elena |
Активен |
1.2.1 |
| 005 |
Проект Epsilon |
Дизайн |
UI/UX |
2026-02-12 |
Dmitry |
На паузе |
2.0.0 |
| ID | Название | Категория | Тип | Дата создания | Автор | Статус | Версия |
|-----|----------------|---------------|-----------|---------------|------------|-------------|--------|
| 001 | Проект Alpha | Разработка | Frontend | 2026-01-15 | Ivan | Активен | 2.1.0 |
| 002 | Проект Beta | Документация | Backend | 2026-01-20 | Maria | В работе | 1.5.3 |
| 003 | Проект Gamma | Тестирование | QA | 2026-02-01 | Alex | Завершен | 3.0.0 |
| 004 | Проект Delta | Безопасность | Security | 2026-02-10 | Elena | Активен | 1.2.1 |
| 005 | Проект Epsilon | Дизайн | UI/UX | 2026-02-12 | Dmitry | На паузе | 2.0.0 |
Детали/Аккордеон
Нажмите, чтобы развернуть
Это скрытый контент, который отображается при клике на заголовок.
Здесь может быть любой Markdown:
console.log("Hello from accordion!");
Как такое написать?
<details>
<summary>Нажмите, чтобы развернуть</summary>
Это скрытый контент, который отображается при клике на заголовок.
Здесь может быть любой Markdown:
- Списки
- **Жирный текст**
- `Код`
```javascript
console.log("Hello from accordion!");
```
</details>
Горизонтальная линия
Горизонтальная линия создается тремя или более дефисами, звездочками или подчеркиваниями:
---
***
___
UI компоненты
Hub поддерживает встраивание интерактивных UI компонентов прямо в документацию.
Blur Text компонент
[uic:blur-text]
[uic:blur-text]
Карточки
Hub поддерживает красивые карточки с иконкой, заголовком и акцентным цветом. Цвет задаётся любым CSS-значением: hex, rgb, hsl, oklch и именованные цвета.
Одиночная карточка
Это пример одиночной карточки с фиолетовым акцентом и иконкой ракеты.
:::card[color=#7234ff]
[title]Одиночная карточка
[icon]rocket
Это пример одиночной карточки с фиолетовым акцентом и иконкой ракеты.
:::
Карточка без иконки и без цвета
Карточка без иконки и без акцентного цвета — нейтральный вариант.
:::card
[title]Простая карточка
Карточка без иконки и без акцентного цвета — нейтральный вариант.
:::
Сетка 2×2
Четыре карточки в две колонки — параметр cols=2.
Вся документация проекта в одном месте. Структурированно и с поиском.
Полный справочник по REST API с примерами запросов и ответов.
Библиотека UI-компонентов с интерактивными примерами и playground.
Руководство по аутентификации, правам доступа и лучшим практикам.
:::cards[cols=2]
:::card[color=#3b82f6]
[title]Документация
[icon]book-open
Вся документация проекта в одном месте.
:::
:::card[color=#22c55e]
[title]API Reference
[icon]code-2
Полный справочник по REST API.
:::
:::card[color=#f59e0b]
[title]Компоненты
[icon]layers
Библиотека UI-компонентов.
:::
:::card[color=#ef4444]
[title]Безопасность
[icon]shield-check
Руководство по аутентификации.
:::
:::
Сетка 3×1 (три карточки в ряд)
Три карточки в одну строку — параметр cols=3.
Запустите проект за 5 минут с нашим руководством.
Подключите сторонние сервисы и инструменты.
Свяжитесь с командой или найдите ответ в FAQ.
:::cards[cols=3]
:::card[color=#8b5cf6]
[title]Быстрый старт
[icon]zap
Запустите проект за 5 минут.
:::
:::card[color=#06b6d4]
[title]Интеграции
[icon]plug
Подключите сторонние сервисы.
:::
:::card[color=#f43f5e]
[title]Поддержка
[icon]life-buoy
Свяжитесь с командой.
:::
:::
:::card
[image]/assets/image.png
[title]Заголовок
[icon]image
Описание карточки.
:::
Лимит сетки — 3 колонки. На мобильных устройствах карточки автоматически выстраиваются в одну колонку. Параметр cols принимает значения 1, 2 или 3.
Колонки
Блок :::columns позволяет разместить контент в несколько колонок. Параметр layout управляет шириной и порядком колонок.
Текст слева, изображение справа
Заголовок раздела
Текст располагается в широкой левой колонке. Здесь можно писать любой Markdown — списки, ссылки, форматирование.
- Поддерживаются все элементы Markdown
- Гибкая настройка через параметр
layout
- Адаптивность: на мобиле колонки складываются вертикально
:::columns[layout=wide-left]
:::col
## Заголовок раздела
Текст располагается в широкой левой колонке.
- Поддерживаются все элементы Markdown
- Гибкая настройка через параметр `layout`
:::
:::col
:::
:::
Изображение слева, текст справа
Другой порядок
Теперь изображение стоит слева, а текст — справа. Используйте layout=image-left когда хотите начать визуально с картинки.
Колонки автоматически подбирают пропорции: под изображение — меньше, под текст — больше.
:::columns[layout=image-left]
:::col
:::
:::col
## Другой порядок
Изображение слева, текст справа.
:::
:::
Доступные варианты layout: equal — равные колонки, image-left — фото слева, image-right — фото справа, wide-left — левая колонка шире (70/30), wide-right — правая колонка шире (30/70).
Steps (Шаги)
Компонент :::steps позволяет оформлять пошаговые инструкции, туториалы и процессы с визуальной индикацией прогресса.
Базовый синтаксис
:::steps
:::step Первый шаг
Содержимое первого шага.
:::
:::step Второй шаг
Содержимое второго шага.
:::
:::step Третий шаг
Содержимое третьего шага.
:::
:::
Содержимое третьего шага.
Статусы шагов
Каждый шаг может иметь статус через параметр status:
| Статус |
Описание |
default |
Обычный шаг без акцента (по умолчанию) |
active |
Текущий активный шаг — фиолетовый акцент |
done |
Завершённый шаг — зелёный кружок с галочкой |
pending |
Будущий шаг — приглушённый, ожидает очереди |
:::steps
:::step[status=done] Установка зависимостей
Запустите `npm install` в корне проекта.
:::
:::step[status=active] Настройка конфига
Заполните файл `.env` на основе `.env.example`.
:::
:::step[status=pending] Запуск сервера
Выполните `npm run dev` и откройте `http://localhost:4321`.
:::
:::
Запустите npm install в корне проекта.
Заполните файл .env на основе .env.example.
Выполните npm run dev и откройте http://localhost:4321.
Кастомный цвет шага
Параметр color задаёт акцентный цвет кружка и линии для конкретного шага. Принимает любое валидное CSS-значение цвета.
:::steps
:::step[status=done,color=#f59e0b] Подготовка
Соберите все необходимые данные.
:::
:::step[status=active,color=#3b82f6] Обработка
Запустите скрипт обработки данных.
:::
:::step[status=pending,color=#8b5cf6] Публикация
Разверните результат на сервере.
:::
:::
Соберите все необходимые данные.
Запустите скрипт обработки данных.
Разверните результат на сервере.
Для статуса pending цвет намеренно не применяется — шаг остаётся приглушённым, так как он ещё не активен.
Форматы цвета
color принимает любой CSS-цвет:
:::steps
:::step[status=done,color=#22c55e] HEX
Стандартный шестнадцатеричный формат.
:::
:::step[status=active,color=rgb(239,68,68)] RGB
Функциональная нотация RGB.
:::
:::step[status=default,color=oklch(70%_0.2_270)] OKLCH
Современный цветовой формат с широким охватом.
:::
:::
Содержимое шагов
Внутри шага поддерживается любой Markdown — текст, код, списки, алерты:
:::steps
:::step[status=done] Клонировать репозиторий
Скопируйте команду и выполните в терминале:
`git clone https://github.com/opensophy/hub.git`
Убедитесь, что у вас установлен Git версии 2.30+.
:::
:::step[status=active] Установить зависимости
Проект использует следующие менеджеры пакетов:
- **npm** — рекомендуется
- **pnpm** — поддерживается
- **yarn** — поддерживается
`npm install`
:::
:::step[status=pending] Запустить проект
После установки запустите dev-сервер:
`npm run dev`
:::
:::
Скопируйте команду и выполните в терминале:
git clone https://github.com/opensophy/hub.git
Убедитесь, что у вас установлен Git версии 2.30+.
Проект использует следующие менеджеры пакетов:
- npm — рекомендуется
- pnpm — поддерживается
- yarn — поддерживается
npm install
После установки запустите dev-сервер:
npm run dev
Все параметры
:::step[status=active,color=#7234ff] Заголовок шага
Содержимое шага.
:::
| Параметр |
Тип |
Обязательный |
Описание |
status |
done | active | pending | default |
нет |
Визуальный статус шага |
color |
CSS-цвет |
нет |
Кастомный цвет кружка и линии |
| Заголовок |
строка |
да |
Текст после закрывающей ] |
``
KaTeX формулы(математические формулы)
Инлайн — прямо в тексте (...)
Масса-энергетический эквивалент: E=mc2 — формула прямо в строке.
Теорема Пифагора: в прямоугольном треугольнике a2+b2=c2 всегда верна.
Квадратное уравнение ax2+bx+c=0 имеет дискриминант D=b2−4ac.
Сложность алгоритма — O(nlogn) в среднем и O(n2) в худшем случае.
Закон тяготения: F=Gr2m1m2, где G — гравитационная постоянная.
Масса-энергетический эквивалент: $E = mc^2$ — формула прямо в строке.
Теорема Пифагора: в прямоугольном треугольнике $a^2 + b^2 = c^2$ всегда верна.
Квадратное уравнение $ax^2 + bx + c = 0$ имеет дискриминант $D = b^2 - 4ac$.
Сложность алгоритма — $O(n \log n)$ в среднем и $O(n^2)$ в худшем случае.
Закон тяготения: $F = G\dfrac{m_1 m_2}{r^2}$, где $G$ — гравитационная постоянная.
Инлайн — через :::math (отдельный абзац, без рамки)
Формула энергии:
E=mc2
Теорема Пифагора:
a2+b2=c2
Энтропия Шеннона:
H=−∑ipilog2pi
Формула энергии:
:::math
E = mc^2
:::
Теорема Пифагора:
:::math
a^2 + b^2 = c^2
:::
Энтропия Шеннона:
:::math
H = -\sum_{i} p_i \log_2 p_i
:::
Блочные — :::math[display] (с рамкой, по центру)
Корни квадратного уравнения:
x=2a−b±b2−4ac
Интеграл Гаусса:
∫−∞+∞e−x2dx=π
Формула Эйлера:
eiπ+1=0
Ряд Тейлора:
ex=n=0∑∞n!xn
Матрица 3×3:
A=a11a21a31a12a22a32a13a23a33
Уравнение Шрёдингера:
iℏ∂t∂Ψ=−2mℏ2∇2Ψ+VΨ
Корни квадратного уравнения:
:::math[display]
x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}
:::
Интеграл Гаусса:
:::math[display]
\int_{-\infty}^{+\infty} e^{-x^2} \, dx = \sqrt{\pi}
:::
Формула Эйлера:
:::math[display]
e^{i\pi} + 1 = 0
:::
Ряд Тейлора:
:::math[display]
e^x = \sum_{n=0}^{\infty} \frac{x^n}{n!}
:::
Матрица 3×3:
:::math[display]
A = \begin{pmatrix} a_{11} & a_{12} & a_{13} \\ a_{21} & a_{22} & a_{23} \\ a_{31} & a_{32} & a_{33} \end{pmatrix}
:::
Уравнение Шрёдингера:
:::math[display]
i\hbar \frac{\partial \Psi}{\partial t} = -\frac{\hbar^2}{2m} \nabla^2 \Psi + V\Psi
:::
Итоговое сравнение
| Вариант |
Синтаксис |
Результат |
| Инлайн в тексте |
$E = mc^2$ |
Формула течёт с текстом |
| Инлайн абзац |
:::math |
Отдельная строка, без рамки |
| Блочный |
:::math[display] |
По центру, с рамкой |
Для формул прямо в предложении используй $...$ — это самый компактный вариант. :::math — когда формула стоит отдельным абзацем но без акцента. :::math[display] — когда формула важная и должна выделяться.
Графики
Area
:::chart
[title]Посещаемость за год
[type]area
[colors]#33b02c, #392cb0, #b02c2c
| Месяц | Визиты | Уники | Боты |
|-------|--------|-------|------|
| Янв | 4200 | 3100 | 200 |
| Фев | 3800 | 2900 | 180 |
| Мар | 5100 | 3900 | 240 |
| Апр | 4700 | 3500 | 210 |
| Май | 6200 | 4800 | 290 |
| Июн | 5800 | 4400 | 260 |
:::
Area Stacked
:::chart
[title]Трафик по каналам (накопительно)
[type]area-stacked
[colors]#383838, #51257d, #6b3a9e
| Месяц | Органика | Реклама | Прямой |
|-------|----------|---------|--------|
| Янв | 2100 | 800 | 500 |
| Фев | 2400 | 950 | 520 |
| Мар | 2800 | 1100 | 580 |
| Апр | 3100 | 1200 | 610 |
| Май | 3600 | 1400 | 700 |
| Июн | 3900 | 1500 | 750 |
:::
Bar
:::chart
[title]Продажи по кварталам
[type]bar
[colors]#383838, #7c9ca1, #33b02c
| Квартал | Север | Юг | Запад |
|---------|-------|-----|-------|
| Q1 | 1200 | 900 | 750 |
| Q2 | 1500 | 1100| 900 |
| Q3 | 1800 | 1300| 1050 |
| Q4 | 2100 | 1600| 1300 |
:::
Bar Stacked
:::chart
[title]Расходы по статьям
[type]bar-stacked
[colors]#383838, #51257d, #6b3a9e
| Месяц | Зарплаты | Инфра | Маркетинг |
|-------|----------|-------|-----------|
| Янв | 3200 | 800 | 400 |
| Фев | 3200 | 820 | 600 |
| Мар | 3400 | 850 | 900 |
| Апр | 3400 | 870 | 700 |
| Май | 3600 | 900 | 1100 |
| Июн | 3600 | 920 | 800 |
:::
Bar Horizontal
:::chart
[title]Топ языков программирования
[type]bar-horizontal
[colors]#7234ff, #22c55e, #f59e0b, #3b82f6, #ef4444
| Язык | Популярность |
|------------|--------------|
| Python | 28 |
| JavaScript | 24 |
| TypeScript | 18 |
| Rust | 14 |
| Go | 10 |
:::
Pie
:::chart
[title]Источники трафика
[type]pie
[colors]#7234ff, #51257d, #383838, #22c55e, #f59e0b
| Источник | Доля |
|------------|------|
| Органика | 42 |
| Прямой | 28 |
| Реклама | 18 |
| Соцсети | 8 |
| Прочее | 4 |
:::
Pie Donut
:::chart
[title]Доли рынка браузеров
[type]pie-donut
[colors]#7234ff, #f59e0b, #22c55e, #3b82f6
| Браузер | Доля |
|---------|------|
| Chrome | 63 |
| Firefox | 10 |
| Safari | 20 |
| Другие | 7 |
:::
Radar
:::chart
[title]Оценка навыков команды
[type]radar
[colors]#7234ff, #22c55e
| Навык | Фронтенд | Бэкенд |
|------------|----------|--------|
| TypeScript | 90 | 60 |
| Python | 40 | 95 |
| SQL | 55 | 88 |
| DevOps | 50 | 75 |
| UI/UX | 85 | 30 |
| Тесты | 70 | 80 |
:::
