Como o Markdown Funciona

O Intlayer suporta conteúdo de texto rico definido usando a sintaxe Markdown. Isso é alcançado através da função md, que converte uma string Markdown em um formato que pode ser gerenciado pelo Intlayer. Usando Markdown, você pode escrever e manter facilmente conteúdos com formatação rica, como blogs, artigos e muito mais.

O editor visual do Intlayer e o CMS do Intlayer suportam o gerenciamento de conteúdo em Markdown.

Quando integrado a uma aplicação React, você pode usar um provedor de renderização Markdown (como markdown-to-jsx) para renderizar o conteúdo Markdown em HTML. Isso permite que você escreva conteúdo em Markdown enquanto garante que ele seja exibido corretamente no seu aplicativo.

Configurando Conteúdo Markdown

Para configurar conteúdo Markdown no seu projeto Intlayer, defina um dicionário de conteúdo que utilize a função md.

import { md, type Dictionary } from "intlayer";const markdownDictionary = {  key: "app",  content: {    myMarkdownContent: md("## Meu título \n\nLorem Ipsum"),  },} satisfies Dictionary;export default markdownDictionary;

Importar arquivo .md (multilíngue)

// Esta declaração permite que o TypeScript reconheça e importe arquivos Markdown (.md) como módulos.// Sem isso, o TypeScript lançaria um erro ao tentar importar arquivos Markdown,// pois ele não suporta nativamente importações de arquivos que não sejam de 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";const markdownDictionary = {  key: "app",  content: {    contentImport: t({      pt: md(markdown_en),      en: md(markdown_en),      fr: md(markdown_fr),      es: md(markdown_es),    }),    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;

Usando Markdown com React Intlayer

Para renderizar o conteúdo Markdown em uma aplicação React, você pode utilizar o hook useIntlayer do pacote react-intlayer junto com um provedor de renderização Markdown. Neste exemplo, usamos o pacote markdown-to-jsx para converter o Markdown em HTML.

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

Nesta implementação:

• O MarkdownProvider envolve a aplicação (ou a parte relevante dela) e aceita uma função renderMarkdown. Esta função é usada para converter strings Markdown em JSX usando o pacote markdown-to-jsx.
• O hook useIntlayer é usado para recuperar o conteúdo Markdown (myMarkdownContent) do dicionário com a chave "app".
• O conteúdo Markdown é renderizado diretamente no componente, e a renderização do Markdown é gerenciada pelo provedor.

Usando Markdown com Next Intlayer

A implementação usando o pacote next-intlayer é semelhante à anterior. A única diferença é que a função renderMarkdown deve ser passada para o componente MarkdownProvider em um 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 Adicionais

• Documentação do Intlayer CLI
• Documentação do React Intlayer
• Documentação do Next Intlayer
• markdown-to-jsx no npm

Esses recursos fornecem mais informações sobre como configurar e usar o Intlayer com vários tipos de conteúdo e frameworks.