import { md, type Dictionary } from "intlayer";const markdownDictionary = {  key: "app",  content: {    myMarkdownContent: md("## Tiêu đề của tôi \n\nLorem Ipsum"),  },} satisfies Dictionary;export default markdownDictionary;

import { md, file, t } from "intlayer";export default {  key: "app",  content: {    content: t({      en: md(file("./myMarkdown.en.md")),      vi: md(file("./myMarkdown.vi.md")),    }),  },};

export default {  key: "app",  contentAutoTransformation: true, // Bật phát hiện tự động nội dung Markdown - Có thể được đặt toàn cục trong intlayer.config.ts  content: {    myMarkdownContent: "## Tiêu đề của tôi \n\nLorem Ipsum",  },};

import { useIntlayer } from "next-intlayer";import { MarkdownProvider } from "next-intlayer/markdown";const AppContent = () => {  const { myMarkdownContent } = useIntlayer("app");  return <div>{myMarkdownContent}</div>;};const App = () => (  <MarkdownProvider    components={{      h1: ({ children }) => <h1 style={{ color: "red" }}>{children}</h1>,      MyButton: (props) => <button {...props} />, // Component MDX    }}  >    <AppContent />  </MarkdownProvider>);

{myMarkdownContent.use({  h1: ({ children }) => <h1 style={{ color: "red" }}>{children}</h1>,})}

{myMarkdownContent.value}{String(myMarkdownContent)}{myMarkdownContent.toString()}

{myMarkdownContent.metadata}{myMarkdownContent.metadata.title}

<script setup>import { useIntlayer } from "vue-intlayer";const { myMarkdownContent } = useIntlayer("app");</script><template>  <component :is="myMarkdownContent" /></template>

import { intlayerMarkdown } from "vue-intlayer/markdown";app.use(intlayerMarkdown, {  components: {    h1: (props) => h('h1', { style: { color: 'green' } }, props.children),    MyButton: (props) => h('button', props), // Component MDX  },});

<component :is="myMarkdownContent.use({  h1: (props) => h('h1', { style: { color: 'red' } }, props.children),})" />

{{ myMarkdownContent.value }}{{ String(myMarkdownContent) }}{{ myMarkdownContent.toString() }}

<component :is="myMarkdownContent.metadata" /><component :is="myMarkdownContent.metadata.title" />

<script lang="ts">import { useIntlayer } from "svelte-intlayer";import { MarkdownProvider } from "svelte-intlayer/markdown";import MyHeading from "./MyHeading.svelte";const content = useIntlayer("app");</script><MarkdownProvider components={{ h1: MyHeading }}>  {@html $content.myMarkdownContent}</MarkdownProvider>

{@html $content.myMarkdownContent.use({ ... })}

{$content.myMarkdownContent.value}{String($content.myMarkdownContent)}{$content.myMarkdownContent.toString()}

{$content.myMarkdownContent.metadata}{$content.myMarkdownContent.metadata.title}

import { useIntlayer } from "preact-intlayer";import { MarkdownProvider } from "preact-intlayer/markdown";const AppContent = () => {  const { myMarkdownContent } = useIntlayer("app");  return <div>{myMarkdownContent}</div>;};const App = () => (  <MarkdownProvider    components={{      h1: ({ children }) => <h1 style={{ color: "red" }}>{children}</h1>,      MyButton: (props) => <button {...props} />, // Component MDX    }}  >    <AppContent />  </MarkdownProvider>);

{myMarkdownContent.use({  h1: ({ children }) => <h1 style={{ color: "red" }}>{children}</h1>,})}

{myMarkdownContent.value}{String(myMarkdownContent)}{myMarkdownContent.toString()}

{myMarkdownContent.metadata}{myMarkdownContent.metadata.title}

import { useIntlayer } from "solid-intlayer";import { MarkdownProvider } from "solid-intlayer/markdown";const AppContent = () => {  const { myMarkdownContent } = useIntlayer("app");  return <div>{myMarkdownContent}</div>;};const App = () => (  <MarkdownProvider    components={{      h1: (props) => <h1 style={{ color: "red" }}>{props.children}</h1>,      MyButton: (props) => <button {...props} />, // Component MDX    }}  >    <AppContent />  </MarkdownProvider>);

{myMarkdownContent.use({  h1: (props) => <h1 style={{ color: "red" }}>{props.children}</h1>,})}

{myMarkdownContent.value}{String(myMarkdownContent)}{myMarkdownContent.toString()}

{myMarkdownContent.metadata}{myMarkdownContent.metadata.title}

import { Component } from "@angular/core";import { useIntlayer } from "angular-intlayer";@Component({  selector: "app-root",  template: `<div [innerHTML]="content().myMarkdownContent"></div>`,})export class AppComponent {  content = useIntlayer("app");}

content().myMarkdownContent.use({  h1: { class: "text-3xl font-bold" },})

content().myMarkdownContent.valueString(content().myMarkdownContent)content().myMarkdownContent.toString()

content().myMarkdownContent.metadatacontent().myMarkdownContent.metadata.title

import { MarkdownRenderer } from "next-intlayer/markdown";<MarkdownRenderer forceBlock={true} tagfilter={true}>  {"# Tiêu đề của tôi"}</MarkdownRenderer>

import { useMarkdownRenderer } from "next-intlayer/markdown";const renderMarkdown = useMarkdownRenderer({  forceBlock: true,  components: { h1: (props) => <h1 {...props} className="custom" /> }});return renderMarkdown("# Tiêu đề của tôi");

import { renderMarkdown } from "next-intlayer/markdown";const jsx = renderMarkdown("# Tiêu đề của tôi", { forceBlock: true });

<script setup>import { MarkdownRenderer } from "vue-intlayer/markdown";</script><template>  <MarkdownRenderer :forceBlock="true" content="# Tiêu đề của tôi" /></template>

<script lang="ts">import { MarkdownRenderer } from "svelte-intlayer/markdown";</script><MarkdownRenderer forceBlock={true} value="# Tiêu đề của tôi" />

<script lang="ts">import { useMarkdownRenderer } from "svelte-intlayer/markdown";const render = useMarkdownRenderer();</script>{@html render("# Tiêu đề của tôi")}

<script lang="ts">import { renderMarkdown } from "svelte-intlayer/markdown";</script>{@html renderMarkdown("# Tiêu đề của tôi")}

import { MarkdownRenderer } from "preact-intlayer/markdown";<MarkdownRenderer forceBlock={true}>  {"# Tiêu đề của tôi"}</MarkdownRenderer>

import { useMarkdownRenderer } from "preact-intlayer/markdown";const render = useMarkdownRenderer();return <div>{render("# Tiêu đề của tôi")}</div>;

import { renderMarkdown } from "preact-intlayer/markdown";return <div>{renderMarkdown("# Tiêu đề của tôi")}</div>;

import { MarkdownRenderer } from "solid-intlayer/markdown";<MarkdownRenderer forceBlock={true}>  {"# Tiêu đề của tôi"}</MarkdownRenderer>

import { useMarkdownRenderer } from "solid-intlayer/markdown";const render = useMarkdownRenderer();return <div>{render("# Tiêu đề của tôi")}</div>;

import { renderMarkdown } from "solid-intlayer/markdown";return <div>{renderMarkdown("# Tiêu đề của tôi")}</div>;

import { IntlayerMarkdownService } from "angular-intlayer/markdown";export class MyComponent {  constructor(private markdownService: IntlayerMarkdownService) {}  renderMarkdown(markdown: string) {    return this.markdownService.renderMarkdown(markdown);  }}

import { MarkdownProvider } from "next-intlayer/markdown";export const AppProvider = ({ children }) => (  <MarkdownProvider    components={{      h1: (props) => <h1 style={{color: 'green'}} {...props} />,      a: ({ href, ...props }) => <a style={{color: 'red'}} {...props} />,      MyCustomJSXComponent: (props) => <span style={{color: 'red'}} {...props} />,    }}  >    {children}  </MarkdownProvider>);

import { MarkdownProvider } from "next-intlayer/markdown";export const AppProvider = ({ children }) => (  <MarkdownProvider    renderMarkdown={async (md) => {      // Use dynamic import to reduce the bundle size of your application      const { renderMarkdown } = await import('next-intlayer/markdown');      return renderMarkdown(md);    }}  >    {children}  </MarkdownProvider>);

import { createApp } from "vue";import { intlayer } from "vue-intlayer";import { intlayerMarkdown } from "vue-intlayer/markdown";import App from "./App.vue";const app = createApp(App);app.use(intlayer);app.use(intlayerMarkdown, {  components: {    h1: (props) =>    h('h1', { style: { color: 'orange' }, ...props }, props.children),    ComponentDemo: () => h('div', { style: { background: 'grey' } }, 'DEMO'),    bold: (props) => h('strong', props),    code: (props) => h('code', props),  },});app.mount("#app");

import { createApp } from "vue";import { intlayer } from "vue-intlayer";import { intlayerMarkdown } from "vue-intlayer/markdown";import App from "./App.vue";const app = createApp(App);app.use(intlayer);app.use(intlayerMarkdown, {  renderMarkdown: async (md) => {    const { renderMarkdown } = await import('vue-intlayer/markdown');    return renderMarkdown(md);  },});app.mount("#app");

<script lang="ts">  import { MarkdownProvider } from "svelte-intlayer/markdown";  import MyHeading from "./MyHeading.svelte";</script><MarkdownProvider  components={{    h1: MyHeading,  }}>  <slot /></MarkdownProvider>

<script lang="ts">  import { MarkdownProvider } from "svelte-intlayer/markdown";</script><MarkdownProvider  renderMarkdown={async (md) => {    const { renderMarkdown } = await import('svelte-intlayer/markdown');    return renderMarkdown(md);  }}>  <slot /></MarkdownProvider>

import { MarkdownProvider } from "preact-intlayer/markdown";export const AppProvider = ({ children }) => (  <MarkdownProvider    components={{      h1: ({ children }) => <h1 className="text-2xl font-bold">{children}</h1>,    }}  >    {children}  </MarkdownProvider>);

import { MarkdownProvider } from "preact-intlayer/markdown";export const AppProvider = ({ children }) => (  <MarkdownProvider    renderMarkdown={async (md) => {      const { renderMarkdown } = await import('preact-intlayer/markdown');      return renderMarkdown(md);    }}  >    {children}  </MarkdownProvider>);

import { MarkdownProvider } from "solid-intlayer/markdown";export const AppProvider = (props) => (  <MarkdownProvider    components={{      h1: (props) => <h1 className="text-2xl font-bold">{props.children}</h1>,    }}  >    {props.children}  </MarkdownProvider>);

import { MarkdownProvider } from "solid-intlayer/markdown";export const AppProvider = (props) => (  <MarkdownProvider    renderMarkdown={async (md) => {      const { renderMarkdown } = await import('solid-intlayer/markdown');      return renderMarkdown(md);    }}  >    {props.children}  </MarkdownProvider>);

import { NgModule } from '@angular/core';import { IntlayerMarkdownModule } from 'angular-intlayer/markdown';@NgModule({  imports: [    IntlayerMarkdownModule.forRoot({      renderMarkdown: async (md) => {        const { renderMarkdown } = await import('angular-intlayer/markdown');        return renderMarkdown(md);      }    })  ]})export class AppModule {}

import { useIntlayer } from "react-intlayer";import { Suspense } from "react";const MyComponent = () => {const markdownContent = useIntlayer("my-markdown");return (  <Suspense fallback={<div>Loading...</div>}>{markdownContent}</Suspense>);};

<script setup>import { useIntlayer } from "vue-intlayer";const { markdownContent } = useIntlayer("my-markdown");</script><template><Suspense>  <component :is="markdownContent" />  <template #fallback>    <div>Loading...</div>  </template></Suspense></template>

<script lang="ts">import { useIntlayer } from "svelte-intlayer";const content = useIntlayer("my-markdown");</script>{#await $content.markdownContent}<div>Loading...</div>{:then rendered}{@html rendered}{/await}

import { useIntlayer } from "preact-intlayer";import { Suspense } from "preact/compat";const MyComponent = () => {const markdownContent = useIntlayer("my-markdown");return (  <Suspense fallback={<div>Loading...</div>}>{markdownContent}</Suspense>);};

import { useIntlayer } from "solid-intlayer";import { Suspense } from "solid-js";const MyComponent = () => {const { markdownContent } = useIntlayer("my-markdown");return (  <Suspense fallback={<div>Loading...</div>}>{markdownContent}</Suspense>);};

import { Component } from "@angular/core";import { useIntlayer } from "angular-intlayer";@Component({selector: "app-my",template: `  @defer {    <div [innerHTML]="content().markdownContent"></div>  } @loading {    <div>Loading...</div>  }`,})export class MyComponent {content = useIntlayer("my-markdown");}

import { parseMarkdown } from "next-intlayer/markdown";import { MarkdownRenderer } from "next-intlayer/markdown";export default async function Page() {  // 1. Phân tích cú pháp markdown thành AST có thể tuần tự hóa trên server  const markdownString = "## My title \n\nLorem Ipsum";  const ast = parseMarkdown(markdownString);  // 2. Hiển thị trực tiếp AST  // Trong một Server Component, hoạt động này diễn ra liền mạch và chuyển AST// trực tiếp đến các client component bên dưới nếu cần.  return <MarkdownRenderer content={ast} />;}

<script setup lang="ts">import { parseMarkdown } from "vue-intlayer/markdown";import { MarkdownRenderer } from "vue-intlayer/markdown";// 1. Lấy và phân tích cú pháp markdown thành AST trên serverconst { data: ast } = await useAsyncData('markdown', () => {  const markdownString = "## My title \n\nLorem Ipsum";  return parseMarkdown(markdownString);});</script><template>  <!-- 2. Trên client: Hiển thị trực tiếp AST mà không cần phân tích cú pháp lại -->  <MarkdownRenderer :content="ast" /></template>

import { parseMarkdown } from "svelte-intlayer/markdown";// 1. Trên server: Phân tích cú pháp markdown thành AST có thể tuần tự hóaexport const load = async () => {  const markdownString = "## My title \n\nLorem Ipsum";  const ast = parseMarkdown(markdownString);  // Trả về AST cho client  return { content: ast };};

<script lang="ts">  import { MarkdownRenderer } from "svelte-intlayer/markdown";  export let data;</script><!-- 2. Trên client: Hiển thị trực tiếp AST mà không cần phân tích cú pháp lại --><MarkdownRenderer value={data.content} />

import { Injectable } from "@angular/core";import { Resolve } from "@angular/router";import { parseMarkdown, type ParsedMarkdown } from "angular-intlayer/markdown";@Injectable({ providedIn: "root" })export class MarkdownResolver implements Resolve<ParsedMarkdown> {  resolve(): ParsedMarkdown {    const markdownString = "## My title \n\nLorem Ipsum";    // 1. Trên server: Phân tích cú pháp markdown thành AST có thể tuần tự hóa    return parseMarkdown(markdownString);  }}

import { Component } from "@angular/core";import { ActivatedRoute } from "@angular/router";import { IntlayerMarkdownService, type ParsedMarkdown } from "angular-intlayer/markdown";@Component({  selector: "app-root",  template: `<div [innerHTML]="renderedMarkdown"></div>`,})export class AppComponent {  renderedMarkdown: string = "";  constructor(    private route: ActivatedRoute,    private markdownService: IntlayerMarkdownService  ) {    // 2. Trên client: Hiển thị trực tiếp AST mà không cần phân tích cú pháp lại    this.route.data.subscribe((data) => {      this.renderedMarkdown = this.markdownService.renderMarkdown(        data.markdownAst      ) as string;    });  }}