Markdown / Contenu Rich Text

Comment fonctionne Markdown

Intlayer prend en charge le contenu rich text défini à l'aide de la syntaxe Markdown. Cela est réalisé grâce à la fonction md, qui convertit une chaîne Markdown en un format pouvant être géré par Intlayer. En utilisant Markdown, vous pouvez facilement rédiger et maintenir du contenu avec un formatage riche, tel que des blogs, des articles, et plus encore.

L'éditeur visuel Intlayer et le CMS Intlayer prennent tous deux en charge la gestion de contenu Markdown.

Lorsqu'il est intégré à une application React, vous pouvez utiliser un fournisseur de rendu Markdown (tel que markdown-to-jsx) pour rendre le contenu Markdown en HTML. Cela vous permet d'écrire du contenu en Markdown tout en garantissant qu'il s'affiche correctement dans votre application.

Configuration du contenu Markdown

Pour configurer le contenu Markdown dans votre projet Intlayer, définissez un dictionnaire de contenu qui utilise la fonction md.

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

Importer un fichier .md (multilingue)

// Cette déclaration permet à TypeScript de reconnaître et d'importer des fichiers Markdown (.md) en tant que modules.// Sans cela, TypeScript renverrait une erreur lors de l'importation de fichiers Markdown,// car il ne prend pas en charge nativement les importations de fichiers non codés.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({      fr: md(markdown_fr),      en: md(markdown_en),      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;

Utiliser Markdown avec React Intlayer

Pour rendre le contenu Markdown dans une application React, vous pouvez utiliser le hook useIntlayer du package react-intlayer avec un fournisseur de rendu Markdown. Dans cet exemple, nous utilisons le package markdown-to-jsx pour convertir le Markdown en 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>);

Dans cette implémentation :

• Le MarkdownProvider enveloppe l'application (ou la partie concernée) et accepte une fonction renderMarkdown. Cette fonction est utilisée pour convertir des chaînes Markdown en JSX à l'aide du package markdown-to-jsx.
• Le hook useIntlayer est utilisé pour récupérer le contenu Markdown (myMarkdownContent) du dictionnaire avec la clé "app".
• Le contenu Markdown est rendu directement dans le composant, et le rendu Markdown est géré par le fournisseur.

Utilisation de Markdown avec Next Intlayer

L'implémentation utilisant le package next-intlayer est similaire à celle ci-dessus. La seule différence est que la fonction renderMarkdown doit être passée au composant MarkdownProvider dans un composant client.

"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>);

Ressources supplémentaires

• Documentation CLI Intlayer
• Documentation React Intlayer
• Documentation Next Intlayer
• markdown-to-jsx sur npm

Ces ressources fournissent des informations supplémentaires sur la configuration et l'utilisation d'Intlayer avec divers types de contenu et frameworks.