Cómo Funciona Markdown

Intlayer admite contenido de texto enriquecido definido mediante la sintaxis de Markdown. Esto se logra a través de la función md, que convierte una cadena de Markdown en un formato que puede ser gestionado por Intlayer. Al usar Markdown, puedes escribir y mantener contenido con formato enriquecido fácilmente, como blogs, artículos y más.

El editor visual de Intlayer y el CMS de Intlayer admiten la gestión de contenido en Markdown.

Cuando se integra con una aplicación React, puedes usar un proveedor de renderizado de Markdown (como markdown-to-jsx) para renderizar el contenido de Markdown en HTML. Esto te permite escribir contenido en Markdown mientras aseguras que se muestre correctamente en tu aplicación.

Configuración de Contenido Markdown

Para configurar contenido Markdown en tu proyecto de Intlayer, define un diccionario de contenido que utilice la función md.

import { md, type Dictionary } from "intlayer";// Definición del diccionario de contenido con Markdownconst markdownDictionary = {  key: "app",  content: {    myMarkdownContent: md("## Mi título \n\nLorem Ipsum"),  },} satisfies Dictionary;export default markdownDictionary;

Importar archivo .md (multilingüe)

// Esta declaración permite que TypeScript reconozca e importe archivos Markdown (.md) como módulos.// Sin esto, TypeScript lanzaría un error al intentar importar archivos Markdown,// ya que no admite de forma nativa la importación de archivos no relacionados con código.declare module "*.md";

import { md, t, type Dictionary } from "intlayer";import { readFileSync } from "fs";import { resolve } from "path";import markdown_en from "./myMarkdown.en.md";import markdown_fr from "./myMarkdown.fr.md";import markdown_es from "./myMarkdown.es.md";// Diccionario de contenido con soporte multilingüeconst markdownDictionary = {  key: "app",  content: {    contentImport: t({      es: md(markdown_es),      en: md(markdown_en),      fr: md(markdown_fr),    }),    contentRequire: md(require("./myMarkdown.md")),    contentAsyncImport: md(      import("./myMarkdown.md").then((module) => module.default)    ),    contentFetch: md(fetch("https://example.com").then((res) => res.text())),    contentFS: md(() => {      const filePath = resolve(process.cwd(), "doc/test.md");      return readFileSync(filePath, "utf8");    }),  },} satisfies Dictionary;export default markdownDictionary;

Usar Markdown con React Intlayer

Para renderizar el contenido Markdown en una aplicación React, puedes usar el hook useIntlayer del paquete react-intlayer junto con un proveedor de renderizado de Markdown. En este ejemplo, usamos el paquete markdown-to-jsx para convertir el Markdown en HTML.

import type { FC } from "react";import { useIntlayer, MarkdownProvider } from "react-intlayer";import Markdown from "markdown-to-jsx";// Componente principal para renderizar contenido Markdownconst AppContent: FC = () => {  const { myMarkdownContent } = useIntlayer("app");  return <>{myMarkdownContent}</>;};export const AppProvider: FC = () => (  <MarkdownProvider    renderMarkdown={(markdown) => <Markdown>{markdown}</Markdown>}  >    <AppContent />  </MarkdownProvider>);

En esta implementación:

• El MarkdownProvider envuelve la aplicación (o la parte relevante de ella) y acepta una función renderMarkdown. Esta función se utiliza para convertir cadenas de Markdown en JSX utilizando el paquete markdown-to-jsx.
• El hook useIntlayer se utiliza para recuperar el contenido de Markdown (myMarkdownContent) del diccionario con la clave "app".
• El contenido de Markdown se renderiza directamente en el componente, y el renderizado de Markdown es manejado por el proveedor.

Usando Markdown con Next Intlayer

La implementación utilizando el paquete next-intlayer es similar a la anterior. La única diferencia es que la función renderMarkdown debe pasarse al componente MarkdownProvider en un componente cliente.

"use client";import type { FC, PropsWithChildren } from "react";import { MarkdownProvider } from "next-intlayer";const renderMarkdown = (markdown: string) => (  <span style={{ color: "red" }}>{markdown}</span>);export const IntlayerMarkdownProvider: FC<PropsWithChildren> = ({  children,}) => (  <MarkdownProvider renderMarkdown={renderMarkdown}>    {children}  </MarkdownProvider>);

Recursos Adicionales

• Documentación de Intlayer CLI
• Documentación de React Intlayer
• Documentación de Next Intlayer
• markdown-to-jsx en npm

Estos recursos proporcionan información adicional sobre cómo configurar y usar Intlayer con varios tipos de contenido y frameworks.