首页演练场案例展示应用文档博客
    • English英语
      EN
    • русский俄语
      RU
    • 日本語日语
      JA
    • français法语
      FR
    • 한국어韩语
      KO
    • 中文中文
      ZH
    • español西班牙语
      ES
    • Deutsch德语
      DE
    • العربية阿拉伯语
      AR
    • italiano意大利语
      IT
    • British English英国英语
      EN-GB
    • português葡萄牙语
      PT
    • हिन्दी印地语
      HI
    • Türkçe土耳其语
      TR
    • polski波兰语
      PL
    • Indonesia印度尼西亚语
      ID
    • Tiếng Việt越南语
      VI
    • українська乌克兰语
      UK
    /
    按框架筛选文档
    Alt+←
    为什么Intlayer？
    开始
    概念
    • Intlayer如何工作
    • 配置
    • TestFillBuildWatchExtractLoginPushPullConfigurationListVersionEditorLiveDebugDoc ReviewDoc TranslateSDK
    • 可视化编辑器
    • CMS
    • CI/CD集成
    • 翻译复数枚举条件性别插入文件嵌套MarkdownHTML函数获取
    • 每个语言环境的文件
    • 编译器
    • 自动填充
    • 测试
    • 打包优化
    环境
    • Next.js 14和应用路由器
      Next.js 15
      Next.js 无 locale URL
      Next.js和页面路由器
      编译器
    • Tanstack Start Solid
    • Astro和React
      Astro和Svelte
      Astro和Vue
      Astro和Solid
      Astro和Preact
      Astro和Lit
      Astro和Vanilla JS
    • React Router v7
      React Router v7 (fs-routes)
      Compiler
    • Nuxt和Vue
    • Vite和Solid
    • SvelteKit
    • Vite和Preact
    • Vite和Vanilla JS
    • Vite和Lit
    • Angular 19 (Webpack)
      Analog
    • React CRA
    • React Native和Expo
    • Express.js
      NestJS
      Fastify
      Hono
      Adonis
    • Lynx和React
    Plugins
    • JSON
    • gettext (.po)
    VS Code扩展
    代理
    • MCP服务器
    • 代理技能
    发布
    • v8
    • v7
    • v6
    基准测试
    • Next.js
    • TanStack
    • Vue
    • Solid
    • Svelte
    博客
    问问题
    1. Documentation
    3. 概念
    5. 内容声明
    7. HTML
    \n\n \n ```\n\n 使用 `.use()` 进行覆盖（overrides）：\n ```vue\n \n ```\n\n \n \n Svelte 将 HTML 节点呈现为字符串。使用 `{@html}` 来渲染它。\n\n ```svelte\n \n\n {@html $content.myHtmlContent}\n ```\n\n \n \n Preact 在 JSX 中直接支持 HTML 节点。\n\n ```tsx fileName=\"App.tsx\"\n import { useIntlayer } from \"preact-intlayer\";\n\n const AppContent = () => {\n const { myHtmlContent } = useIntlayer(\"app\");\n return
    {myHtmlContent}
    ;\n };\n ```\n\n     \n \n Solid 在 JSX 中直接支持 HTML 节点。\n\n ```tsx fileName=\"App.tsx\"\n import { useIntlayer } from \"solid-intlayer\";\n\n const AppContent = () => {\n const { myHtmlContent } = useIntlayer(\"app\");\n return
    {myHtmlContent}
    ;\n };\n ```\n\n     \n \n Angular 使用 `[innerHTML]` 指令来渲染 HTML 内容。\n\n ```typescript fileName=\"app.component.ts\"\n import { Component } from \"@angular/core\";\n import { useIntlayer } from \"angular-intlayer\";\n\n @Component({\n selector: \"app-root\",\n template: `
    `,\n })\n export class AppComponent {\n content = useIntlayer(\"app\");\n }\n ```\n\n 使用 `.use()` 方法可以提供自定义组件或覆盖标签：\n\n ```typescript\n content().myHtmlContent.use({\n p: { class: \"prose\" },\n CustomLink: { href: \"/details\" },\n })\n ```\n\n     \n\n\n## 使用 `HTMLProvider` 的全局配置\n\n您可以为整个应用全局配置 HTML 渲染。这非常适合定义应在所有 HTML 内容中可用的自定义组件。\n\n\n \n \n ```tsx fileName=\"AppProvider.tsx\"\n import { HTMLProvider } from \"react-intlayer/html\";\n\n export const AppProvider = ({ children }) => (\n

    ,\n CustomLink: ({ children }) => {children},\n }}\n >\n {children}\n \n );\n ```\n\n 您也可以使用自己的 HTML 渲染器：\n\n ```tsx fileName=\"AppProvider.tsx\"\n import { HTMLProvider } from \"react-intlayer/html\";\n\n export const AppProvider = ({ children }) => (\n {\n const { renderHTML } = await import('react-intlayer/html');\n return renderHTML(html);\n }}\n >\n {children}\n \n );\n ```\n\n > 动态导入 HTML 渲染器是减小应用程序包大小的好方法。\n\n \n \n \n ```typescript fileName=\"main.ts\"\n import { createApp, h } from \"vue\";\n import { intlayer } from \"vue-intlayer\";\n import { intlayerHTML } from \"vue-intlayer/html\";\n import App from \"./App.vue\";\n\n const app = createApp(App);\n\n app.use(intlayer);\n app.use(intlayerHTML, {\n components: {\n p: (props, { slots }) => h(\"p\", { class: \"prose\", ...props }, slots.default?.()),\n CustomLink: (props, { slots }) => h(\"a\", { href: \"/details\", ...props }, slots.default?.()),\n },\n });\n\n app.mount(\"#app\");\n ```\n\n 您也可以使用自己的 HTML 渲染器：\n\n ```typescript fileName=\"main.ts\"\n import { createApp, h } from \"vue\";\n import { intlayer } from \"vue-intlayer\";\n import { intlayerHTML } from \"vue-intlayer/html\";\n import App from \"./App.vue\";\n\n const app = createApp(App);\n\n app.use(intlayer);\n app.use(intlayerHTML, {\n renderHTML: async (html) => {\n const { renderHTML } = await import('vue-intlayer/html');\n return renderHTML(html);\n },\n });\n\n app.mount(\"#app\");\n ```\n\n > 动态导入 HTML 渲染器是减小应用程序包大小的好方法。\n\n \n \n \n ```svelte fileName=\"App.svelte\"\n \n\n \n \n \n ```\n\n 您也可以使用自己的 HTML 渲染器：\n\n ```svelte fileName=\"App.svelte\"\n \n\n {\n const { renderHTML } = await import('svelte-intlayer/html');\n return renderHTML(html);\n }}\n >\n \n \n ```\n\n > 动态导入 HTML 渲染器是减小应用程序包大小的好方法。\n\n \n \n \n ```tsx fileName=\"AppProvider.tsx\"\n import { HTMLProvider } from \"preact-intlayer/html\";\n\n export const AppProvider = ({ children }) => (\n

    ,\n }}\n >\n {children}\n \n );\n ```\n\n 您也可以使用自己的 HTML 渲染器：\n\n ```tsx fileName=\"AppProvider.tsx\"\n import { HTMLProvider } from \"preact-intlayer/html\";\n\n export const AppProvider = ({ children }) => (\n {\n const { renderHTML } = await import('preact-intlayer/html');\n return renderHTML(html);\n }}\n >\n {children}\n \n );\n ```\n\n > 动态导入 HTML 渲染器是减小应用程序包大小的好方法。\n\n \n \n \n ```tsx fileName=\"AppProvider.tsx\"\n import { HTMLProvider } from \"solid-intlayer/html\";\n\n export const AppProvider = (props) => (\n

    ,\n }}\n >\n {props.children}\n \n );\n ```\n\n 您也可以使用自己的 HTML 渲染器：\n\n ```tsx fileName=\"AppProvider.tsx\"\n import { HTMLProvider } from \"solid-intlayer/html\";\n\n export const AppProvider = (props) => (\n {\n const { renderHTML } = await import('solid-intlayer/html');\n return renderHTML(html);\n }}\n >\n {props.children}\n \n );\n ```\n\n > 动态导入 HTML 渲染器是减小应用程序包大小的好方法。\n\n \n \n\n ```typescript fileName=\"app.config.ts\"\n import { createIntlayerHTMLProvider } from \"angular-intlayer/html\";\n\n export const appConfig: ApplicationConfig = {\n providers: [\n createIntlayerHTMLProvider({\n components: {\n p: { class: \"prose\" },\n CustomLink: { href: \"/details\" },\n },\n }),\n ],\n };\n ```\n\n 您也可以使用自己的 HTML 渲染器：\n\n ```typescript fileName=\"app.config.ts\"\n import { createIntlayerHTMLProvider } from \"angular-intlayer/html\";\n\n export const appConfig: ApplicationConfig = {\n providers: [\n createIntlayerHTMLProvider({\n renderHTML: async (html) => {\n const { renderHTML } = await import('angular-intlayer/html');\n return renderHTML(html);\n },\n }),\n ],\n };\n ```\n\n > 动态导入 HTML 渲染器是减小应用程序包大小的好方法。\n\n \n\n\n---\n\n### 手动渲染与高级工具\n\n如果你需要渲染原始 HTML 字符串或对组件映射有更多控制，请使用以下工具。\n\n\n \n #### `` 组件\n \n ```tsx\n import { HTMLRenderer } from \"react-intlayer/html\";\n\n \n {\"

    Hello World

    \"}\n \n ```\n\n #### `useHTMLRenderer()` Hook\n 获取一个预配置的渲染器函数。\n\n ```tsx\n import { useHTMLRenderer } from \"react-intlayer/html\";\n\n const renderHTML = useHTMLRenderer({\n components: { strong: (props) => }\n });\n\n return renderHTML(\"

    Hello World

    \");\n ```\n\n #### `renderHTML()` 实用工具\n\n 用于在组件外进行渲染的独立实用工具。\n\n ```tsx\n import { renderHTML } from \"react-intlayer/html\";\n\n const jsx = renderHTML(\"

    Hello

    \", { components: { p: 'div' } });\n ```\n\n     \n \n \n #### `` 组件\n \n ```vue\n \n\n \n ```\n\n \n \n \n #### `` 组件\n \n ```svelte\n \n\n Hello World

    \" />\n ```\n\n #### `useHTMLRenderer()` Hook\n\n ```svelte\n \n\n {@html render(\"

    Hello World

    \")}\n ```\n\n #### `renderHTML()` 实用工具\n\n ```svelte\n \n\n {@html renderHTML(\"

    Hello World

    \")}\n ```\n\n     \n \n \n #### `` 组件\n \n ```tsx\n import { HTMLRenderer } from \"preact-intlayer/html\";\n\n \n {\"

    Hello World

    \"}\n     \n ```\n\n #### `useHTMLRenderer()` Hook\n\n ```tsx\n import { useHTMLRenderer } from \"preact-intlayer/html\";\n\n const render = useHTMLRenderer();\n\n return
    {render(\"

    Hello World

    \")}
    ;\n ```\n\n #### `renderHTML()` 实用工具\n\n ```tsx\n import { renderHTML } from \"preact-intlayer/html\";\n\n return
    {renderHTML(\"

    Hello World

    \")}
    ;\n ```\n\n     \n \n \n #### `` 组件\n \n ```tsx\n import { HTMLRenderer } from \"solid-intlayer/html\";\n\n \n {\"

    Hello World

    \"}\n     \n ```\n\n #### `useHTMLRenderer()` Hook\n\n ```tsx\n import { useHTMLRenderer } from \"solid-intlayer/html\";\n\n const render = useHTMLRenderer();\n\n return
    {render(\"

    Hello World

    \")}
    ;\n ```\n\n #### `renderHTML()` 实用工具\n\n ```tsx\n import { renderHTML } from \"solid-intlayer/html\";\n\n return
    {renderHTML(\"

    Hello World

    \")}
    ;\n ```\n\n     \n \n #### `IntlayerHTMLService` 服务\n 使用该服务渲染 HTML 字符串。\n\n ```typescript\n import { IntlayerHTMLService } from \"angular-intlayer/html\";\n\n export class MyComponent {\n constructor(private markdownService: IntlayerHTMLService) {}\n\n renderHTML(html: string) {\n return this.markdownService.renderHTML(html);\n }\n }\n ```\n\n \n    \n\n---\n\n## 选项参考\n\n这些选项可以传递给 `HTMLProvider`、`HTMLRenderer`、`useHTMLRenderer` 和 `renderHTML`。\n\n| 选项 | 类型 | 默认 | 说明 |\n| :----------- | :-------------------- | :----- | :--------------------------------------------------------------------------------- |\n| `components` | `Record` | `{}` | 一个将 HTML 标签或自定义组件名称映射到对应组件的映射表。 |\n| `renderHTML` | `Function` | `null` | 一个自定义渲染函数，用于完全替换默认的 HTML 解析器（仅适用于 Vue/Svelte 提供器）。 |\n\n> 注意：对于 React 和 Preact，标准 HTML 标签会自动提供。只有当你想覆盖它们或添加自定义组件时，才需要传入 `components` prop。\n","about":"了解如何在 Intlayer 中声明和使用带有自定义组件的 HTML 内容。按照本指南在你的国际化项目中嵌入具有动态组件替换功能的丰富类 HTML 内容。","url":"https://intlayer.org/zh/doc/concept/content/html","datePublished":"20-01-2026","dateModified":"24-03-2026","keywords":"HTML, 自定义组件, 富内容, Intlayer, Next.js, JavaScript, React, Vue, Svelte","license":"https://raw.githubusercontent.com/aymericzip/intlayer/refs/heads/main/LICENSE","audience":{"@type":"Audience","audienceType":"开发者，内容经理"}}
    Creation:2026-01-20Last update:2026-03-24
    将此文档参考到您的 AI 助手
    ChatGPT
    Claude
    DeepSeek
    Google AI mode    Gemini
    Perplexity    Mistral
    Grok

    使用您最喜欢的AI助手总结文档，并引用此页面和AI提供商

    版本历史

    1. "Add `intlayerHTML` plugin object; use `app.use(intlayerHTML)` instead of `app.use(installIntlayerHTML)`"
      v8.5.02026/3/24
    2. "将导入从 {{framework}}-intlayer 移动到 {{framework}}-intlayer/html"
      v8.5.02026/3/24
    3. "添加 HTMLRenderer / useHTMLRenderer / renderHTML 实用工具"
      v8.0.02026/1/22
    4. "添加 HTML 解析支持"
      v8.0.02026/1/20

    此页面的内容已使用 AI 翻译。

    查看英文原文的最新版本
    编辑此文档

    如果您有改善此文档的想法，请随时通过在GitHub上提交拉取请求来贡献。

    文档的 GitHub 链接
    Copy

    复制文档 Markdown 到剪贴板

    HTML 内容 / Intlayer 中的 HTML

    Intlayer 支持 HTML 内容，允许你在字典中嵌入丰富的结构化内容。此类内容可以使用标准 HTML 标签渲染，或在运行时替换为自定义组件。

    声明 HTML 内容

    您可以使用 html 函数声明 HTML 内容，或简单地将其作为字符串。

    使用 html 函数显式声明 HTML 内容。即使自动检测被禁用，这也能确保标准标签被正确映射。

    htmlDictionary.content.ts
    复制代码

    复制代码到剪贴板

    import { html, type Dictionary } from "intlayer";const htmlDictionary = {  key: "app",  contentAutoTransformation: true, // 可在配置文件中设置  content: {    myHtmlContent:  html("<p>Hello <strong>World</strong></p>"),  },} satisfies Dictionary;export default htmlDictionary;

    如果字符串包含常见的 HTML 标签（例如 <p>、<div>、<strong> 等），Intlayer 会自动将其识别为 HTML。

    htmlDictionary.content.ts
    复制代码

    复制代码到剪贴板

    export default {  key: "app",  contentAutoTransformation: true, // 可在配置文件中设置  content: {    myHtmlContent:  "<p>Hello <strong>World</strong></p>",  },};

    从文件导入 HTML 内容。注意，目前 file() 函数返回的是字符串，如果该字符串包含标签，则会被自动检测为 HTML。

    htmlDictionary.content.ts
    复制代码

    复制代码到剪贴板

    import { html, file, t } from "intlayer";export default {  key: "app",  content: {    content: t({      en: html(file("./content.en.html")),      fr: html(file("./content.fr.html")),    }),  },};

    html() 节点

    html() 函数是 Intlayer v8 中的一个新特性，它允许你在字典中显式定义 HTML 内容。虽然 Intlayer 通常可以自动检测 HTML 内容，但使用 html() 函数具有以下优势：

    • 类型安全：html() 函数允许你为自定义组件定义预期的 props，从而在编辑器中提供更好的自动补全和类型检查。
    • 显式声明：它确保字符串始终被视为 HTML，即使它不包含会触发自动检测的标准 HTML 标签。
    • 自定义组件定义：你可以向 html() 传递第二个参数来定义自定义组件及其预期的 prop 类型。
    typescript
    复制代码

    复制代码到剪贴板

    import { html } from "intlayer";const myContent = html(  "<MyCustomComponent title='你好'>世界</MyCustomComponent>",  {    MyCustomComponent: {      title: "string",      children: "node",    },  });

    在 HTML 节点上使用 .use() 方法时，你提供的组件将根据 html() 函数中提供的定义（如果可用）进行检查。

    渲染 HTML

    渲染可以由 Intlayer 的内容系统自动处理，也可以使用专用工具手动完成。

    自动渲染（使用 useIntlayer）

    通过 useIntlayer 访问内容时，HTML 节点已准备好渲染。

    HTML 节点可以直接作为 JSX 渲染。标准标签会自动生效。

    App.tsx
    复制代码

    复制代码到剪贴板

    import { useIntlayer } from "react-intlayer";const AppContent = () => {  const { myHtmlContent } = useIntlayer("app");  return <div>{myHtmlContent}</div>;};

    使用 .use() 方法可以提供自定义组件或覆盖标签：

    tsx
    复制代码

    复制代码到剪贴板

    {myHtmlContent.use({  p: (props) => <p className="prose" {...props} />,  CustomLink: ({ children }) => <a href="/details">{children}</a>,})}

    在 Vue 中，可以使用内置的 component 来渲染 HTML 内容。

    App.vue
    复制代码

    复制代码到剪贴板

    <script setup>import { useIntlayer } from "vue-intlayer";const { myHtmlContent } = useIntlayer("app");</script><template>  <component :is="myHtmlContent" /></template>

    使用 .use() 进行覆盖（overrides）：

    vue
    复制代码

    复制代码到剪贴板

    <component :is="myHtmlContent.use({ h1: 'h2' })" />

    Svelte 将 HTML 节点呈现为字符串。使用 {@html} 来渲染它。

    svelte
    复制代码

    复制代码到剪贴板

    <script lang="ts">import { useIntlayer } from "svelte-intlayer";const content = useIntlayer("app");</script>{@html $content.myHtmlContent}

    Preact 在 JSX 中直接支持 HTML 节点。

    App.tsx
    复制代码

    复制代码到剪贴板

    import { useIntlayer } from "preact-intlayer";const AppContent = () => {  const { myHtmlContent } = useIntlayer("app");  return <div>{myHtmlContent}</div>;};

    Solid 在 JSX 中直接支持 HTML 节点。

    App.tsx
    复制代码

    复制代码到剪贴板

    import { useIntlayer } from "solid-intlayer";const AppContent = () => {  const { myHtmlContent } = useIntlayer("app");  return <div>{myHtmlContent}</div>;};

    Angular 使用 [innerHTML] 指令来渲染 HTML 内容。

    app.component.ts
    复制代码

    复制代码到剪贴板

    import { Component } from "@angular/core";import { useIntlayer } from "angular-intlayer";@Component({  selector: "app-root",  template: `<div [innerHTML]="content().myHtmlContent"></div>`,})export class AppComponent {  content = useIntlayer("app");}

    使用 .use() 方法可以提供自定义组件或覆盖标签：

    typescript
    复制代码

    复制代码到剪贴板

    content().myHtmlContent.use({  p: { class: "prose" },  CustomLink: { href: "/details" },})

    使用 HTMLProvider 的全局配置

    您可以为整个应用全局配置 HTML 渲染。这非常适合定义应在所有 HTML 内容中可用的自定义组件。

    AppProvider.tsx
    复制代码

    复制代码到剪贴板

    import { HTMLProvider } from "react-intlayer/html";export const AppProvider = ({ children }) => (  <HTMLProvider    components={{      p: (props) => <p className="prose" {...props} />,      CustomLink: ({ children }) => <a href="/details">{children}</a>,    }}  >    {children}  </HTMLProvider>);

    您也可以使用自己的 HTML 渲染器：

    AppProvider.tsx
    复制代码

    复制代码到剪贴板

    import { HTMLProvider } from "react-intlayer/html";export const AppProvider = ({ children }) => (  <HTMLProvider    renderHTML={async (html) => {      const { renderHTML } = await import('react-intlayer/html');      return renderHTML(html);    }}  >    {children}  </HTMLProvider>);
    动态导入 HTML 渲染器是减小应用程序包大小的好方法。
    main.ts
    复制代码

    复制代码到剪贴板

    import { createApp, h } from "vue";import { intlayer } from "vue-intlayer";import { intlayerHTML } from "vue-intlayer/html";import App from "./App.vue";const app = createApp(App);app.use(intlayer);app.use(intlayerHTML, {  components: {    p: (props, { slots }) => h("p", { class: "prose", ...props }, slots.default?.()),    CustomLink: (props, { slots }) => h("a", { href: "/details", ...props }, slots.default?.()),  },});app.mount("#app");

    您也可以使用自己的 HTML 渲染器：

    main.ts
    复制代码

    复制代码到剪贴板

    import { createApp, h } from "vue";import { intlayer } from "vue-intlayer";import { intlayerHTML } from "vue-intlayer/html";import App from "./App.vue";const app = createApp(App);app.use(intlayer);app.use(intlayerHTML, {  renderHTML: async (html) => {    const { renderHTML } = await import('vue-intlayer/html');    return renderHTML(html);  },});app.mount("#app");
    动态导入 HTML 渲染器是减小应用程序包大小的好方法。
    App.svelte
    复制代码

    复制代码到剪贴板

     <script lang="ts">   import { HTMLProvider } from "svelte-intlayer/html";   import MyCustomP from "./MyCustomP.svelte"; </script> <HTMLProvider   components={{     p: MyCustomP,   }} >   <slot /> </HTMLProvider>

    您也可以使用自己的 HTML 渲染器：

    App.svelte
    复制代码

    复制代码到剪贴板

     <script lang="ts">   import { HTMLProvider } from "svelte-intlayer/html"; </script> <HTMLProvider   renderHTML={async (html) => {     const { renderHTML } = await import('svelte-intlayer/html');     return renderHTML(html);   }} >   <slot /> </HTMLProvider>
    > 动态导入 HTML 渲染器是减小应用程序包大小的好方法。
    AppProvider.tsx
    复制代码

    复制代码到剪贴板

     import { HTMLProvider } from "preact-intlayer/html"; export const AppProvider = ({ children }) => (   <HTMLProvider     components={{       p: (props) => <p className="prose" {...props} />,     }}   >     {children}   </HTMLProvider> );

    您也可以使用自己的 HTML 渲染器：

    AppProvider.tsx
    复制代码

    复制代码到剪贴板

     import { HTMLProvider } from "preact-intlayer/html"; export const AppProvider = ({ children }) => (   <HTMLProvider     renderHTML={async (html) => {       const { renderHTML } = await import('preact-intlayer/html');       return renderHTML(html);     }}   >     {children}   </HTMLProvider> );
    > 动态导入 HTML 渲染器是减小应用程序包大小的好方法。
    AppProvider.tsx
    复制代码

    复制代码到剪贴板

     import { HTMLProvider } from "solid-intlayer/html"; export const AppProvider = (props) => (   <HTMLProvider     components={{       p: (props) => <p className="prose" {...props} />,     }}   >     {props.children}   </HTMLProvider> );

    您也可以使用自己的 HTML 渲染器：

    AppProvider.tsx
    复制代码

    复制代码到剪贴板

     import { HTMLProvider } from "solid-intlayer/html"; export const AppProvider = (props) => (   <HTMLProvider     renderHTML={async (html) => {       const { renderHTML } = await import('solid-intlayer/html');       return renderHTML(html);     }}   >     {props.children}   </HTMLProvider> );
    > 动态导入 HTML 渲染器是减小应用程序包大小的好方法。
    app.config.ts
    复制代码

    复制代码到剪贴板

    import { createIntlayerHTMLProvider } from "angular-intlayer/html";export const appConfig: ApplicationConfig = {  providers: [    createIntlayerHTMLProvider({      components: {        p: { class: "prose" },        CustomLink: { href: "/details" },      },    }),  ],};

    您也可以使用自己的 HTML 渲染器：

    app.config.ts
    复制代码

    复制代码到剪贴板

    import { createIntlayerHTMLProvider } from "angular-intlayer/html";export const appConfig: ApplicationConfig = {  providers: [    createIntlayerHTMLProvider({      renderHTML: async (html) => {        const { renderHTML } = await import('angular-intlayer/html');        return renderHTML(html);      },    }),  ],};
    动态导入 HTML 渲染器是减小应用程序包大小的好方法。

    手动渲染与高级工具

    如果你需要渲染原始 HTML 字符串或对组件映射有更多控制，请使用以下工具。

    <HTMLRenderer /> 组件

    tsx
    复制代码

    复制代码到剪贴板

    import { HTMLRenderer } from "react-intlayer/html";<HTMLRenderer components={{ p: MyCustomP }}>  {"<p>Hello World</p>"}</HTMLRenderer>

    useHTMLRenderer() Hook

    获取一个预配置的渲染器函数。

    tsx
    复制代码

    复制代码到剪贴板

    import { useHTMLRenderer } from "react-intlayer/html";const renderHTML = useHTMLRenderer({  components: { strong: (props) => <strong {...props} className="text-red-500" /> }});return renderHTML("<p>Hello <strong>World</strong></p>");

    renderHTML() 实用工具

    用于在组件外进行渲染的独立实用工具。

    tsx
    复制代码

    复制代码到剪贴板

    import { renderHTML } from "react-intlayer/html";const jsx = renderHTML("<p>Hello</p>", { components: { p: 'div' } });
    ####

    <HTMLRenderer /> 组件

    vue
    复制代码

    复制代码到剪贴板

     <script setup> import { HTMLRenderer } from "vue-intlayer/html"; </script> <template>   <HTMLRenderer content="<p>Hello World</p>" /> </template>

    <HTMLRenderer /> 组件

    svelte
    复制代码

    复制代码到剪贴板

    <script lang="ts">import { HTMLRenderer } from "svelte-intlayer/html";</script><HTMLRenderer value="<p>Hello World</p>" />

    useHTMLRenderer() Hook

    svelte
    复制代码

    复制代码到剪贴板

    <script lang="ts">import { useHTMLRenderer } from "svelte-intlayer/html";const render = useHTMLRenderer();</script>{@html render("<p>Hello World</p>")}

    renderHTML() 实用工具

    svelte
    复制代码

    复制代码到剪贴板

    <script lang="ts">import { renderHTML } from "svelte-intlayer/html";</script>{@html renderHTML("<p>Hello World</p>")}
    ####

    <HTMLRenderer /> 组件

    tsx
    复制代码

    复制代码到剪贴板

     import { HTMLRenderer } from "preact-intlayer/html"; <HTMLRenderer>   {"<p>Hello World</p>"} </HTMLRenderer>
    ####

    useHTMLRenderer() Hook

    tsx
    复制代码

    复制代码到剪贴板

     import { useHTMLRenderer } from "preact-intlayer/html"; const render = useHTMLRenderer(); return <div>{render("<p>Hello World</p>")}</div>;
    ####

    renderHTML() 实用工具

    tsx
    复制代码

    复制代码到剪贴板

     import { renderHTML } from "preact-intlayer/html"; return <div>{renderHTML("<p>Hello World</p>")}</div>;
    ####

    <HTMLRenderer /> 组件

    tsx
    复制代码

    复制代码到剪贴板

     import { HTMLRenderer } from "solid-intlayer/html"; <HTMLRenderer>   {"<p>Hello World</p>"} </HTMLRenderer>
    ####

    useHTMLRenderer() Hook

    tsx
    复制代码

    复制代码到剪贴板

     import { useHTMLRenderer } from "solid-intlayer/html"; const render = useHTMLRenderer(); return <div>{render("<p>Hello World</p>")}</div>;
    ####

    renderHTML() 实用工具

    tsx
    复制代码

    复制代码到剪贴板

     import { renderHTML } from "solid-intlayer/html"; return <div>{renderHTML("<p>Hello World</p>")}</div>;

    IntlayerHTMLService 服务

    使用该服务渲染 HTML 字符串。

    typescript
    复制代码

    复制代码到剪贴板

    import { IntlayerHTMLService } from "angular-intlayer/html";export class MyComponent {  constructor(private markdownService: IntlayerHTMLService) {}  renderHTML(html: string) {    return this.markdownService.renderHTML(html);  }}

    选项参考

    这些选项可以传递给 HTMLProvider、HTMLRenderer、useHTMLRenderer 和 renderHTML。

    显示表格的所有内容

    在弹窗中打开表格以清晰地查看所有数据

    选项 类型 默认 说明
    components Record<string, any> {} 一个将 HTML 标签或自定义组件名称映射到对应组件的映射表。
    renderHTML Function null 一个自定义渲染函数，用于完全替换默认的 HTML 解析器（仅适用于 Vue/Svelte 提供器）。
    注意：对于 React 和 Preact，标准 HTML 标签会自动提供。只有当你想覆盖它们或添加自定义组件时，才需要传入 components prop。
    Markdown
    函数获取
    Alt+→

    在此页面

      讨论是匿名的，并会定期审查以解决常见问题。欢迎分享功能想法、对文档的反馈或任何与 Intlayer 相关的内容, 我们会利用这些意见来制定路线图并改进产品。

      import { html, type Dictionary } from "intlayer";const htmlDictionary = {  key: "app",  contentAutoTransformation: true, // 可在配置文件中设置  content: {    myHtmlContent:  html("<p>Hello <strong>World</strong></p>"),  },} satisfies Dictionary;export default htmlDictionary;
      export default {  key: "app",  contentAutoTransformation: true, // 可在配置文件中设置  content: {    myHtmlContent:  "<p>Hello <strong>World</strong></p>",  },};
      import { html, file, t } from "intlayer";export default {  key: "app",  content: {    content: t({      en: html(file("./content.en.html")),      fr: html(file("./content.fr.html")),    }),  },};
      import { html } from "intlayer";const myContent = html(  "<MyCustomComponent title='你好'>世界</MyCustomComponent>",  {    MyCustomComponent: {      title: "string",      children: "node",    },  });
      import { useIntlayer } from "react-intlayer";const AppContent = () => {  const { myHtmlContent } = useIntlayer("app");  return <div>{myHtmlContent}</div>;};
      {myHtmlContent.use({  p: (props) => <p className="prose" {...props} />,  CustomLink: ({ children }) => <a href="/details">{children}</a>,})}
      <script setup>import { useIntlayer } from "vue-intlayer";const { myHtmlContent } = useIntlayer("app");</script><template>  <component :is="myHtmlContent" /></template>
      <component :is="myHtmlContent.use({ h1: 'h2' })" />
      <script lang="ts">import { useIntlayer } from "svelte-intlayer";const content = useIntlayer("app");</script>{@html $content.myHtmlContent}
      import { useIntlayer } from "preact-intlayer";const AppContent = () => {  const { myHtmlContent } = useIntlayer("app");  return <div>{myHtmlContent}</div>;};
      import { useIntlayer } from "solid-intlayer";const AppContent = () => {  const { myHtmlContent } = useIntlayer("app");  return <div>{myHtmlContent}</div>;};
      import { Component } from "@angular/core";import { useIntlayer } from "angular-intlayer";@Component({  selector: "app-root",  template: `<div [innerHTML]="content().myHtmlContent"></div>`,})export class AppComponent {  content = useIntlayer("app");}
      content().myHtmlContent.use({  p: { class: "prose" },  CustomLink: { href: "/details" },})
      import { HTMLProvider } from "react-intlayer/html";export const AppProvider = ({ children }) => (  <HTMLProvider    components={{      p: (props) => <p className="prose" {...props} />,      CustomLink: ({ children }) => <a href="/details">{children}</a>,    }}  >    {children}  </HTMLProvider>);
      import { HTMLProvider } from "react-intlayer/html";export const AppProvider = ({ children }) => (  <HTMLProvider    renderHTML={async (html) => {      const { renderHTML } = await import('react-intlayer/html');      return renderHTML(html);    }}  >    {children}  </HTMLProvider>);
      import { createApp, h } from "vue";import { intlayer } from "vue-intlayer";import { intlayerHTML } from "vue-intlayer/html";import App from "./App.vue";const app = createApp(App);app.use(intlayer);app.use(intlayerHTML, {  components: {    p: (props, { slots }) => h("p", { class: "prose", ...props }, slots.default?.()),    CustomLink: (props, { slots }) => h("a", { href: "/details", ...props }, slots.default?.()),  },});app.mount("#app");
      import { createApp, h } from "vue";import { intlayer } from "vue-intlayer";import { intlayerHTML } from "vue-intlayer/html";import App from "./App.vue";const app = createApp(App);app.use(intlayer);app.use(intlayerHTML, {  renderHTML: async (html) => {    const { renderHTML } = await import('vue-intlayer/html');    return renderHTML(html);  },});app.mount("#app");
       <script lang="ts">   import { HTMLProvider } from "svelte-intlayer/html";   import MyCustomP from "./MyCustomP.svelte"; </script> <HTMLProvider   components={{     p: MyCustomP,   }} >   <slot /> </HTMLProvider> 
       <script lang="ts">   import { HTMLProvider } from "svelte-intlayer/html"; </script> <HTMLProvider   renderHTML={async (html) => {     const { renderHTML } = await import('svelte-intlayer/html');     return renderHTML(html);   }} >   <slot /> </HTMLProvider> 
       import { HTMLProvider } from "preact-intlayer/html"; export const AppProvider = ({ children }) => (   <HTMLProvider     components={{       p: (props) => <p className="prose" {...props} />,     }}   >     {children}   </HTMLProvider> ); 
       import { HTMLProvider } from "preact-intlayer/html"; export const AppProvider = ({ children }) => (   <HTMLProvider     renderHTML={async (html) => {       const { renderHTML } = await import('preact-intlayer/html');       return renderHTML(html);     }}   >     {children}   </HTMLProvider> ); 
       import { HTMLProvider } from "solid-intlayer/html"; export const AppProvider = (props) => (   <HTMLProvider     components={{       p: (props) => <p className="prose" {...props} />,     }}   >     {props.children}   </HTMLProvider> ); 
       import { HTMLProvider } from "solid-intlayer/html"; export const AppProvider = (props) => (   <HTMLProvider     renderHTML={async (html) => {       const { renderHTML } = await import('solid-intlayer/html');       return renderHTML(html);     }}   >     {props.children}   </HTMLProvider> ); 
      import { createIntlayerHTMLProvider } from "angular-intlayer/html";export const appConfig: ApplicationConfig = {  providers: [    createIntlayerHTMLProvider({      components: {        p: { class: "prose" },        CustomLink: { href: "/details" },      },    }),  ],};
      import { createIntlayerHTMLProvider } from "angular-intlayer/html";export const appConfig: ApplicationConfig = {  providers: [    createIntlayerHTMLProvider({      renderHTML: async (html) => {        const { renderHTML } = await import('angular-intlayer/html');        return renderHTML(html);      },    }),  ],};
      import { HTMLRenderer } from "react-intlayer/html";<HTMLRenderer components={{ p: MyCustomP }}>  {"<p>Hello World</p>"}</HTMLRenderer>
      import { useHTMLRenderer } from "react-intlayer/html";const renderHTML = useHTMLRenderer({  components: { strong: (props) => <strong {...props} className="text-red-500" /> }});return renderHTML("<p>Hello <strong>World</strong></p>");
      import { renderHTML } from "react-intlayer/html";const jsx = renderHTML("<p>Hello</p>", { components: { p: 'div' } });
       <script setup> import { HTMLRenderer } from "vue-intlayer/html"; </script> <template>   <HTMLRenderer content="<p>Hello World</p>" /> </template> 
      <script lang="ts">import { HTMLRenderer } from "svelte-intlayer/html";</script><HTMLRenderer value="<p>Hello World</p>" />
      <script lang="ts">import { useHTMLRenderer } from "svelte-intlayer/html";const render = useHTMLRenderer();</script>{@html render("<p>Hello World</p>")}
      <script lang="ts">import { renderHTML } from "svelte-intlayer/html";</script>{@html renderHTML("<p>Hello World</p>")}
       import { HTMLRenderer } from "preact-intlayer/html"; <HTMLRenderer>   {"<p>Hello World</p>"} </HTMLRenderer> 
       import { useHTMLRenderer } from "preact-intlayer/html"; const render = useHTMLRenderer(); return <div>{render("<p>Hello World</p>")}</div>; 
       import { renderHTML } from "preact-intlayer/html"; return <div>{renderHTML("<p>Hello World</p>")}</div>; 
       import { HTMLRenderer } from "solid-intlayer/html"; <HTMLRenderer>   {"<p>Hello World</p>"} </HTMLRenderer> 
       import { useHTMLRenderer } from "solid-intlayer/html"; const render = useHTMLRenderer(); return <div>{render("<p>Hello World</p>")}</div>; 
       import { renderHTML } from "solid-intlayer/html"; return <div>{renderHTML("<p>Hello World</p>")}</div>; 
      import { IntlayerHTMLService } from "angular-intlayer/html";export class MyComponent {  constructor(private markdownService: IntlayerHTMLService) {}  renderHTML(html: string) {    return this.markdownService.renderHTML(html);  }}