Markdown y MDX

EmberKit incluye soporte integrado de Markdown y MDX. Escribe contenido en Markdown y renderízalo como componentes JSX.

Uso básico

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

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

Markdown inline en rutas

El enfoque más simple — escribe Markdown como literales de plantilla:

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 }} />;
};

Archivos Markdown nativos

Coloca archivos .md en src/routes/ y se convierten en rutas automáticamente. El plugin de Vite los envuelve en componentes:

---
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

Extrae metadatos del 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: [...] }

Funciones de Markdown

Funciones compatibles

FunciónSintaxisEstado
GFMstrikethrough, ==highlight==Compatible
TablasTablas con pipesCompatible
Listas de tareas- [x] DoneCompatible
Bloques de códigoCercados con lenguajeCompatible
Código inlineBackticksCompatible
Enlaces[text](url)Compatible
Imágenes![alt](src)Compatible
Citas> quoteCompatible
Notas al pie[^1]Compatible
Listas de definiciónterm: definitionCompatible

Compilador MDX

Para casos más complejos, usa el compilador MDX. Los archivos MDX admiten todas las funciones de Markdown más 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({});

Compilación síncrona

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

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

Componentes personalizados

Sustituye cómo se renderizan los elementos Markdown:

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

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

Tiempo de lectura

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

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

Conteo de palabras

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

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

Siguientes pasos