このページとあなたの好きなAIアシスタントを使ってドキュメントを要約します
Intlayer MCPサーバーを統合することで、ChatGPT、DeepSeek、Cursor、VSCodeなどから直接ドキュメントを取得できます。
MCPサーバーのドキュメントを表示このページのコンテンツはAIを使用して翻訳されました。
英語の元のコンテンツの最新バージョンを見るこのドキュメントを改善するアイデアがある場合は、GitHubでプルリクエストを送信することで自由に貢献してください。
ドキュメントへのGitHubリンクドキュメントのMarkdownをクリップボードにコピー
マークダウン / リッチテキストコンテンツ
マークダウンの仕組み
Intlayerは、マークダウン構文を使用して定義されたリッチテキストコンテンツをサポートします。これは、md関数を通じて実現され、マークダウン文字列をIntlayerで管理可能な形式に変換します。マークダウンを使用することで、ブログや記事などのリッチなフォーマットを簡単に作成および管理できます。
IntlayerビジュアルエディタおよびIntlayer CMSは、どちらもマークダウンコンテンツ管理をサポートしています。
Reactアプリケーションと統合する際には、markdown-to-jsxのようなマークダウンレンダリングプロバイダーを使用して、マークダウンコンテンツをHTMLにレンダリングできます。これにより、マークダウンでコンテンツを記述しつつ、アプリ内で適切に表示されるようにできます。
マークダウンコンテンツの設定
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ファイルのインポート時にエラーをスローします。// なぜなら、TypeScriptは非コードファイルのインポートをネイティブにはサポートしていないためです。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({ ja: 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フックとマークダウンレンダリングプロバイダーを活用できます。この例では、markdown-to-jsxパッケージを使用してマークダウンを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>);この実装では:
- 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 を設定および使用する方法についてのさらなる洞察を提供します。