# Заголовок H1

## Заголовок H2

### Заголовок H3

#### Заголовок H4

##### Заголовок H5

###### Заголовок H6

**Жирный текст**

*Курсивный текст*

~~Зачёркнутый текст~~

<u>Подчёркнутый текст</u>

<mark>Выделенный текст зависит от accent color сайта.</mark>

Используйте `inline code` внутри предложения.

[Официальный сайт](https://opensophy.com)

![logo](/og-image.jpg)

> Цитата использует акцентную линию сайта слева.

- Первый пункт
- Второй пункт с **жирным** текстом
- Третий пункт с `inline code`

1. Первый шаг
2. Второй шаг
3. Третий шаг

- [x] Завершённая задача
- [ ] Незавершённая задача
- [x] Проверить вложенные markdown-компоненты

<Admonition variant="note">
Полезная информация, которую нужно показать без агрессивного предупреждения.
</Admonition>

<Admonition variant="tip">
Совет по лучшему использованию компонента или API.
</Admonition>

<Admonition variant="important">
Критичная информация, без которой инструкция может быть выполнена неправильно.
</Admonition>

<Admonition variant="warning">
Предупреждение о возможной проблеме, несовместимости или ограничении.
</Admonition>

<Admonition variant="caution">
Опасная операция, которая может сломать контент или состояние проекта.
</Admonition>

<Cards>
  <Card eyebrow="01" title="Component-first">Каждый паттерн живёт как Svelte-компонент.</Card>
  <Card eyebrow="02" title="Canvas-ready">Визуальные эффекты можно оборачивать в markdown-friendly блоки.</Card>
  <Card eyebrow="03" title="CLI workflow">Документация остаётся источником правды.</Card>
</Cards>

<Columns count={2}>
  <Card title="Левая колонка">Контент первой колонки.</Card>
  <Card title="Правая колонка">Контент второй колонки.</Card>
</Columns>

<Steps>
  <Step title="Подготовить страницу" status="done">Страница создана.</Step>
  <Step title="Проверить оформление" status="active">Идёт проверка.</Step>
  <Step title="Опубликовать" status="todo">Следующий шаг.</Step>
  <Step title="Осторожно" status="warning">Опасная операция.</Step>
</Steps>

| Компонент | Статус | Комментарий |
| --- | --- | --- |
| `Table.svelte` | Готово | Копирование, поиск, сортировка, fullscreen |
| `Pre.svelte` | Готово | Копирование и поиск по коду |
| `Admonition.svelte` | Готово | 5 типов уведомлений |

export function example(title: string) {
  return `Документация: ${title}`;
}

```ts
export function example(title: string) {
  return `Документация: ${title}`;
}
```

<Katex block>E = mc^2</Katex>

Формула массы-энергии Эйнштейна <Katex>E = mc^2</Katex> показывает эквивалентность массы и энергии.

<Katex block>a^2 + b^2 = c^2</Katex>

<Katex block>x^2 + y^2 = r^2</Katex>

<Katex block>x_n = n^2</Katex>

:::chart
[title]Рост подписчиков
[type]line

| Месяц | Instagram | Telegram | YouTube |
|-------|-----------|----------|---------|
| Янв   | 2100      | 1400     | 900     |
| Июн   | 4200      | 2800     | 2000    |
:::

:::chart
[title]Продажи по кварталам
[type]bar

| Квартал | Продукт А | Продукт Б |
|---------|-----------|-----------|
| Q1      | 4200      | 3100      |
| Q4      | 7100      | 6200      |
:::

:::chart
[title]Выручка и прибыль
[type]composed

| Месяц | Выручка | Прибыль |
|-------|---------|---------|
| Янв   | 8200    | 1400    |
| Июн   | 12400   | 2900    |
:::

:::chart
[title]Корреляция цена / рейтинг
[type]scatter

| Товар   | Цена | Рейтинг |
|---------|------|---------|
| Товар А | 120  | 4.2     |
| Товар Г | 560  | 4.9     |
:::

:::chart
[title]Источники трафика
[type]pie

| Источник     | Доля |
|--------------|------|
| Органический | 42   |
| Реклама      | 28   |
:::

:::chart
[title]Распределение бюджета
[type]ring

| Статья     | Сумма |
|------------|-------|
| Разработка | 45    |
| Маркетинг  | 25    |
:::

:::chart
[title]Оценка компетенций
[type]radar

| Навык        | Разработчик | Дизайнер |
|--------------|-------------|----------|
| Технический  | 9           | 5        |
| Творчество   | 6           | 9        |
:::