Markdown

MDX

В Nextra все файлы с расширением .mdx, расположенные в директории pages/, отрисовываются на странице сайта при помощи MDX (opens in a new tab).

MDX - это комбинация языка разметки Мarkdown и JSX. Продвинутый Мarkdown-формат, поддерживающий React-компоненты. Например, командой import он позволяет применять React-компоненты внутри Markdown-файлов:

Markdown

## Hello MDX
 
import { useState } from 'react'
 
export function Counter({ children }) {
  const [count, setCount] = useState(0)
  return (
    <button onClick={() => setCount(count + 1)}>
      {children}
      {count}
    </button>
  )
}
 
<Counter>**Clicks**: </Counter>

Этот код сгенерирует на странице:

При этом кроме базового функционала MDX в Nextra также поддерживаются некоторые продвинутые возможности Markdown. Они реализованы встроенным функционалом, о котором вы можете узнать в разделе "Компоненты".

GitHub Flavored Markdown

GFM (opens in a new tab) - это расширение Markdown, разработанное популярным сервисом Github. GFM позволяет использовать зачеркнутый текст, списки задач, таблицы и многое другое.

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

~~пример зачеркнутого текста~~

Markdown

~~пример зачеркнутого текста~~

Список задач

Написать пресс-релиз
Обновить сайт
Купить продукты

Markdown

- [x] Написать пресс-релиз
- [ ] Обновить сайт
- [ ] Купить продукты

Таблицы

Syntax	Description	Test Text
Header	Title	Here's this
Paragraph	Text	And more
Strikethrough		~~Text~~

Markdown

| Syntax        | Description |   Test Text |
| :------------ | :---------: | ----------: |
| Header        |    Title    | Here's this |
| Paragraph     |    Text     |    And more |
| Strikethrough |             |    ~~Text~~ |

Оформление ссылок

Вот для примера ссылка на сайт: https://nextjs.org (opens in a new tab).

Вот для примера ссылка на сайт: https://nextjs.org.

Идентификатор заголовка (Id)

Вы можете назначить заголовку пользовательский идентификатор (Id) в формате ## My heading [#custom-id]. Например:

Markdown

## Long heading about Nextra [#about-nextra]

В этом примере, #about-nextra будет использоваться в качестве короткой ссылки на заголовок, заменяя тем самым длинное название #long-heading-about-nextra.

Подсветка синтаксиса

Подробности рассмотрены в соответствующем разделе:

Подсветка синтаксиса

Файловая структура Подсветка