Справка по MDX

Нет времени читать всю статью? Резюмировать

MDX — это формат документов, основанный на популярном Markdown и расширенный возможностями JSX (JavaScript eXpressions), вроде возможности использовать JavaScript выражения и импортировать компоненты.

Markdown (MD)

Весь стандартный синтаксис MD поддерживается MDX.

# Заголовок 1

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

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

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

Обычный, **полужирный**, и _курсив_.

Обычный, полужирный, и курсив.

[Внутренняя ссылка](/articles)
[Внешняя ссылка](https://discord.gg/yrJqvCqU3w)

Внутренняя ссылка

Внешняя ссылка

![Изображение](/images/decoration/logo-small.webp)

- Маркированный список
  1. Элемент второго уровня
- Маркированный список

1. Нумерованный список
1. Нумерованный список
   - Элемент второго уровня

• Маркированный список
  1. Элемент второго уровня
• Маркированный список

1. Нумерованный список
2. Нумерованный список
   • Элемент второго уровня

> Ipsum tempor eirmod et dolore ipsum invidunt duo. Tempor gubergren sanctus et sit at eirmod.

горизонтальная линия: ---

Ipsum tempor eirmod et dolore ipsum invidunt duo. Tempor gubergren sanctus et sit at eirmod.

---

GitHub Flavored Markdown (GFM)

Дополнение к Markdown, добавляющее форматирование с GitHub. Не все возможности GFM поддерживаются MDX.

Frontmatter

Во frontmatter содержаться метаданные страницы. Он указывается в самом начале содержимого файла в формате YAML и выделяяеся с двух сторон ---. Для различных документов frontmatter может быть разным в зависимости от требуемых метаданных. В Astro при использовании Content Collections формат каждой коллекции задаётся в src/content/config.ts. Frontmatter этой страницы:

---
title: Справка по MDX
description: В этом руководстве вы узнаете об основах формата MDX, дополнительном синтаксисе и компонентах.
date: 'Jan 13 2023'
cover: '~assets/covers/FsO602AXsAIqBzR.png'
author: Алекс «Phenomen» Василенко
---

Таблицы

| a                | b                |                 c |      d      |
| ---------------- | :--------------- | ----------------: | :---------: |
| по умолчанию     | по левому краю   |   по правому краю |  по центру  |
| **по умолчанию** | _по левому краю_ | ~по правому краю~ | `по центру` |

a	b	c	d
по умолчанию	по левому краю	по правому краю	по центру
по умолчанию	по левому краю	по правому краю	по центру

Автоматические ссылки

www.example.com, https://example.com, и contact@example.com.

www.example.com, https://example.com, и contact@example.com.

Сноски

Чертополох[^1] и крыжовник[^2].

[^1]: Описание чертополоха.
[^2]: Описание крыжовника.

Чертополох¹ и крыжовник².

Зачеркивание

~одна~ тильда.

одна тильда.

JavaScript Expressions (JSX)

Любые JavaScript выражения можно добавлять внутри фигурных скобок { ... }. Не рекомендуется использовать динамические или случайные функции, т.к. во время сборки сайта всё преобразуется в статичные страницы.

Pi равно { Math.PI },
а два 2 + 2 { 2 + 2 === 5 ? "равно" : "не равно" } 5,
хотя на d20 выпало { Math.floor(Math.random() \* 20) }

{
	/* комментарий, не отображаемый на странице */
}

import Creature from '~components/Creature.astro';

<Creature id="goblin" />

Phenomenal Markdown (PMD)

Расширеное форматирование, созданное для этого сайта.

Подсветка

В GFM этот синтаксис обрамляет текст обратными кавычками с двух сторон, чтобы выделить код или переменные. Вместо этого в PMD текст подсвечивается особым фоном, если нужно указать на что-то очень важное.

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

Блок

Обособленные блоки для заметного выделения секций текста (в дизайне их называют aside или callout). Это могут быть заметки и предупреждения. Есть четыре варианта блоков, которые можно указывать через свойство v: ivory, gold, wave, crimson. Если не указывать ничего, то будет использован вариант ivory.

<Aside v="ivory|gold|wave|crimson">

Текст внутри блока также _поддерживает_ **Markdown**.

</Aside>

Ссылка

<Link id="translations/slyflourish" />

<Link id="translations/slyflourish" title="Свой заголовок для ссылки" />

Видео

<Youtube href="https://www.youtube.com/embed/ilwKsgFolGA" title="Обзор Tales of Valiant" />

Стих

Компонент стиха выравнивает текст по центру и делает его курсивом.

<Verse>

#### Слово

Молчат гробницы, мумии и кости, —  
Лишь слову жизнь дана:  
Из древней тьмы, на мировом погосте,  
Звучат лишь Письмена.

И нет у нас иного достоянья!  
Умейте же беречь  
Хоть в меру сил, в дни злобы и страданья,  
Наш дар бессмертный — речь.

</Verse>

Примечания

1. Описание чертополоха. ↩

2. Описание крыжовника. ↩

---

Если вам понравилась эта статья или у вас есть комментарии, присоединяйтесь к дискуссии в канале Telegram или сервере в Discord.