Markdown et MDX

EmberKit inclut la prise en charge native de Markdown et MDX. Rédigez du contenu en Markdown, rendez-le en composants JSX.

Utilisation de base

import { renderMarkdown } from '@emberkit/core';

const html = renderMarkdown('# Hello\n\nThis is **bold** and *italic*.');

Markdown inline dans les routes

L’approche la plus simple — écrivez du Markdown en littéraux de modèle :

import type { RouteComponent } from '@emberkit/core';
import { renderMarkdown } from '@emberkit/core';

const content = `# My Page

This is a paragraph with **bold** and *italic* text.

## Section

- Item 1
- Item 2
- Item 3
`;

const MyPage: RouteComponent = () => {
  const html = renderMarkdown(content);
  return <div dangerouslySetInnerHTML={{ __html: html }} />;
};

Fichiers Markdown natifs

Placez des fichiers .md dans src/routes/ : ils deviennent des routes automatiquement. Le plugin Vite les enveloppe en composants :

---
title: My Page
description: A page written in Markdown
---

# Hello World

This is a **Markdown** file that becomes a route.

- No TSX needed
- Auto-wrapped into a component
- Frontmatter exports available as named exports

Frontmatter

Extrayez les métadonnées du Markdown :

import { extractFrontmatter } from '@emberkit/core';

const result = extractFrontmatter(`---
title: My Post
date: 2025-01-15
tags: [emberkit, tutorial]
---

# Content here
`);

console.log(result.data); // { title: 'My Post', date: '2025-01-15', tags: [...] }

Fonctionnalités Markdown

Fonctionnalités prises en charge

Fonctionnalité	Syntaxe	Statut
GFM	`strikethrough`, `==highlight==`	Pris en charge
Tableaux	Tableaux à pipes	Pris en charge
Listes de tâches	`- [x] Done`	Pris en charge
Blocs de code	Délimités avec langage	Pris en charge
Code inline	Backticks	Pris en charge
Liens	`[text](url)`	Pris en charge
Images	`![alt](src)`	Pris en charge
Citations	`> quote`	Pris en charge
Notes de bas de page	`[^1]`	Pris en charge
Listes de définition	`term: definition`	Pris en charge

Compilateur MDX

Pour des cas plus complexes, utilisez le compilateur MDX. Les fichiers MDX prennent en charge tout Markdown plus JSX :

import { compileMDX } from '@emberkit/core';

const component = await compileMDX(`
# Title

Some content with **markup**.

- [x] Task 1
- [ ] Task 2

| Column 1 | Column 2 |
|----------|----------|
| Cell 1   | Cell 2   |
`);

// component is a function that returns JSX
const element = component({});

Compilation synchrone

import { compileSync, useMDX } from '@emberkit/core';

const component = compileSync('# Hello World');
// or
const component = useMDX('# Hello World');

Composants personnalisés

Remplacez le rendu des éléments Markdown :

import { renderMarkdown } from '@emberkit/core';

const html = renderMarkdown(content, {
  components: {
    h1: 'h2',    // Render h1 as h2
    table: 'div', // Wrap tables in div
  },
});

Temps de lecture

import { getReadingTime } from '@emberkit/core';

const minutes = getReadingTime(content); // ~200 WPM

Nombre de mots

import { getWordCount, getCharacterCount } from '@emberkit/core';

const words = getWordCount(content);
const chars = getCharacterCount(content, false); // excluding spaces

Étapes suivantes

Composants - Rendu de composants
SEO et meta - Balises meta depuis le frontmatter
Routage - Contenu au niveau des routes