Перейти к основному содержимому

Возможности оформления контента в Docusaurus

Базовый Markdown​

Текстовое форматирование​

**Жирный текст**
*Курсив*
***Жирный курсив***
~~Зачеркнутый текст~~
`Строчный код`

Заголовки​

# H1 заголовок
## H2 заголовок
### H3 заголовок
#### H4 заголовок
##### H5 заголовок
###### H6 заголовок

Списки​

- Маркированный список
  - Вложенный пункт
    - Глубже вложенный пункт

1. Нумерованный список
2. Второй пункт
   1. Вложенный нумерованный
   2. Второй вложенный

Таблицы​

| Заголовок 1 | Заголовок 2 |
|-------------|-------------|
| Ячейка 1    | Ячейка 2    |
| Ячейка 3    | Ячейка 4    |

Расширенные возможности MDX​

Адмонишены (Admonitions)

:::note[Заметка]
Это обычная заметка
:::

:::tip[Совет]
Это полезный совет
:::

:::info[Информация]
Информационное сообщение
:::

:::warning[Предупреждение]
Это предупреждение
:::

:::danger[Опасность]
Это сообщение об опасности
:::

Code Blocks​

```jsx title="src/components/Hello.js" {1,4-6,11}
import React from 'react';

function Hello() {
  return (
    <div>Hello World!</div>
  );
}
```

Специальные компоненты​

Details компонент​

<details>
  <summary>Нажмите, чтобы развернуть</summary>
  Здесь содержится скрытый контент
</details>

React компоненты​

export const Highlight = ({children, color}) => (
  <span
    style={{
      backgroundColor: color,
      borderRadius: '2px',
      color: '#fff',
      padding: '0.2rem',
    }}>
    {children}
  </span>
);

<Highlight color="#25c2a0">Выделенный текст</Highlight>

Интерактивные элементы​

CodePen Embed​

<iframe 
  height="400" 
  style={{width: '100%'}} 
  scrolling="no" 
  title="Название примера" 
  src="https://codepen.io/your-username/embed/example"
  frameborder="no" 
  loading="lazy"
>
</iframe>

YouTube Embed​

<iframe
  width="100%"
  height="315"
  src="https://www.youtube.com/embed/video-id"
  frameBorder="0"
  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
  allowFullScreen
/>

Математические формулы (с KaTeX)​

$$
f(x) = \int_{-\infty}^{\infty} \hat{f}(\xi) e^{2 \pi i \xi x} d\xi
$$

Инлайн формула: $E = mc^2$

Диаграммы (с Mermaid)​

Дополнительные возможности​

Сноски​

Здесь основной текст[^1].

[^1]: А здесь текст сноски.

Определения​

термин
: определение

Выделение текста​

==выделенный текст==

Emoji​

:smile: :heart: :thumbsup:

Цитаты​

> Это цитата
>> Это вложенная цитата

Настройка стилей​

CSS Modules​

styles.module.css
.custom {
  color: var(--ifm-color-primary);
  padding: 1rem;
}
import styles from './styles.module.css';

<div className={styles.custom}>
  Стилизованный контент
</div>

Tailwind CSS​

Если настроен Tailwind:

<div className="bg-blue-500 text-white p-4 rounded-lg">
  Стилизованный контент с Tailwind
</div>