मार्कडाउन / रिच टेक्स्ट सामग्री

मार्कडाउन कैसे काम करता है

Intlayer मार्कडाउन सिंटैक्स का उपयोग करके परिभाषित रिच टेक्स्ट सामग्री का समर्थन करता है। यह md फ़ंक्शन के माध्यम से प्राप्त किया जाता है, जो एक मार्कडाउन स्ट्रिंग को एक प्रारूप में परिवर्तित करता है जिसे Intlayer द्वारा प्रबंधित किया जा सकता है। मार्कडाउन का उपयोग करके, आप आसानी से ब्लॉग, लेख और अन्य सामग्री को रिच फॉर्मेटिंग के साथ लिख और प्रबंधित कर सकते हैं।

Intlayer विज़ुअल एडिटर और Intlayer CMS दोनों मार्कडाउन सामग्री प्रबंधन का समर्थन करते हैं।

React एप्लिकेशन के साथ एकीकृत होने पर, आप मार्कडाउन सामग्री को HTML में रेंडर करने के लिए एक मार्कडाउन रेंडरिंग प्रोवाइडर (जैसे markdown-to-jsx) का उपयोग कर सकते हैं। यह आपको मार्कडाउन में सामग्री लिखने की अनुमति देता है जबकि यह सुनिश्चित करता है कि यह आपके ऐप में सही ढंग से प्रदर्शित हो।

मार्कडाउन सामग्री सेट करना

अपने Intlayer प्रोजेक्ट में मार्कडाउन सामग्री सेट करने के लिए, md फ़ंक्शन का उपयोग करने वाला एक सामग्री शब्दकोश परिभाषित करें।

import { md, type Dictionary } from "intlayer";// मार्कडाउन सामग्री का उदाहरणconst markdownDictionary = {  key: "app",  content: {    myMarkdownContent: md("## My title \n\nLorem Ipsum"),  },} satisfies Dictionary;export default markdownDictionary;

(बहुभाषी) .md फ़ाइल आयात करना

// यह घोषणा TypeScript को Markdown (.md) फ़ाइलों को मॉड्यूल के रूप में पहचानने और आयात करने की अनुमति देती है।// इसके बिना, TypeScript Markdown फ़ाइलों को आयात करने का प्रयास करते समय त्रुटि देगा,// क्योंकि यह गैर-कोड फ़ाइल आयातों का मूल रूप से समर्थन नहीं करता है।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({      hi: 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;

React Intlayer के साथ मार्कडाउन का उपयोग करना

React एप्लिकेशन में मार्कडाउन सामग्री को रेंडर करने के लिए, आप react-intlayer पैकेज से useIntlayer हुक और एक मार्कडाउन रेंडरिंग प्रोवाइडर का उपयोग कर सकते हैं। इस उदाहरण में, हम मार्कडाउन को HTML में परिवर्तित करने के लिए markdown-to-jsx पैकेज का उपयोग करते हैं।

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

इस कार्यान्वयन में:

• MarkdownProvider एप्लिकेशन (या इसके संबंधित भाग) को लपेटता है और एक renderMarkdown फ़ंक्शन स्वीकार करता है। इस फ़ंक्शन का उपयोग markdown-to-jsx पैकेज का उपयोग करके Markdown स्ट्रिंग्स को JSX में बदलने के लिए किया जाता है।
• useIntlayer हुक का उपयोग डिक्शनरी से कुंजी "app" के साथ Markdown सामग्री (myMarkdownContent) प्राप्त करने के लिए किया जाता है।
• Markdown सामग्री को सीधे घटक में प्रस्तुत किया जाता है, और Markdown रेंडरिंग को प्रोवाइडर द्वारा संभाला जाता है।

Next Intlayer के साथ Markdown का उपयोग करना

next-intlayer पैकेज का उपयोग करते हुए कार्यान्वयन ऊपर दिए गए समान है। केवल अंतर यह है कि renderMarkdown फ़ंक्शन को एक क्लाइंट घटक में MarkdownProvider घटक को पास किया जाना चाहिए।

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

अतिरिक्त संसाधन

• Intlayer CLI प्रलेखन
• React Intlayer प्रलेखन
• Next Intlayer प्रलेखन
• markdown-to-jsx npm पर

ये संसाधन विभिन्न सामग्री प्रकारों और फ्रेमवर्क्स के साथ Intlayer को सेटअप और उपयोग करने में और अधिक जानकारी प्रदान करते हैं।