Markdown / रिच टेक्स्ट सामग्री

import { md, type Dictionary } from "intlayer";

const markdownDictionary = {
key: "app",
content: {
  myMarkdownContent: md("## मेरा शीर्षक \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")),
    hi: md(file("./myMarkdown.hi.md")),
  }),
},
};

export default {
key: "app",
contentAutoTransformation: true, // Markdown सामग्री की स्वचालित पहचान सक्षम करें - intlayer.config.ts में विश्व स्तर पर सेट किया जा सकता है
content: {
  myMarkdownContent: "## मेरा शीर्षक \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} />, // 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), // 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} />, // 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} />, // 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.value
String(content().myMarkdownContent)
content().myMarkdownContent.toString()

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

import { MarkdownRenderer } from "next-intlayer/markdown";

<MarkdownRenderer forceBlock={true} tagfilter={true}>
{"# मेरा शीर्षक"}
</MarkdownRenderer>

import { useMarkdownRenderer } from "next-intlayer/markdown";

const renderMarkdown = useMarkdownRenderer({
forceBlock: true,
components: { h1: (props) => <h1 {...props} className="custom" /> }
});

return renderMarkdown("# मेरा शीर्षक");

import { renderMarkdown } from "next-intlayer/markdown";

const jsx = renderMarkdown("# मेरा शीर्षक", { forceBlock: true });

<script setup>
import { MarkdownRenderer } from "vue-intlayer/markdown";
</script>

<template>
<MarkdownRenderer :forceBlock="true" content="# मेरा शीर्षक" />
</template>

<script lang="ts">
import { MarkdownRenderer } from "svelte-intlayer/markdown";
</script>

<MarkdownRenderer forceBlock={true} value="# मेरा शीर्षक" />

<script lang="ts">
import { useMarkdownRenderer } from "svelte-intlayer/markdown";
const render = useMarkdownRenderer();
</script>

{@html render("# मेरा शीर्षक")}

<script lang="ts">
import { renderMarkdown } from "svelte-intlayer/markdown";
</script>

{@html renderMarkdown("# मेरा शीर्षक")}

import { MarkdownRenderer } from "preact-intlayer/markdown";

<MarkdownRenderer forceBlock={true}>
{"# मेरा शीर्षक"}
</MarkdownRenderer>

import { useMarkdownRenderer } from "preact-intlayer/markdown";

const render = useMarkdownRenderer();

return <div>{render("# मेरा शीर्षक")}</div>;

import { renderMarkdown } from "preact-intlayer/markdown";

return <div>{renderMarkdown("# मेरा शीर्षक")}</div>;

import { MarkdownRenderer } from "solid-intlayer/markdown";

<MarkdownRenderer forceBlock={true}>
{"# मेरा शीर्षक"}
</MarkdownRenderer>

import { useMarkdownRenderer } from "solid-intlayer/markdown";

const render = useMarkdownRenderer();

return <div>{render("# मेरा शीर्षक")}</div>;

import { renderMarkdown } from "solid-intlayer/markdown";

return <div>{renderMarkdown("# मेरा शीर्षक")}</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 { createIntlayerMarkdownProvider } from "angular-intlayer/markdown";

export const appConfig: ApplicationConfig = {
providers: [
  createIntlayerMarkdownProvider({
    components: {
      h1: { class: "text-2xl font-bold" },
    },
  }),
],
};

import { createIntlayerMarkdownProvider } from "angular-intlayer/markdown";

export const appConfig: ApplicationConfig = {
providers: [
  createIntlayerMarkdownProvider({
    renderMarkdown: async (md) => {
      const { renderMarkdown } = await import('angular-intlayer/markdown');
      return renderMarkdown(md);
    },
  }),
],
};

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. सर्वर पर मार्कडाउन को सीरियलाइज़ेबल AST में पार्स करें
const markdownString = "## My title \n\nLorem Ipsum";
const ast = parseMarkdown(markdownString);

// 2. सीधे AST को रेंडर करें
// सर्वर कंपोनेंट में, यह बिना किसी समस्या के काम करता है और यदि आवश्यक हो
// तो सीधे अंतर्निहित क्लाइंट कंपोनेंट्स में AST को पास करता है।
return <MarkdownRenderer content={ast} />;
}

<script setup lang="ts">
import { parseMarkdown } from "vue-intlayer/markdown";
import { MarkdownRenderer } from "vue-intlayer/markdown";

// 1. सर्वर पर मार्कडाउन प्राप्त करें और उसे AST में पार्स करें
const { data: ast } = await useAsyncData('markdown', () => {
const markdownString = "## My title \n\nLorem Ipsum";
return parseMarkdown(markdownString);
});
</script>

<template>
<!-- 2. क्लाइंट पर: बिना री-पार्स किए सीधे AST रेंडर करें -->
<MarkdownRenderer :content="ast" />
</template>

import { parseMarkdown } from "svelte-intlayer/markdown";

// 1. सर्वर पर: मार्कडाउन को एक सीरियलाइज़ेबल AST में पार्स करें
export const load = async () => {
const markdownString = "## My title \n\nLorem Ipsum";
const ast = parseMarkdown(markdownString);

// AST को क्लाइंट को लौटाएं
return { content: ast };
};

<script lang="ts">
import { MarkdownRenderer } from "svelte-intlayer/markdown";
export let data;
</script>

<!-- 2. क्लाइंट पर: बिना री-पार्स किए सीधे AST रेंडर करें -->
<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. सर्वर पर: मार्कडाउन को एक सीरियलाइज़ेबल AST में पार्स करें
  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. क्लाइंट पर: बिना री-पार्स किए सीधे AST रेंडर करें
  this.route.data.subscribe((data) => {
    this.renderedMarkdown = this.markdownService.renderMarkdown(
      data.markdownAst
    ) as string;
  });
}
}