@intlayer/docs 8.10.0-canary.0 → 8.10.0

package/docs/ko/dictionary/markdown.md

@@ -2,11 +2,11 @@
 createdAt: 2025-02-07
 updatedAt: 2026-05-19
 title: Markdown
-description: Intlayer를 사용하여 다국어 웹사이트에서 Markdown 콘텐츠를 선언하고 사용하는 방법을 알아보세요. 이 온라인 문서의 단계를 따라 프로젝트에 Markdown을 손쉽게 통합하세요.
+description: Intlayer를 사용하여 다국어 웹사이트에서 Markdown 콘텐츠를 선언하고 사용하는 방법을 알아보세요. 이 온라인 문서의 단계를 따라 Markdown을 프로젝트에 원활하게 통합하세요.
 keywords:
   - Markdown
-  - 국제화
-  - 문서
+  - Internationalization
+  - Documentation
   - Intlayer
   - Next.js
   - JavaScript
@@ -22,46 +22,46 @@ history:
     changes: "`.content.md` 파일 지원 추가"
   - version: 8.5.0
     date: 2026-03-24
-    changes: "Add `intlayerMarkdown` plugin object; use `app.use(intlayerMarkdown)` instead of `app.use(installIntlayerMarkdown)`"
+    changes: "`intlayerMarkdown` 플러그인 객체 추가; `app.use(installIntlayerMarkdown)` 대신 `app.use(intlayerMarkdown)` 사용"
   - version: 8.5.0
     date: 2026-03-24
-    changes: "{{framework}}-intlayer에서 {{framework}}-intlayer/markdown으로 임포트 이동"
+    changes: "가져오기를 `{{framework}}-intlayer`에서 `{{framework}}-intlayer/markdown`으로 이동"
   - version: 8.0.0
     date: 2026-01-22
     changes: "MarkdownRenderer / useMarkdownRenderer / renderMarkdown 유틸리티 및 forceInline 옵션 추가"
   - version: 8.0.0
     date: 2026-01-18
-    changes: "마크다운 콘텐츠의 자동 장식, MDX 및 SSR 지원"
+    changes: "Markdown 콘텐츠의 자동 장식, MDX 및 SSR 지원"
   - version: 5.5.10
     date: 2025-06-29
-    changes: "히스토리 초기화"
+    changes: "초기 기록 생성"
 ---
 
-# 마크다운 / 리치 텍스트 콘텐츠
+# Markdown / 서식 있는 텍스트 콘텐츠
 
-Intlayer는 마크다운 문법을 사용하여 정의된 리치 텍스트 콘텐츠를 지원합니다. 이를 통해 블로그, 기사 등과 같은 리치 포맷의 콘텐츠를 쉽게 작성하고 관리할 수 있습니다.
+Intlayer는 Markdown 구문을 사용하여 정의된 서식 있는 텍스트 콘텐츠를 지원합니다. 이를 통해 블로그, 기사 등과 같이 서식이 풍부한 콘텐츠를 쉽게 작성하고 유지 관리할 수 있습니다.
 
-## 마크다운 콘텐츠 선언
+## Markdown 콘텐츠 선언
 
-마크다운 콘텐츠는 `md` 함수를 사용하거나 (마크다운 문법을 포함하는 경우) 단순히 문자열로 선언할 수 있습니다.
+`md` 함수를 사용하거나 (Markdown 구문이 포함된 경우) 단순한 문자열로 Markdown 콘텐츠를 선언할 수 있습니다.
 
 <Tabs>
   <Tab label=".content.md" value=".content.md">
-    버전 `8.10.0`부터 `.content.md` 파일에 마크다운 콘텐츠를 직접 선언할 수 있습니다. Intlayer는 자동으로 마크다운 콘텐츠를 감지하고 파싱합니다.
+    버전 `8.10.0`부터 `.content.md` 파일에서 직접 Markdown 콘텐츠를 선언할 수 있습니다. Intlayer가 Markdown 콘텐츠를 자동으로 감지하고 구문 분석합니다.
 
-    ```md fileName="markdown-file.ko.content.md"
+    ```md fileName="markdown-file.en.content.md"
     ---
     key: my-markdown-content
-    description: 나의 콘텐츠
-    locale: ko
+    description: 내 콘텐츠
+    locale: en
     ---
 
-    # 나의 콘텐츠
+    # 내 콘텐츠
 
-    여기 마크다운 콘텐츠 예시가 있습니다
+    여기에 마크다운 콘텐츠 예시가 있습니다.
     ```
 
-    `locale` frontmatter 필드는 콘텐츠의 로케일을 정의하는 필드입니다. 선택 사항입니다. 지정하지 않으면 Intlayer는 기본 로케일을 사용하며, 특정 로케일에 대한 번역이 없는 경우 폴백(fallback) 로케일로도 사용됩니다.
+    `locale` 프런트매터 필드는 콘텐츠의 로캘을 정의하는 필드입니다. 선택 사항입니다. 제공되지 않으면 Intlayer는 기본 로캘을 사용하며, 특정 로캘에 대한 번역이 없을 때 대체 로캘로도 사용됩니다.
 
     파일 구조 예시:
 
@@ -75,11 +75,11 @@ Intlayer는 마크다운 문법을 사용하여 정의된 리치 텍스트 콘
         └── markdown-file.es.content.md
     ```
 
-    front-matter에는 [사전 정의(Dictionary definition)](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/dictionary/content_file.md)에 정의된 모든 속성을 추가할 수 있습니다.
+    [사전 정의](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/dictionary/content_file.md)에 정의된 속성을 프런트매터에 추가할 수 있습니다.
 
   </Tab>
   <Tab label="수동 래핑" value="manual-wrapping">
-    마크다운 콘텐츠를 명시적으로 선언하려면 `md` 함수를 사용하세요. 명백한 문법이 포함되어 있지 않더라도 문자열이 마크다운으로 처리되도록 보장하고 싶을 때 유용합니다.
+    `md` 함수를 사용하여 Markdown 콘텐츠를 명시적으로 선언하세요. 이는 명백한 구문이 포함되어 있지 않더라도 문자열이 Markdown으로 처리되도록 하려는 경우에 유용합니다.
 
     ```typescript fileName="markdownDictionary.content.ts"
     import { md, type Dictionary } from "intlayer";
@@ -87,7 +87,7 @@ Intlayer는 마크다운 문법을 사용하여 정의된 리치 텍스트 콘
     const markdownDictionary = {
       key: "app",
       content: {
-        myMarkdownContent: md("## My title \n\nLorem Ipsum"),
+        myMarkdownContent: md("## 내 제목 \n\nLorem Ipsum"),
       },
     } satisfies Dictionary;
 
@@ -95,33 +95,34 @@ Intlayer는 마크다운 문법을 사용하여 정의된 리치 텍스트 콘
     ```
 
   </Tab>
-  <Tab label="자동 감지" value="automatic-detection">
-    문자열에 일반적인 마크다운 표시(예: 헤더, 리스트, 링크 등)가 포함되어 있으면 Intlayer가 자동으로 변환합니다.
+  <Tab label="외부 파일" value="external-files">
+    `file` 함수를 사용하여 `.md` 파일을 직접 가져옵니다.
 
     ```typescript fileName="markdownDictionary.content.ts"
+    import { md, file, t } from "intlayer";
+
     export default {
       key: "app",
-      contentAutoTransformation: true, // 마크다운 콘텐츠 자동 감지 활성화 - intlayer.config.ts에서 전역 설정 가능
       content: {
-        myMarkdownContent: "## My title \n\nLorem Ipsum",
+        content: t({
+          en: md(file("./myMarkdown.en.md")),
+          ko: md(file("./myMarkdown.ko.md")),
+        }),
       },
     };
     ```
 
   </Tab>
-  <Tab label="외부 파일" value="external-files">
-    `file` 함수를 사용하여 `.md` 파일을 직접 가져옵니다.
 
-    ```typescript fileName="markdownDictionary.content.ts"
-    import { md, file, t } from "intlayer";
+  <Tab label="자동 감지" value="automatic-detection">
+    문자열에 일반적인 Markdown 표시기(예: 제목, 목록, 링크 등)가 포함된 경우 Intlayer가 자동으로 이를 변환합니다.
 
+    ```typescript fileName="markdownDictionary.content.ts"
     export default {
       key: "app",
+      contentAutoTransformation: true, // Markdown 콘텐츠의 자동 감지 활성화 - intlayer.config.ts에서 전역으로 설정할 수 있습니다
       content: {
-        content: t({
-          en: md(file("./myMarkdown.en.md")),
-          fr: md(file("./myMarkdown.fr.md")),
-        }),
+        myMarkdownContent: "## 내 제목 \n\nLorem Ipsum",
       },
     };
     ```
@@ -131,38 +132,74 @@ Intlayer는 마크다운 문법을 사용하여 정의된 리치 텍스트 콘
 
 ---
 
-## 마크다운 렌더링
+## Markdown 렌더링
+
+Intlayer는 Markdown을 렌더링하는 두 가지 독립적인 방법을 제공합니다:
+
+1. **`useIntlayer`를 통한 방식**
+   — Intlayer는 프레임워크의 네이티브 출력(JSX, VNode, HTML 문자열)으로 `md` 노드를 자동으로 변환합니다.
+   - 프런트매터는 분석되어 `.metadata`로 노출됩니다. 렌더링은 두 가지 수준에서 재정의할 수 있습니다. `MarkdownProvider`(또는 프레임워크 동등 기능)를 통한 전역 설정과 `.use()`를 통한 노드별 로컬 설정입니다. 두 가지를 결합할 수 있으며, `.use()`가 `MarkdownProvider`보다 우선하고, `MarkdownProvider`가 기본값보다 우선합니다.
 
-렌더링은 Intlayer의 콘텐츠 시스템을 통해 자동으로 처리하거나, 전문 도구를 사용해 수동으로 처리할 수 있습니다.
+2. **도우미 유틸리티** — `<MarkdownRenderer />`, `useMarkdownRenderer()`, 및 `renderMarkdown()`은 **순수 Markdown 문자열만** 허용하는 독립 실행형 도구입니다. 이들은 `useIntlayer`와 독립적이며 반환되는 장식된 노드와 작동하지 않습니다.
 
-### 1. 자동 렌더링 (`useIntlayer` 사용)
+Markdown 렌더링은 **MDX**를 지원합니다 — Markdown 내에서 이름으로 직접 JSX/프레임워크 컴포넌트를 사용할 수 있습니다.
 
-`useIntlayer`로 콘텐츠에 접근하면 마크다운 노드는 이미 렌더링 준비가 되어 있습니다.
+### 1. 자동 렌더링 (`useIntlayer`를 통한 방식)
 
 <Tabs group="framework">
   <Tab label="React / Next.js" value="react">
-    마크다운 노드는 JSX로 직접 렌더링할 수 있습니다.
+    Markdown 노드는 JSX로 직접 렌더링할 수 있습니다.
 
     ```tsx fileName="App.tsx"
     import { useIntlayer } from "react-intlayer";
+    import { MarkdownProvider } from "react-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>
+    );
     ```
 
-    `.use()` 메서드를 사용하여 특정 노드에 대해 로컬 오버라이드를 제공할 수도 있습니다:
+    > `MarkdownProvider`가 없는 경우 Intlayer는 기본 Markdown to JSX 파서를 사용하여 마크다운을 렌더링합니다.
+
+    `.use()` 메서드를 사용하여 특정 노드에 대한 로컬 재정의를 제공할 수도 있습니다:
 
     ```tsx
     {myMarkdownContent.use({
-      h1: ({ children }) => <h1 className="text-3xl font-bold">{children}</h1>,
+      h1: ({ children }) => <h1 style={{ color: "red" }}>{children}</h1>,
     })}
     ```
 
+    문자열로 Markdown을 가져올 수 있습니다:
+
+    ```tsx
+    {myMarkdownContent.value}
+    {String(myMarkdownContent)}
+    {myMarkdownContent.toString()}
+    ```
+
+    그리고 다음과 같이 마크다운 메타데이터에 접근할 수 있습니다:
+
+    ```tsx
+    {myMarkdownContent.metadata}
+    {myMarkdownContent.metadata.title}
+    ```
+
   </Tab>
   <Tab label="Vue" value="vue">
-    Vue에서는 마크다운 콘텐츠를 내장된 `component`를 사용하거나 직접 노드로 렌더링할 수 있습니다.
+    Vue에서 Markdown 콘텐츠는 내장 `component`를 사용하거나 노드로서 직접 렌더링될 수 있습니다.
 
     ```vue fileName="App.vue"
     <script setup>
@@ -175,48 +212,188 @@ Intlayer는 마크다운 문법을 사용하여 정의된 리치 텍스트 콘
     </template>
     ```
 
+    `intlayerMarkdown` 플러그인을 통해 전역으로 구성합니다(MDX 사용자 지정 컴포넌트 지원):
+
+    ```ts fileName="main.ts"
+    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 컴포넌트
+      },
+    });
+    ```
+
+    > `intlayerMarkdown` 플러그인이 설치되지 않은 경우 Intlayer는 기본 컴파일러를 사용하여 렌더링합니다.
+
+    `.use()` 메서드를 사용하여 특정 노드에 대한 로컬 재정의를 제공할 수도 있습니다:
+
+    ```vue
+    <component :is="myMarkdownContent.use({
+      h1: (props) => h('h1', { style: { color: 'red' } }, props.children),
+    })" />
+    ```
+
+    문자열로 Markdown을 가져올 수 있습니다:
+
+    ```vue
+    {{ myMarkdownContent.value }}
+    {{ String(myMarkdownContent) }}
+    {{ myMarkdownContent.toString() }}
+    ```
+
+    그리고 다음과 같이 마크다운 메타데이터에 접근할 수 있습니다:
+
+    ```vue
+    <component :is="myMarkdownContent.metadata" />
+    <component :is="myMarkdownContent.metadata.title" />
+    ```
+
   </Tab>
   <Tab label="Svelte" value="svelte">
-    Svelte는 기본적으로 마크다운을 HTML 문자열로 렌더링합니다. 이를 렌더링하려면 `{@html}`을 사용하세요.
+    Svelte는 기본적으로 Markdown을 HTML 문자열로 렌더링합니다. 이를 렌더링하려면 `{@html}`을 사용하세요.
 
-    ```svelte
+    ```svelte fileName="App.svelte"
     <script lang="ts">
     import { useIntlayer } from "svelte-intlayer";
+    import { MarkdownProvider } from "svelte-intlayer/markdown";
+    import MyHeading from "./MyHeading.svelte";
+
     const content = useIntlayer("app");
     </script>
 
-    {@html $content.myMarkdownContent}
+    <MarkdownProvider components={{ h1: MyHeading }}>
+      {@html $content.myMarkdownContent}
+    </MarkdownProvider>
+    ```
+
+    > `MarkdownProvider`가 없는 경우 Intlayer는 기본 컴파일러를 사용하여 마크다운을 렌더링합니다.
+
+    `.use()` 메서드를 사용하여 특정 노드에 대한 로컬 재정의를 제공할 수도 있습니다:
+
+    ```svelte
+    {@html $content.myMarkdownContent.use({ ... })}
+    ```
+
+    문자열로 Markdown을 가져올 수 있습니다:
+
+    ```svelte
+    {$content.myMarkdownContent.value}
+    {String($content.myMarkdownContent)}
+    {$content.myMarkdownContent.toString()}
+    ```
+
+    그리고 다음과 같이 마크다운 메타데이터에 접근할 수 있습니다:
+
+    ```svelte
+    {$content.myMarkdownContent.metadata}
+    {$content.myMarkdownContent.metadata.title}
     ```
 
   </Tab>
   <Tab label="Preact" value="preact">
-    Preact는 JSX에서 마크다운 노드를 직접 지원합니다.
+    Preact는 JSX에서 Markdown 노드를 직접 지원합니다.
 
     ```tsx fileName="App.tsx"
     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>
+    );
+    ```
+
+    > `MarkdownProvider`가 없는 경우 Intlayer는 기본 Markdown to JSX 파서를 사용하여 마크다운을 렌더링합니다.
+
+    `.use()` 메서드를 사용하여 특정 노드에 대한 로컬 재정의를 제공할 수도 있습니다:
+
+    ```tsx
+    {myMarkdownContent.use({
+      h1: ({ children }) => <h1 style={{ color: "red" }}>{children}</h1>,
+    })}
+    ```
+
+    문자열로 Markdown을 가져올 수 있습니다:
+
+    ```tsx
+    {myMarkdownContent.value}
+    {String(myMarkdownContent)}
+    {myMarkdownContent.toString()}
+    ```
+
+    그리고 다음과 같이 마크다운 메타데이터에 접근할 수 있습니다:
+
+    ```tsx
+    {myMarkdownContent.metadata}
+    {myMarkdownContent.metadata.title}
     ```
 
   </Tab>
   <Tab label="Solid" value="solid">
-    Solid는 JSX에서 마크다운 노드를 직접 지원합니다.
+    Solid는 JSX에서 Markdown 노드를 직접 지원합니다.
 
     ```tsx fileName="App.tsx"
     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>
+    );
+    ```
+
+    > `MarkdownProvider`가 없는 경우 Intlayer는 기본 Markdown to JSX 파서를 사용하여 마크다운을 렌더링합니다.
+
+    `.use()` 메서드를 사용하여 특정 노드에 대한 로컬 재정의를 제공할 수도 있습니다:
+
+    ```tsx
+    {myMarkdownContent.use({
+      h1: (props) => <h1 style={{ color: "red" }}>{props.children}</h1>,
+    })}
+    ```
+
+    문자열로 Markdown을 가져올 수 있습니다:
+
+    ```tsx
+    {myMarkdownContent.value}
+    {String(myMarkdownContent)}
+    {myMarkdownContent.toString()}
+    ```
+
+    그리고 다음과 같이 마크다운 메타데이터에 접근할 수 있습니다:
+
+    ```tsx
+    {myMarkdownContent.metadata}
+    {myMarkdownContent.metadata.title}
     ```
 
   </Tab>
   <Tab label="Angular" value="angular">
-    Angular는 마크다운 콘텐츠를 렌더링하기 위해 `[innerHTML]` 디렉티브를 사용합니다.
+    Angular는 `[innerHTML]` 지시문을 사용하여 Markdown 콘텐츠를 렌더링합니다.
 
     ```typescript fileName="app.component.ts"
     import { Component } from "@angular/core";
@@ -231,7 +408,9 @@ Intlayer는 마크다운 문법을 사용하여 정의된 리치 텍스트 콘
     }
     ```
 
-    `.use()` 메서드를 사용하여 특정 노드에 대해 로컬 오버라이드를 제공할 수도 있습니다:
+    > IntlayerMarkdown 공급자가 구성되지 않은 경우 Intlayer는 기본 컴파일러를 사용하여 렌더링합니다.
+
+    `.use()` 메서드를 사용하여 특정 노드에 대한 로컬 재정의를 제공할 수도 있습니다:
 
     ```typescript
     content().myMarkdownContent.use({
@@ -239,27 +418,46 @@ Intlayer는 마크다운 문법을 사용하여 정의된 리치 텍스트 콘
     })
     ```
 
+    문자열로 Markdown을 가져올 수 있습니다:
+
+    ```typescript
+    content().myMarkdownContent.value
+    String(content().myMarkdownContent)
+    content().myMarkdownContent.toString()
+    ```
+
+    그리고 다음과 같이 마크다운 메타데이터에 접근할 수 있습니다:
+
+    ```typescript
+    content().myMarkdownContent.metadata
+    content().myMarkdownContent.metadata.title
+    ```
+
   </Tab>
 </Tabs>
 
-### 2. 수동 렌더링 및 고급 도구
+### 2. 도우미 유틸리티 (Markdown 문자열 전용)
 
-원시 마크다운 문자열을 렌더링하거나 렌더링 프로세스를 더 세밀하게 제어해야 하는 경우, 다음 도구들을 사용하세요.
+이러한 유틸리티는 **순수 Markdown 문자열만** 렌더링하며 `useIntlayer`와 독립적입니다. 사전 외의 출처에서 Markdown을 렌더링해야 할 때 사용하세요.
 
 <Tabs group="framework">
   <Tab label="React / Next.js" value="react">
   
+    #### `<MarkdownRenderer />` 컴포넌트
+
+    특정 옵션으로 Markdown 문자열을 렌더링합니다.
+
     ```tsx
     import { MarkdownRenderer } from "react-intlayer/markdown";
 
     <MarkdownRenderer forceBlock={true} tagfilter={true}>
-      {"# My Title"}
+      {"# 내 제목"}
     </MarkdownRenderer>
     ```
 
     #### `useMarkdownRenderer()` 훅
 
-    미리 구성된 렌더러 함수를 얻습니다.
+    사전 구성된 렌더러 함수를 가져옵니다.
 
     ```tsx
     import { useMarkdownRenderer } from "react-intlayer/markdown";
@@ -269,16 +467,16 @@ Intlayer는 마크다운 문법을 사용하여 정의된 리치 텍스트 콘
       components: { h1: (props) => <h1 {...props} className="custom" /> }
     });
 
-    return renderMarkdown("# My Title");
+    return renderMarkdown("# 내 제목");
     ```
 
     #### `renderMarkdown()` 유틸리티
-    컴포넌트 외부에서 렌더링할 때 사용하는 독립 유틸리티입니다.
+    컴포넌트 외부 렌더링용 독립 실행형 유틸리티.
 
     ```tsx
     import { renderMarkdown } from "react-intlayer/markdown";
 
-    const jsx = renderMarkdown("# My Title", { forceBlock: true });
+    const jsx = renderMarkdown("# 내 제목", { forceBlock: true });
     ```
 
   </Tab>
@@ -292,7 +490,7 @@ Intlayer는 마크다운 문법을 사용하여 정의된 리치 텍스트 콘
     </script>
 
     <template>
-      <MarkdownRenderer :forceBlock="true" content="# My Title" />
+      <MarkdownRenderer :forceBlock="true" content="# 내 제목" />
     </template>
     ```
 
@@ -306,7 +504,7 @@ Intlayer는 마크다운 문법을 사용하여 정의된 리치 텍스트 콘
     import { MarkdownRenderer } from "svelte-intlayer/markdown";
     </script>
 
-    <MarkdownRenderer forceBlock={true} value="# My Title" />
+    <MarkdownRenderer forceBlock={true} value="# 내 제목" />
     ```
 
     #### `useMarkdownRenderer()` 훅
@@ -317,7 +515,7 @@ Intlayer는 마크다운 문법을 사용하여 정의된 리치 텍스트 콘
     const render = useMarkdownRenderer();
     </script>
 
-    {@html render("# My Title")}
+    {@html render("# 내 제목")}
     ```
 
     #### `renderMarkdown()` 유틸리티
@@ -327,7 +525,7 @@ Intlayer는 마크다운 문법을 사용하여 정의된 리치 텍스트 콘
     import { renderMarkdown } from "svelte-intlayer/markdown";
     </script>
 
-    {@html renderMarkdown("# My Title")}
+    {@html renderMarkdown("# 내 제목")}
     ```
 
   </Tab>
@@ -338,7 +536,7 @@ Intlayer는 마크다운 문법을 사용하여 정의된 리치 텍스트 콘
     import { MarkdownRenderer } from "preact-intlayer/markdown";
 
     <MarkdownRenderer forceBlock={true}>
-      {"# My Title"}
+      {"# 내 제목"}
     </MarkdownRenderer>
     ```
 
@@ -349,7 +547,7 @@ Intlayer는 마크다운 문법을 사용하여 정의된 리치 텍스트 콘
 
     const render = useMarkdownRenderer();
 
-    return <div>{render("# My Title")}</div>;
+    return <div>{render("# 내 제목")}</div>;
     ```
 
     #### `renderMarkdown()` 유틸리티
@@ -357,7 +555,7 @@ Intlayer는 마크다운 문법을 사용하여 정의된 리치 텍스트 콘
     ```tsx
     import { renderMarkdown } from "preact-intlayer/markdown";
 
-    return <div>{renderMarkdown("# My Title")}</div>;
+    return <div>{renderMarkdown("# 내 제목")}</div>;
     ```
 
   </Tab>
@@ -368,7 +566,7 @@ Intlayer는 마크다운 문법을 사용하여 정의된 리치 텍스트 콘
     import { MarkdownRenderer } from "solid-intlayer/markdown";
 
     <MarkdownRenderer forceBlock={true}>
-      {"# My Title"}
+      {"# 내 제목"}
     </MarkdownRenderer>
     ```
 
@@ -379,7 +577,7 @@ Intlayer는 마크다운 문법을 사용하여 정의된 리치 텍스트 콘
 
     const render = useMarkdownRenderer();
 
-    return <div>{render("# My Title")}</div>;
+    return <div>{render("# 내 제목")}</div>;
     ```
 
     #### `renderMarkdown()` 유틸리티
@@ -387,13 +585,13 @@ Intlayer는 마크다운 문법을 사용하여 정의된 리치 텍스트 콘
     ```tsx
     import { renderMarkdown } from "solid-intlayer/markdown";
 
-    return <div>{renderMarkdown("# My Title")}</div>;
+    return <div>{renderMarkdown("# 내 제목")}</div>;
     ```
 
   </Tab>
   <Tab label="Angular" value="angular">
     #### `IntlayerMarkdownService` 서비스
-    서비스를 사용하여 마크다운 문자열을 렌더링합니다.
+    서비스를 사용하여 Markdown 문자열을 렌더링합니다.
 
     ```typescript
     import { IntlayerMarkdownService } from "angular-intlayer/markdown";
@@ -412,9 +610,9 @@ Intlayer는 마크다운 문법을 사용하여 정의된 리치 텍스트 콘
 
 ---
 
-## `MarkdownProvider`를 사용한 전역 구성
+## `MarkdownProvider`를 통한 전역 구성
 
-애플리케이션 전체에 대해 마크다운 렌더링을 전역으로 구성할 수 있습니다. 이를 통해 모든 렌더러에 동일한 프롭을 전달하는 번거로움을 피할 수 있습니다.
+`MarkdownProvider`(또는 해당 프레임워크 기능)는 전체 애플리케이션의 Markdown 렌더링 파이프라인을 구성합니다. 이는 자동 `useIntlayer` 렌더링과 도우미 유틸리티 모두에 적용됩니다. 여기서 설정된 옵션이 기본값이며, `.use()`는 노드 수준에서 이를 덮어씁니다.
 
 <Tabs group="framework">
   <Tab label="React / Next.js" value="react">
@@ -425,8 +623,9 @@ Intlayer는 마크다운 문법을 사용하여 정의된 리치 텍스트 콘
     export const AppProvider = ({ children }) => (
       <MarkdownProvider
         components={{
-          h1: ({ children }) => <h1 className="text-2xl font-bold">{children}</h1>,
-          a: ({ href, children }) => <Link to={href}>{children}</Link>,
+          h1: (props) => <h1 style={{color: 'green'}} {...props} />,
+          a: ({ href, ...props }) => <a style={{color: 'red'}} {...props} />,
+          MyCustomJSXComponent: (props) => <span style={{color: 'red'}} {...props} />,
         }}
       >
         {children}
@@ -434,7 +633,9 @@ Intlayer는 마크다운 문법을 사용하여 정의된 리치 텍스트 콘
     );
     ```
 
-    나만의 Markdown 렌더러를 사용할 수도 있습니다:
+    > MDX 지원 — Markdown 내부에서 사용된 모든 컴포넌트 이름(예: `<MyCustomJSXComponent />`)은 `components` 맵에서 확인됩니다.
+
+    자체 마크다운 렌더러를 사용할 수도 있습니다:
 
     ```tsx fileName="AppProvider.tsx"
     import { MarkdownProvider } from "react-intlayer/markdown";
@@ -442,8 +643,9 @@ Intlayer는 마크다운 문법을 사용하여 정의된 리치 텍스트 콘
     export const AppProvider = ({ children }) => (
       <MarkdownProvider
         renderMarkdown={async (md) => {
-          const { compileMarkdown } = await import('react-intlayer/markdown');
-          return compileMarkdown(md);
+          // Use dynamic import to reduce the bundle size of your application
+          const { renderMarkdown } = await import('react-intlayer/markdown');
+          return renderMarkdown(md);
         }}
       >
         {children}
@@ -451,7 +653,7 @@ Intlayer는 마크다운 문법을 사용하여 정의된 리치 텍스트 콘
     );
     ```
 
-    > Markdown 렌더러를 동적으로 가져오는 것은 애플리케이션의 번들 크기를 줄이는 좋은 방법입니다.
+    > Markdown 렌더러를 동적으로 가져오는 것은 애플리케이션 번들 크기를 줄이는 좋은 방법입니다.
 
   </Tab>
   <Tab label="Vue" value="vue">
@@ -478,7 +680,7 @@ Intlayer는 마크다운 문법을 사용하여 정의된 리치 텍스트 콘
     app.mount("#app");
     ```
 
-    나만의 Markdown 렌더러를 사용할 수도 있습니다:
+    자체 마크다운 렌더러를 사용할 수도 있습니다:
 
     ```typescript fileName="main.ts"
     import { createApp } from "vue";
@@ -491,15 +693,15 @@ Intlayer는 마크다운 문법을 사용하여 정의된 리치 텍스트 콘
     app.use(intlayer);
     app.use(intlayerMarkdown, {
       renderMarkdown: async (md) => {
-        const { compileMarkdown } = await import('vue-intlayer/markdown');
-        return compileMarkdown(md);
+        const { renderMarkdown } = await import('vue-intlayer/markdown');
+        return renderMarkdown(md);
       },
     });
 
     app.mount("#app");
     ```
 
-    > Markdown 렌더러를 동적으로 가져오는 것은 애플리케이션의 번들 크기를 줄이는 좋은 방법입니다.
+    > Markdown 렌더러를 동적으로 가져오는 것은 애플리케이션 번들 크기를 줄이는 좋은 방법입니다.
 
   </Tab>
   <Tab label="Svelte" value="svelte">
@@ -519,7 +721,7 @@ Intlayer는 마크다운 문법을 사용하여 정의된 리치 텍스트 콘
     </MarkdownProvider>
     ```
 
-    나만의 Markdown 렌더러를 사용할 수도 있습니다:
+    자체 마크다운 렌더러를 사용할 수도 있습니다:
 
     ```svelte fileName="App.svelte"
     <script lang="ts">
@@ -528,15 +730,15 @@ Intlayer는 마크다운 문법을 사용하여 정의된 리치 텍스트 콘
 
     <MarkdownProvider
       renderMarkdown={async (md) => {
-        const { compileMarkdown } = await import('svelte-intlayer/markdown');
-        return compileMarkdown(md);
+        const { renderMarkdown } = await import('svelte-intlayer/markdown');
+        return renderMarkdown(md);
       }}
     >
       <slot />
     </MarkdownProvider>
     ```
 
-    > Markdown 렌더러를 동적으로 가져오는 것은 애플리케이션의 번들 크기를 줄이는 좋은 방법입니다.
+    > Markdown 렌더러를 동적으로 가져오는 것은 애플리케이션 번들 크기를 줄이는 좋은 방법입니다.
 
   </Tab>
   <Tab label="Preact" value="preact">
@@ -555,7 +757,7 @@ Intlayer는 마크다운 문법을 사용하여 정의된 리치 텍스트 콘
     );
     ```
 
-    나만의 Markdown 렌더러를 사용할 수도 있습니다:
+    자체 마크다운 렌더러를 사용할 수도 있습니다:
 
     ```tsx fileName="AppProvider.tsx"
     import { MarkdownProvider } from "preact-intlayer/markdown";
@@ -563,8 +765,8 @@ Intlayer는 마크다운 문법을 사용하여 정의된 리치 텍스트 콘
     export const AppProvider = ({ children }) => (
       <MarkdownProvider
         renderMarkdown={async (md) => {
-          const { compileMarkdown } = await import('preact-intlayer/markdown');
-          return compileMarkdown(md);
+          const { renderMarkdown } = await import('preact-intlayer/markdown');
+          return renderMarkdown(md);
         }}
       >
         {children}
@@ -572,7 +774,7 @@ Intlayer는 마크다운 문법을 사용하여 정의된 리치 텍스트 콘
     );
     ```
 
-    > Markdown 렌더러를 동적으로 가져오는 것은 애플리케이션의 번들 크기를 줄이는 좋은 방법입니다.
+    > Markdown 렌더러를 동적으로 가져오는 것은 애플리케이션 번들 크기를 줄이는 좋은 방법입니다.
 
   </Tab>
   <Tab label="Solid" value="solid">
@@ -591,7 +793,7 @@ Intlayer는 마크다운 문법을 사용하여 정의된 리치 텍스트 콘
     );
     ```
 
-    나만의 Markdown 렌더러를 사용할 수도 있습니다:
+    자체 마크다운 렌더러를 사용할 수도 있습니다:
 
     ```tsx fileName="AppProvider.tsx"
     import { MarkdownProvider } from "solid-intlayer/markdown";
@@ -599,8 +801,8 @@ Intlayer는 마크다운 문법을 사용하여 정의된 리치 텍스트 콘
     export const AppProvider = (props) => (
       <MarkdownProvider
         renderMarkdown={async (md) => {
-          const { compileMarkdown } = await import('solid-intlayer/markdown');
-          return compileMarkdown(md);
+          const { renderMarkdown } = await import('solid-intlayer/markdown');
+          return renderMarkdown(md);
         }}
       >
         {props.children}
@@ -608,59 +810,29 @@ Intlayer는 마크다운 문법을 사용하여 정의된 리치 텍스트 콘
     );
     ```
 
-    > Markdown 렌더러를 동적으로 가져오는 것은 애플리케이션의 번들 크기를 줄이는 좋은 방법입니다.
+    > Markdown 렌더러를 동적으로 가져오는 것은 애플리케이션 번들 크기를 줄이는 좋은 방법입니다.
 
   </Tab>
   <Tab label="Angular" value="angular">
 
-    ```typescript fileName="app.config.ts"
-    import { createIntlayerMarkdownProvider } from "angular-intlayer/markdown";
-
-    export const appConfig: ApplicationConfig = {
-      providers: [
-        createIntlayerMarkdownProvider({
-          components: {
-            h1: { class: "text-2xl font-bold" },
-          },
-        }),
-      ],
-    };
-    ```
-
-    나만의 Markdown 렌더러를 사용할 수도 있습니다:
+    ```typescript fileName="app.module.ts"
+    import { NgModule } from '@angular/core';
+    import { IntlayerMarkdownModule } from 'angular-intlayer/markdown';
 
-    ```typescript fileName="app.config.ts"
-    import { createIntlayerMarkdownProvider } from "angular-intlayer/markdown";
-
-    export const appConfig: ApplicationConfig = {
-      providers: [
-        createIntlayerMarkdownProvider({
+    @NgModule({
+      imports: [
+        IntlayerMarkdownModule.forRoot({
           renderMarkdown: async (md) => {
-            const { compileMarkdown } = await import('angular-intlayer/markdown');
-            return compileMarkdown(md);
-          },
-        }),
-      ],
-    };
+            const { renderMarkdown } = await import('angular-intlayer/markdown');
+            return renderMarkdown(md);
+          }
+        })
+      ]
+    })
+    export class AppModule {}
     ```
 
-    > Markdown 렌더러를 동적으로 가져오는 것은 애플리케이션의 번들 크기를 줄이는 좋은 방법입니다.
+    > Markdown 렌더러를 동적으로 가져오는 것은 애플리케이션 번들 크기를 줄이는 좋은 방법입니다.
 
   </Tab>
 </Tabs>
-
----
-
-## 옵션 참조
-
-이 옵션들은 `MarkdownProvider`, `MarkdownRenderer`, `useMarkdownRenderer`, 및 `renderMarkdown`에 전달할 수 있습니다.
-
-| 옵션                  | 타입        | 기본값  | 설명                                                                          |
-| :-------------------- | :---------- | :------ | :---------------------------------------------------------------------------- |
-| `forceBlock`          | `boolean`   | `false` | 출력을 블록 수준 요소(예: `<div>`)로 감싸도록 강제합니다.                     |
-| `forceInline`         | `boolean`   | `false` | 출력을 인라인 요소(예: `<span>`)로 감싸도록 강제합니다.                       |
-| `tagfilter`           | `boolean`   | `true`  | 위험한 HTML 태그를 제거하여 보안을 강화하는 GitHub Tag Filter를 활성화합니다. |
-| `preserveFrontmatter` | `boolean`   | `false` | `true`인 경우 마크다운 문자열 시작 부분의 frontmatter가 제거되지 않습니다.    |
-| `components`          | `Overrides` | `{}`    | HTML 태그를 커스텀 컴포넌트에 매핑하는 맵(예: `{ h1: MyHeading }`).           |
-| `wrapper`             | `Component` | `null`  | 렌더링된 마크다운을 감싸는 커스텀 컴포넌트입니다.                             |
-| `renderMarkdown`      | `Function`  | `null`  | 기본 마크다운 컴파일러를 완전히 대체하는 커스텀 렌더링 함수입니다.            |