Markdown / Rich Text Content

How Markdown Works

Intlayer supports rich text content defined using Markdown syntax. This is achieved through the md function, which converts a Markdown string into a format that can be managed by Intlayer. By using Markdown, you can easily write and maintain content with rich formatting, such as blogs, articles, and more.

The Intlayer Visual editor and the Intlayer CMS both support Markdown content management.

When integrated with a React application, you can use a Markdown rendering provider (such as markdown-to-jsx) to render the Markdown content to HTML. This allows you to write content in Markdown while ensuring it displays properly in your app.

Setting Up Markdown Content

To set up Markdown content in your Intlayer project, define a content dictionary that utilizes the md function.

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

Import (multilingual) .md file

If your Markdown file is a .md file, you can import it using different import formats provided by JavaScript, or Intlayer.

It is recommended to prioritize importing via the file function, as it allows Intlayer to properly manage paths relative to the file’s location and ensures the integration of this file with the Visual Editor / CMS.

// This declaration allows TypeScript to recognize and import Markdown (.md) files as modules.// Without this, TypeScript would throw an error when trying to import Markdown files,// as it does not natively support non-code file imports.declare module "*.md";

import { md, file, 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: {    contentFileImport: md(file("./myMarkdown.md")),    contentMultilingualFileImport: t({      en: md(file("./myMarkdown.en.md")),      fr: md(file("./myMarkdown.fr.md")),      es: md(file("./myMarkdown.es.md")),    }),    contentImport: md(markdown),    contentRequire: md(require("./myMarkdown.md")),    contentAsyncImport: md(      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;

Using Markdown with React Intlayer

To render the Markdown content in a React application, you can leverage the useIntlayer hook from the react-intlayer package along with a Markdown rendering provider. In this example, we use the markdown-to-jsx package to convert the Markdown into 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>);

In this implementation:

• The MarkdownProvider wraps the application (or the relevant portion of it) and accepts a renderMarkdown function. This function is used to convert Markdown strings into JSX using the markdown-to-jsx package.
• The useIntlayer hook is used to retrieve the Markdown content (myMarkdownContent) from the dictionary with the key "app".
• The Markdown content is rendered directly in the component, and the Markdown rendering is handled by the provider.

Using Markdown with Next Intlayer

The implementation using next-intlayer package is similar to the one above. The only difference is that the renderMarkdown function should be passed to the MarkdownProvider component in a client component.

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

Additional Resources

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

These resources provide further insights into setting up and using Intlayer with various content types and frameworks.