Что такое mdsvex?

mdsvex — это препроцессор для Svelte, который позволяет использовать Markdown файлы в качестве полноценных Svelte-компонентов. Он объединяет простоту написания текстов в формате Markdown с реактивной мощью Svelte.

Благодаря этому вы можете:

Использовать стандартный синтаксис Markdown (#, **, *, [] и т.д.).
Импортировать и встраивать интерактивные Svelte-компоненты прямо внутрь текста.
Использовать YAML frontmatter для определения метаданных (заголовки, авторы, теги), которые автоматически передаются в ваш макет (layout).

Демонстрация интерактивного компонента

Ниже встроен обычный Svelte-компонент, написанный на Svelte 5 с использованием новых рун ($state, $derived):

Интерактивный Svelte компонент

Удвоенное значение: 0

Начните кликать!

Вы можете нажимать на кнопки, состояние будет обновляться реактивно в реальном времени.

Форматирование Markdown

Мы настроили интеграцию с @tailwindcss/typography, поэтому все элементы Markdown выглядят аккуратно и красиво. Вот примеры оформления:

Списки дел

Установить mdsvex
Добавить препроцессор в vite.config.ts
Создать глобальный макет MarkdownLayout.svelte
Реализовать интерактивную страницу +page.md

Блок цитаты (Blockquote)

“Svelte делает веб-разработку снова весёлой, а mdsvex добавляет к этому непревзойденный опыт написания документации и контента.”

Фрагменты кода с подсветкой

Ниже приведен пример конфигурации vite.config.ts для включения mdsvex:

import { mdsvex } from 'mdsvex';
import { sveltekit } from '@sveltejs/kit/vite';
import { defineConfig } from 'vite';

export default defineConfig({
	plugins: [
		sveltekit({
			preprocess: [
				mdsvex({
					extensions: ['.svx', '.md'],
					layout: './src/lib/components/MarkdownLayout.svelte'
				})
			],
			extensions: ['.svelte', '.svx', '.md']
		})
	]
});

Заключение

Использование mdsvex идеально подходит для блогов, документации, контентных страниц и портфолио. Вы получаете лучшее из обоих миров: простоту Markdown для форматирования текста и интерактивность Svelte для сложной логики.

Использование Markdown в SvelteKit с mdsvex