@intlayer/docs 8.0.0-canary.6 → 8.0.0

package/docs/ja/dictionary/html.md

@@ -31,47 +31,12 @@ history:
 
 Intlayer は HTML コンテンツをサポートしており、辞書内にリッチで構造化されたコンテンツを埋め込むことができます。このコンテンツは標準の HTML タグでレンダリングすることも、実行時にカスタムコンポーネントに置き換えることもできます。
 
-## HTML の仕組み
-
-Intlayer v8 はコンテンツ文字列内の HTML タグを賢く検出します。文字列が HTML（タグを含む）と判定されると、自動的に HTML ノードに変換されます。
-
-<Columns>
-<Column title="v7 の挙動（手動でラップ）">
-
-```typescript fileName="htmlDictionary.content.ts"
-import { html } from "intlayer";
-
-export default {
-  key: "app",
-  content: {
-    text: html("<p>Hello <strong>World</strong></p>"),
-  },
-};
-```
-
-</Column>
-<Column title="v8 の挙動（自動検出）">
-
-```typescript fileName="htmlDictionary.content.ts"
-export default {
-  key: "app",
-  content: {
-    text: "<p>Hello <strong>World</strong></p>",
-  },
-};
-```
-
-</Column>
-</Columns>
-
----
-
 ## HTML コンテンツの宣言
 
 HTML コンテンツは `html` 関数を使って宣言するか、単に文字列として定義できます。
 
 <Tabs>
-  <Tab label="手動ラッピング">
+  <Tab label="手動ラッピング" value="manual-wrapping">
     `html` 関数を使用して明示的に HTML コンテンツを宣言します。これにより、自動検出が無効になっている場合でも標準タグが正しくマッピングされることが保証されます。
 
     ```typescript fileName="htmlDictionary.content.ts"
@@ -88,7 +53,7 @@ HTML コンテンツは `html` 関数を使って宣言するか、単に文字
     ```
 
   </Tab>
-  <Tab label="自動検出">
+  <Tab label="自動検出" value="automatic-detection">
     文字列に一般的なHTMLタグ（例: `<p>`, `<div>`, `<strong>`など）が含まれている場合、Intlayerは自動的にそれを変換します。
 
     ```typescript fileName="htmlDictionary.content.ts"
@@ -101,7 +66,7 @@ HTML コンテンツは `html` 関数を使って宣言するか、単に文字
     ```
 
   </Tab>
-  <Tab label="外部ファイル">
+  <Tab label="外部ファイル" value="external-files">
     ファイルからHTMLコンテンツをインポートします。現在、`file()`関数は文字列を返し、タグが含まれている場合はHTMLとして自動検出される点に注意してください。
 
     ```typescript fileName="htmlDictionary.content.ts"
@@ -121,6 +86,30 @@ HTML コンテンツは `html` 関数を使って宣言するか、単に文字
   </Tab>
 </Tabs>
 
+### `html()` ノード
+
+`html()` 関数は、Intlayer v8 の新機能で、辞書内で HTML コンテンツを明示的に定義できるようにします。Intlayer は多くの場合、HTML コンテンツを自動検出できますが、`html()` 関数を使用するといくつかの利点があります：
+
+- **型安全性**: `html()` 関数を使用すると、カスタムコンポーネントに期待されるプロパティを定義でき、エディタでの補完や型チェックが向上します。
+- **明示的な宣言**: 自動検出をトリガーする標準的な HTML タグが含まれていない場合でも、文字列が常に HTML として処理されるようにします。
+- **カスタムコンポーネントの定義**: `html()` の第 2 引数に、カスタムコンポーネントとその期待されるプロパティ型を定義して渡すことができます。
+
+```typescript
+import { html } from "intlayer";
+
+const myContent = html(
+  "<MyCustomComponent title='こんにちは'>世界</MyCustomComponent>",
+  {
+    MyCustomComponent: {
+      title: "string",
+      children: "node",
+    },
+  }
+);
+```
+
+HTML ノードで `.use()` メソッドを使用する場合、提供されたコンポーネントは `html()` 関数で提供された定義（利用可能な場合）と照らし合わせてチェックされます。
+
 ---
 
 ## HTML のレンダリング
@@ -132,7 +121,7 @@ HTML コンテンツは `html` 関数を使って宣言するか、単に文字
 `useIntlayer` 経由でコンテンツにアクセスすると、HTML ノードは既にレンダリング可能な状態になっています。
 
 <Tabs group="framework">
-  <Tab label="React / Next.js">
+  <Tab label="React / Next.js" value="react">
     HTML ノードはそのまま JSX としてレンダリングできます。標準的なタグは自動で動作します。
 
     ```tsx fileName="App.tsx"
@@ -154,7 +143,7 @@ HTML コンテンツは `html` 関数を使って宣言するか、単に文字
     ```
 
   </Tab>
-  <Tab label="Vue">
+  <Tab label="Vue" value="vue">
     Vueでは、HTMLコンテンツを組み込みの `component` を使ってレンダリングできます。
 
     ```vue fileName="App.vue"
@@ -174,7 +163,7 @@ HTML コンテンツは `html` 関数を使って宣言するか、単に文字
     ```
 
   </Tab>
-  <Tab label="Svelte">
+  <Tab label="Svelte" value="svelte">
     SvelteはHTMLノードを文字列としてレンダリングします。`{@html}` を使ってレンダリングしてください。
 
     ```svelte
@@ -187,7 +176,7 @@ HTML コンテンツは `html` 関数を使って宣言するか、単に文字
     ```
 
   </Tab>
-  <Tab label="Preact">
+  <Tab label="Preact" value="preact">
     PreactはJSXでHTMLノードを直接サポートします。
 
     ```tsx fileName="App.tsx"
@@ -200,7 +189,7 @@ HTML コンテンツは `html` 関数を使って宣言するか、単に文字
     ```
 
   </Tab>
-  <Tab label="Solid">
+  <Tab label="Solid" value="solid">
     SolidはJSXでHTMLノードを直接サポートします。
 
     ```tsx fileName="App.tsx"
@@ -213,7 +202,7 @@ HTML コンテンツは `html` 関数を使って宣言するか、単に文字
     ```
 
   </Tab>
-  <Tab label="Angular">
+  <Tab label="Angular" value="angular">
     Angularは `[innerHTML]` ディレクティブを使用してHTMLコンテンツをレンダリングします。
 
     ```typescript fileName="app.component.ts"
@@ -246,7 +235,7 @@ HTML コンテンツは `html` 関数を使って宣言するか、単に文字
 アプリ全体でHTMLレンダリングをグローバルに設定できます。これは、すべてのHTMLコンテンツで利用可能にしたいカスタムコンポーネントを定義するのに最適です。
 
 <Tabs group="framework">
-  <Tab label="React / Next.js">
+  <Tab label="React / Next.js" value="react">
   
     ```tsx fileName="AppProvider.tsx"
     import { HTMLProvider } from "react-intlayer";
@@ -264,7 +253,7 @@ HTML コンテンツは `html` 関数を使って宣言するか、単に文字
     ```
 
   </Tab>
-  <Tab label="Vue">
+  <Tab label="Vue" value="vue">
   
     ```typescript fileName="main.ts"
     import { createApp, h } from "vue";
@@ -285,7 +274,7 @@ HTML コンテンツは `html` 関数を使って宣言するか、単に文字
     ```
 
   </Tab>
-  <Tab label="Svelte">
+  <Tab label="Svelte" value="svelte">
    
     ```svelte fileName="App.svelte"
     <script lang="ts">
@@ -303,7 +292,7 @@ HTML コンテンツは `html` 関数を使って宣言するか、単に文字
     ```
 
   </Tab>
-  <Tab label="Preact">
+  <Tab label="Preact" value="preact">
    
     ```tsx fileName="AppProvider.tsx"
     import { HTMLProvider } from "preact-intlayer";
@@ -320,7 +309,7 @@ HTML コンテンツは `html` 関数を使って宣言するか、単に文字
     ```
 
   </Tab>
-  <Tab label="Solid">
+  <Tab label="Solid" value="solid">
    
     ```tsx fileName="AppProvider.tsx"
     import { HTMLProvider } from "solid-intlayer";
@@ -337,7 +326,7 @@ HTML コンテンツは `html` 関数を使って宣言するか、単に文字
     ```
 
   </Tab>
-  <Tab label="Angular">
+  <Tab label="Angular" value="angular">
 
     ```typescript fileName="app.config.ts"
     import { createIntlayerMarkdownProvider } from "angular-intlayer";
@@ -364,7 +353,7 @@ HTML コンテンツは `html` 関数を使って宣言するか、単に文字
 生のHTML文字列をレンダリングしたり、コンポーネントのマッピングをより細かく制御したい場合は、次のツールを使用してください。
 
 <Tabs group="framework">
-  <Tab label="React / Next.js">
+  <Tab label="React / Next.js" value="react">
     #### `<HTMLRenderer />` コンポーネント
     特定のコンポーネントでHTML文字列をレンダリングします。
 
@@ -401,7 +390,7 @@ HTML コンテンツは `html` 関数を使って宣言するか、単に文字
     ```
 
   </Tab>
-  <Tab label="Vue">
+  <Tab label="Vue" value="vue">
    
     #### `<HTMLRenderer />` コンポーネント
    
@@ -416,7 +405,7 @@ HTML コンテンツは `html` 関数を使って宣言するか、単に文字
     ```
 
   </Tab>
-  <Tab label="Svelte">
+  <Tab label="Svelte" value="svelte">
   
     #### `<HTMLRenderer />` コンポーネント
    
@@ -450,7 +439,7 @@ HTML コンテンツは `html` 関数を使って宣言するか、単に文字
     ```
 
   </Tab>
-  <Tab label="Preact">
+  <Tab label="Preact" value="preact">
    
     #### `<HTMLRenderer />` コンポーネント
    
@@ -481,7 +470,7 @@ HTML コンテンツは `html` 関数を使って宣言するか、単に文字
     ```
 
   </Tab>
-  <Tab label="Solid">
+  <Tab label="Solid" value="solid">
    
     #### `<HTMLRenderer />` コンポーネント
    
@@ -512,7 +501,7 @@ HTML コンテンツは `html` 関数を使って宣言するか、単に文字
     ```
 
   </Tab>
-  <Tab label="Angular">
+  <Tab label="Angular" value="angular">
     #### `IntlayerMarkdownService` サービス
     サービスを使用してHTML文字列をレンダリングします。
 

package/docs/ja/dictionary/markdown.md

@@ -32,48 +32,12 @@ history:
 
 Intlayerは、マークダウン構文を使用して定義されたリッチテキストコンテンツをサポートします。これにより、ブログや記事などのリッチなフォーマットを簡単に作成および管理できます。
 
-## マークダウンの仕組み
-
-Intlayer v8 はコンテンツ文字列内のマークダウン構文を賢く検出します。文字列がマークダウンと判定されると、自動的にマークダウンノードに変換されます。
-
-<Columns>
-  <Column title="v7 の挙動（手動でラップ）">
-
-    ```typescript fileName="markdownDictionary.content.ts"
-    import { md } from "intlayer";
-
-    export default {
-      key: "app",
-      content: {
-        text: md("## My title \n\nLorem Ipsum"),
-      },
-    };
-    ```
-
-  </Column>
-  <Column title="v8 の挙動（自動検出）">
-
-    ```typescript fileName="markdownDictionary.content.ts"
-    export default {
-      key: "app",
-      contentAutoTransformation: true, // マークダウンコンテンツの自動検出を有効にする - intlayer.config.ts でグローバルに設定可能
-      content: {
-        text: "## My title \n\nLorem Ipsum",
-      },
-    };
-    ```
-
-  </Column>
-</Columns>
-
----
-
 ## パート 1: マークダウンコンテンツの宣言
 
 マークダウンコンテンツは `md` 関数を使って宣言するか、単に文字列として（マークダウン構文が含まれている場合）定義できます。
 
 <Tabs>
-  <Tab label="手動ラッピング">
+  <Tab label="手動ラッピング" value="manual-wrapping">
     `md` 関数を使用して明示的にマークダウンコンテンツを宣言します。これは、明らかな構文が含まれていない場合でも文字列をマークダウンとして扱いたい場合に便利です。
 
     ```typescript fileName="markdownDictionary.content.ts"
@@ -90,7 +54,7 @@ Intlayer v8 はコンテンツ文字列内のマークダウン構文を賢く
     ```
 
   </Tab>
-  <Tab label="自動検出">
+  <Tab label="自動検出" value="automatic-detection">
     文字列に一般的なマークダウン指標（ヘッダー、リスト、リンクなど）が含まれている場合、Intlayerは自動的にそれを変換します。
 
     ```typescript fileName="markdownDictionary.content.ts"
@@ -104,7 +68,7 @@ Intlayer v8 はコンテンツ文字列内のマークダウン構文を賢く
     ```
 
   </Tab>
-  <Tab label="外部ファイル">
+  <Tab label="外部ファイル" value="external-files">
     `file` 関数を使用して `.md` ファイルを直接インポートします。
 
     ```typescript fileName="markdownDictionary.content.ts"
@@ -135,7 +99,7 @@ Intlayer v8 はコンテンツ文字列内のマークダウン構文を賢く
 `useIntlayer` 経由でコンテンツにアクセスすると、マークダウンノードは既にレンダリング可能な状態になっています。
 
 <Tabs group="framework">
-  <Tab label="React / Next.js">
+  <Tab label="React / Next.js" value="react">
     マークダウンノードはそのまま JSX としてレンダリングできます。
 
     ```tsx fileName="App.tsx"
@@ -156,7 +120,7 @@ Intlayer v8 はコンテンツ文字列内のマークダウン構文を賢く
     ```
 
   </Tab>
-  <Tab label="Vue">
+  <Tab label="Vue" value="vue">
     Vueでは、マークダウンコンテンツを組み込みの `component` を使って、または直接ノードとしてレンダリングできます。
 
     ```vue fileName="App.vue"
@@ -171,7 +135,7 @@ Intlayer v8 はコンテンツ文字列内のマークダウン構文を賢く
     ```
 
   </Tab>
-  <Tab label="Svelte">
+  <Tab label="Svelte" value="svelte">
     SvelteはデフォルトでマークダウンをHTML文字列としてレンダリングします。`{@html}` を使ってレンダリングしてください。
 
     ```svelte
@@ -184,7 +148,7 @@ Intlayer v8 はコンテンツ文字列内のマークダウン構文を賢く
     ```
 
   </Tab>
-  <Tab label="Preact">
+  <Tab label="Preact" value="preact">
     PreactはJSXでマークダウンノードを直接サポートします。
 
     ```tsx fileName="App.tsx"
@@ -197,7 +161,7 @@ Intlayer v8 はコンテンツ文字列内のマークダウン構文を賢く
     ```
 
   </Tab>
-  <Tab label="Solid">
+  <Tab label="Solid" value="solid">
     SolidはJSXでマークダウンノードを直接サポートします。
 
     ```tsx fileName="App.tsx"
@@ -210,7 +174,7 @@ Intlayer v8 はコンテンツ文字列内のマークダウン構文を賢く
     ```
 
   </Tab>
-  <Tab label="Angular">
+  <Tab label="Angular" value="angular">
     Angularは `[innerHTML]` ディレクティブを使用してマークダウンコンテンツをレンダリングします。
 
     ```typescript fileName="app.component.ts"
@@ -242,7 +206,7 @@ Intlayer v8 はコンテンツ文字列内のマークダウン構文を賢く
 生のマークダウン文字列をレンダリングしたり、レンダリングプロセスをより詳細に制御したい場合は、次のツールを使用してください。
 
 <Tabs group="framework">
-  <Tab label="React / Next.js">
+  <Tab label="React / Next.js" value="react">
   
     #### `<MarkdownRenderer />` コンポーネント
 
@@ -281,7 +245,7 @@ Intlayer v8 はコンテンツ文字列内のマークダウン構文を賢く
     ```
 
   </Tab>
-  <Tab label="Vue">
+  <Tab label="Vue" value="vue">
 
     #### `<MarkdownRenderer />` コンポーネント
 
@@ -296,7 +260,7 @@ Intlayer v8 はコンテンツ文字列内のマークダウン構文を賢く
     ```
 
   </Tab>
-  <Tab label="Svelte">
+  <Tab label="Svelte" value="svelte">
 
     #### `<MarkdownRenderer />` コンポーネント
 
@@ -330,7 +294,7 @@ Intlayer v8 はコンテンツ文字列内のマークダウン構文を賢く
     ```
 
   </Tab>
-  <Tab label="Preact">
+  <Tab label="Preact" value="preact">
     #### `<MarkdownRenderer />` コンポーネント
 
     ```tsx
@@ -360,7 +324,7 @@ Intlayer v8 はコンテンツ文字列内のマークダウン構文を賢く
     ```
 
   </Tab>
-  <Tab label="Solid">
+  <Tab label="Solid" value="solid">
     #### `<MarkdownRenderer />` コンポーネント
 
     ```tsx
@@ -390,7 +354,7 @@ Intlayer v8 はコンテンツ文字列内のマークダウン構文を賢く
     ```
 
   </Tab>
-  <Tab label="Angular">
+  <Tab label="Angular" value="angular">
     #### `IntlayerMarkdownService` サービス
     サービスを使用してマークダウン文字列をレンダリングします。
 
@@ -416,7 +380,7 @@ Intlayer v8 はコンテンツ文字列内のマークダウン構文を賢く
 アプリ全体でマークダウンレンダリングをグローバルに設定できます。これにより、すべてのレンダラーに同じプロップを渡す手間が省けます。
 
 <Tabs group="framework">
-  <Tab label="React / Next.js">
+  <Tab label="React / Next.js" value="react">
 
     ```tsx fileName="AppProvider.tsx"
     import { MarkdownProvider } from "react-intlayer";
@@ -436,7 +400,7 @@ Intlayer v8 はコンテンツ文字列内のマークダウン構文を賢く
     ```
 
   </Tab>
-  <Tab label="Vue">
+  <Tab label="Vue" value="vue">
 
     ```typescript fileName="main.ts"
     import { createApp } from "vue";
@@ -461,7 +425,7 @@ Intlayer v8 はコンテンツ文字列内のマークダウン構文を賢く
     ```
 
   </Tab>
-  <Tab label="Svelte">
+  <Tab label="Svelte" value="svelte">
 
     ```svelte fileName="App.svelte"
     <script lang="ts">
@@ -481,7 +445,7 @@ Intlayer v8 はコンテンツ文字列内のマークダウン構文を賢く
     ```
 
   </Tab>
-  <Tab label="Preact">
+  <Tab label="Preact" value="preact">
 
     ```tsx fileName="AppProvider.tsx"
     import { MarkdownProvider } from "preact-intlayer";
@@ -500,7 +464,7 @@ Intlayer v8 はコンテンツ文字列内のマークダウン構文を賢く
     ```
 
   </Tab>
-  <Tab label="Solid">
+  <Tab label="Solid" value="solid">
 
     ```tsx fileName="AppProvider.tsx"
     import { MarkdownProvider } from "solid-intlayer";
@@ -519,7 +483,7 @@ Intlayer v8 はコンテンツ文字列内のマークダウン構文を賢く
     ```
 
   </Tab>
-  <Tab label="Angular">
+  <Tab label="Angular" value="angular">
 
     ```typescript fileName="app.config.ts"
     import { createIntlayerMarkdownProvider } from "angular-intlayer";

package/docs/ja/releases/v8.md

@@ -12,6 +12,7 @@ keywords:
   - Next.js
   - JavaScript
   - TypeScript
+youtubeVideo: https://www.youtube.com/watch?v=ia6JmVf-kkU
 slugs:
   - doc
   - releases
@@ -22,6 +23,14 @@ slugs:
 
 Intlayer v8 へようこそ！このリリースでは、自動コンテンツ検出による開発者体験の向上、スキーマ検証によるデータ整合性の確保、辞書管理に対するより細かい制御の提供に注力しています。
 
+<iframe
+  src="https://www.youtube.com/embed/ia6JmVf-kkU"
+  className="m-auto overflow-hidden rounded-lg border-0 max-md:size-full max-md:h-[700px] md:aspect-16/9 md:w-full"
+  title="Demo Video - New Intlayer v8 - What's new?"
+  sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
+  loading="lazy"
+/>
+
 ## 目次
 
 <TOC levels={[2]} maxDepth={1} />
@@ -1198,8 +1207,8 @@ Svelte 内の Markdown および HTML コンテンツは、文字列化（string
 
 ### 設定の変更
 
-- **`live` プロパティ**: 辞書内の `live` プロパティは非推奨になりました。代わりに `importMode: 'fetch'` を使用してください。
-- **統合されたリッチコンテンツ API**: 新しい `.use()` メソッドは、Markdown と HTML の両方の上書きに使用されるようになり、すべてのリッチコンテンツタイプで一貫した API を提供します。
+- **`live` プロパティ**: 辞書内の `live` プロパティは削除されました。代わりに `importMode: 'fetch'` を使用してください。
+- **importMode**: 設定内の `build.importMode` プロパティは非推奨になりました。代わりに `dictionary.importMode` を使用してください。
 - **`contentDir` と `codeDir`**: `contentDir` はコンテンツファイル専用になりました。コード変換用に新しく `codeDir` プロパティが追加されました。`codeDir` が設定されていない場合、Intlayer は `contentDir` にフォールバックし、警告をログに出力します。
 - **スキーマ検証**: 新しい `schema` 機能を使用するには、プロジェクトに `zod` がインストールされていることを確認してください。
 

package/docs/ko/dictionary/content_file.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2025-02-07
-updatedAt: 2026-01-24
+updatedAt: 2026-01-28
 title: 콘텐츠 파일
 description: 콘텐츠 선언 파일의 확장자를 사용자 정의하는 방법을 배우세요. 이 문서를 따라 프로젝트에서 조건을 효율적으로 구현하세요.
 keywords:
@@ -12,6 +12,9 @@ slugs:
   - concept
   - content
 history:
+  - version: 8.0.0
+    date: 2026-01-28
+    changes: `html` 콘텐츠 노드 타입 추가
   - version: 8.0.0
     date: 2026-01-24
     changes: Rename `live` import mode to `fetch` to better describe the underlying mechanism.
@@ -81,6 +84,7 @@ interface Content {
   quantityContent: string;
   conditionalContent: string;
   markdownContent: never;
+  htmlContent: never;
   externalContent: string;
   insertionContent: string;
   nestedContent: string;
@@ -126,6 +130,7 @@ export default {
     fileContent: file("./path/to/file.txt"),
     externalContent: fetch("https://example.com").then((res) => res.json()),
     markdownContent: md("# 마크다운 예제"),
+    htmlContent: html("<p>Hello <strong>World</strong></p>"),
 
     /*
      * `react-intlayer` 또는 `next-intlayer`를 사용할 때만 사용 가능
@@ -175,6 +180,7 @@ export default {
       "login.button" // [선택 사항] 중첩할 콘텐츠의 경로
     ),
     markdownContent: md("# 마크다운 예제"),
+    htmlContent: html("<p>Hello <strong>World</strong></p>"),
     fileContent: file("./path/to/file.txt"),
     externalContent: fetch("https://example.com").then((res) => res.json())
 
@@ -225,6 +231,7 @@ module.exports = {
       "login.button" // [선택 사항] 중첩할 콘텐츠 경로
     ),
     markdownContent: md("# 마크다운 예제"),
+    htmlContent: html("<p>Hello <strong>World</strong></p>"),
     fileContent: file("./path/to/file.txt"),
     externalContent: fetch("https://example.com").then((res) => res.json())
 
@@ -286,6 +293,10 @@ module.exports = {
       "nodeType": "markdown",
       "markdown": "# 마크다운 예제",
     },
+    "htmlContent": {
+      "nodeType": "html",
+      "html": "<p>Hello <strong>World</strong></p>",
+    },
     "fileContent": {
       "nodeType": "file",
       "file": "./path/to/file.txt",
@@ -320,6 +331,7 @@ Intlayer는 타입이 지정된 노드를 통해 다양한 콘텐츠 유형을
 - **열거형 콘텐츠**: 열거된 값에 따라 달라지는 콘텐츠 [열거형 콘텐츠 보기](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/dictionary/enumeration_content.md)
 - **삽입 콘텐츠**: 다른 콘텐츠에 삽입할 수 있는 콘텐츠 [삽입 콘텐츠 보기](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/dictionary/insertion_content.md)
 - **Markdown Content**: 마크다운 형식의 리치 텍스트 콘텐츠 [Markdown Content 보기](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/dictionary/markdown_content.md)
+- **HTML Content**: 선택적 사용자 정의 컴포넌트가 있는 리치 HTML 콘텐츠 [HTML Content 보기](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/dictionary/html.md)
 - **Nested Content**: 다른 사전을 참조하는 콘텐츠 [Nested Content 보기](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/dictionary/nested_content.md)
 - **Gender Content**: 성별에 따라 달라지는 콘텐츠 [Gender Content 보기](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/dictionary/gender_content.md)
 - **File Content**: 외부 파일을 참조하는 콘텐츠 [File Content 보기](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/dictionary/file_content.md)
@@ -712,6 +724,23 @@ markdownContent: md(
 );
 ```
 
+### HTML 콘텐츠 (`html`)
+
+표준 태그 또는 사용자 정의 컴포넌트를 사용할 수 있는 리치 HTML 콘텐츠:
+
+```typescript
+import { html, file, t } from "intlayer";
+
+// 인라인 HTML
+htmlContent: html("<p>Hello <strong>World</strong></p>");
+
+// 외부 파일의 로케일별 HTML
+localizedHtmlContent: t({
+  en: html(file("./content.en.html")),
+  ko: html(file("./content.ko.html")),
+});
+```
+
 ### 성별에 따른 콘텐츠 (`gender`)
 
 성별에 따라 달라지는 콘텐츠: