MDX Demo — Asides и Expressive Code

Эта статья демонстрирует все возможности MDX в блоге: asides (callouts), подсветку кода, terminal frames и автоматический импорт компонентов.

Asides через :::note синтаксис

Компоненты поддерживают GFM-синтаксис container directives (:::note, :::tip, :::caution, :::danger), который автоматически преобразуется в styled-компоненты:

Прямое использование компонентов

Помимо :::-синтаксиса, компоненты доступны напрямую (благодаря astro-auto-import):

Expressive Code

Подсветка синтаксиса работает через Expressive Code с темами для light/dark:

package main

import (
    "context"
    "fmt"
)

func main() {
    ctx := context.Background()
    msg := process(ctx, "hello")
    fmt.Println(msg)
}

func process(ctx context.Context, input string) string {
    return fmt.Sprintf("processed: %s", input)
}

interface User {
    id: string;
    name: string;
}

async function fetchUser(id: string): Promise<User> {
    const res = await fetch(`/api/users/${id}`);
    if (!res.ok) throw new Error(`HTTP ${res.status}`);
    return res.json();
}

Terminal frames

Блоки кода с shell-командами получают terminal frame:

# Сборка проекта
npm run build

# Деплой на S3 + CDN
yc storage s3api put-object \
    --bucket blog.nikonov-dev.online \
    --key index.html \
    --body dist/index.html \
    --content-type "text/html; charset=utf-8"

git add -A && git commit -m "feat(blog): add MDX asides"
git push origin main

Copy button

Наведите курсор на любой блок кода — появится кнопка копирования.

Что дальше

Аside-компоненты теперь доступны во всех .mdx-файлах без явного импорта.