Creation:2026-01-20Last update:2026-01-22

Referensikan dokumen ini ke asisten AI favorit Anda

ChatGPT

Claude

DeepSeek

Google AI mode Gemini

Perplexity Mistral

Grok

Ajukan pertanyaan Anda dan dapatkan ringkasan dokumen dengan merujuk halaman ini dan penyedia AI pilihan Anda

Dokumen ini sudah usang, versi dasar telah diperbarui pada 24 Maret 2026.

Buka dokumen bahasa Inggris

Riwayat Versi

"Add `intlayerHTML` plugin object; use `app.use(intlayerHTML)` instead of `app.use(installIntlayerHTML)`"
v8.5.024/3/2026
"move import from `{{framework}}-intlayer` to `{{framework}}-intlayer/html`"
v8.5.024/3/2026
"Menambahkan HTMLRenderer / useHTMLRenderer / utilitas renderHTML"
v8.0.022/1/2026
"Menambahkan dukungan parsing HTML"
v8.0.020/1/2026

Konten halaman ini diterjemahkan menggunakan AI.

Lihat versi terakhir dari konten aslinya dalam bahasa Inggris

Edit this doc

If you have an idea for improving this documentation, please feel free to contribute by submitting a pull request on GitHub.

GitHub link to the documentation

Copy

Copy doc Markdown to clipboard

Konten HTML / HTML di Intlayer

Name: Intlayer
Author: Intlayer

Intlayer mendukung konten HTML, memungkinkan Anda menyematkan konten yang kaya dan terstruktur dalam dictionaries Anda. Konten ini dapat dirender dengan tag HTML standar atau digantikan dengan komponen kustom saat runtime.

Mendeklarasikan Konten HTML

Anda dapat menyatakan konten HTML menggunakan fungsi html atau cukup sebagai string.

Gunakan fungsi html untuk secara eksplisit menyatakan konten HTML. Ini memastikan tag standar dipetakan dengan benar bahkan jika deteksi otomatis dinonaktifkan.

htmlDictionary.content.ts

Salin kode

Salin kode ke clipboard

import { html, type Dictionary } from "intlayer";const htmlDictionary = {  key: "app",  contentAutoTransformation: true, // dapat diatur di file konfigurasi  content: {    myHtmlContent:  html("<p>Hello <strong>World</strong></p>"),  },} satisfies Dictionary;export default htmlDictionary;

import { html, type Dictionary } from "intlayer";const htmlDictionary = {  key: "app",  contentAutoTransformation: true, // dapat diatur di file konfigurasi  content: {    myHtmlContent:  html("<p>Hello <strong>World</strong></p>"),  },} satisfies Dictionary;export default htmlDictionary;

Jika string berisi tag HTML umum (misalnya, <p>, <div>, <strong>, dll.), Intlayer akan secara otomatis mengubahnya.

htmlDictionary.content.ts

Salin kode

Salin kode ke clipboard

export default {  key: "app",  contentAutoTransformation: true, // dapat diatur di file konfigurasi  content: {    myHtmlContent:  "<p>Hello <strong>World</strong></p>",  },};

export default {  key: "app",  contentAutoTransformation: true, // dapat diatur di file konfigurasi  content: {    myHtmlContent:  "<p>Hello <strong>World</strong></p>",  },};

Impor konten HTML dari file. Perhatikan bahwa saat ini fungsi file() mengembalikan sebuah string, yang akan terdeteksi otomatis sebagai HTML jika mengandung tag.

htmlDictionary.content.ts

Salin kode

Salin kode ke clipboard

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, file, t } from "intlayer";export default {  key: "app",  content: {    content: t({      en: html(file("./content.en.html")),      fr: html(file("./content.fr.html")),    }),  },};

Node `html()`

Fungsi html() adalah fitur baru di Intlayer v8 yang memungkinkan Anda menentukan konten HTML secara eksplisit di kamus Anda. Meskipun Intlayer sering kali dapat mendeteksi konten HTML secara otomatis, penggunaan fungsi html() memberikan beberapa keuntungan:

Keamanan Tipe: Fungsi html() memungkinkan Anda menentukan props yang diharapkan untuk komponen kustom, memberikan pelengkapan otomatis dan pemeriksaan tipe yang lebih baik di editor Anda.
Deklarasi Eksplisit: Ini memastikan bahwa string selalu diperlakukan sebagai HTML, bahkan jika string tersebut tidak berisi tag HTML standar yang akan memicu deteksi otomatis.
Definisi Komponen Kustom: Anda dapat memberikan argumen kedua ke html() untuk menentukan komponen kustom dan tipe prop yang diharapkan.

typescript

Salin kode

Salin kode ke clipboard

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

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

Saat menggunakan metode .use() pada node HTML, komponen yang Anda berikan akan diperiksa terhadap definisi yang diberikan dalam fungsi html() (jika tersedia).

Merender HTML

Proses merender dapat ditangani secara otomatis oleh sistem konten Intlayer atau secara manual menggunakan alat khusus.

Perenderan Otomatis (menggunakan `useIntlayer`)

Saat Anda mengakses konten melalui useIntlayer, node HTML sudah disiapkan untuk dirender.

Node HTML dapat dirender langsung sebagai JSX. Tag standar bekerja secara otomatis.

App.tsx

Salin kode

Salin kode ke clipboard

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

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

Gunakan metode .use() untuk menyediakan komponen kustom atau menimpa tag:

tsx

Salin kode

Salin kode ke clipboard

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

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

Di Vue, konten HTML dapat dirender menggunakan built-in component.

App.vue

Salin kode

Salin kode ke clipboard

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

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

Gunakan .use() untuk override:

vue

Salin kode

Salin kode ke clipboard

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

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

Svelte merender node HTML sebagai string. Gunakan {@html} untuk merendernya.

svelte

Salin kode

Salin kode ke clipboard

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

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

Preact mendukung node HTML secara langsung di JSX.

App.tsx

Salin kode

Salin kode ke clipboard

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

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

Solid mendukung node HTML secara langsung di JSX.

App.tsx

Salin kode

Salin kode ke clipboard

import { useIntlayer } from "solid-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>;};

Angular menggunakan direktif [innerHTML] untuk merender konten HTML.

app.component.ts

Salin kode

Salin kode ke clipboard

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

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

Gunakan metode .use() untuk menyediakan komponen kustom atau menimpa tag:

typescript

Salin kode

Salin kode ke clipboard

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

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

Konfigurasi Global dengan `HTMLProvider`

Anda dapat mengonfigurasi rendering HTML secara global untuk seluruh aplikasi Anda. Ini ideal untuk mendefinisikan komponen kustom yang harus tersedia di semua konten HTML.

AppProvider.tsx

Salin kode

Salin kode ke clipboard

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    components={{      p: (props) => <p className="prose" {...props} />,      CustomLink: ({ children }) => <a href="/details">{children}</a>,    }}  >    {children}  </HTMLProvider>);

main.ts

Salin kode

Salin kode ke clipboard

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, {  components: {    p: (props, { slots }) => h("p", { class: "prose", ...props }, slots.default?.()),    CustomLink: (props, { slots }) => h("a", { href: "/details", ...props }, slots.default?.()),  },});app.mount("#app");

App.svelte

Salin kode

Salin kode ke clipboard

 <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";   import MyCustomP from "./MyCustomP.svelte"; </script> <HTMLProvider   components={{     p: MyCustomP,   }} >   <slot /> </HTMLProvider>

AppProvider.tsx

Salin kode

Salin kode ke clipboard

 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     components={{       p: (props) => <p className="prose" {...props} />,     }}   >     {children}   </HTMLProvider> );

AppProvider.tsx

Salin kode

Salin kode ke clipboard

 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     components={{       p: (props) => <p className="prose" {...props} />,     }}   >     {props.children}   </HTMLProvider> );

app.config.ts

Salin kode

Salin kode ke clipboard

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({      components: {        p: { class: "prose" },        CustomLink: { href: "/details" },      },    }),  ],};

Merender Manual & Alat Lanjutan

Jika Anda perlu merender string HTML mentah atau memiliki kontrol lebih atas pemetaan komponen, gunakan alat berikut.

Komponen `<HTMLRenderer />`

Merender string HTML dengan komponen tertentu.

tsx

Salin kode

Salin kode ke clipboard

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

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

`useHTMLRenderer()` Hook

Dapatkan fungsi renderer yang telah dikonfigurasi sebelumnya.

tsx

Salin kode

Salin kode ke clipboard

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

Utilitas `renderHTML()`

Utilitas mandiri untuk merender di luar komponen.

tsx

Salin kode

Salin kode ke clipboard

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

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

#### Komponen

<HTMLRenderer />

vue

Salin kode

Salin kode ke clipboard

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

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

Komponen `<HTMLRenderer />`

svelte

Salin kode

Salin kode ke clipboard

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

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

`useHTMLRenderer()` Hook

svelte

Salin kode

Salin kode ke clipboard

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

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

Utilitas `renderHTML()`

svelte

Salin kode

Salin kode ke clipboard

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

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

#### Komponen

<HTMLRenderer />

tsx

Salin kode

Salin kode ke clipboard

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

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

####

useHTMLRenderer() Hook

tsx

Salin kode

Salin kode ke clipboard

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

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

#### Utilitas

renderHTML()

tsx

Salin kode

Salin kode ke clipboard

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

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

#### Komponen

<HTMLRenderer />

tsx

Salin kode

Salin kode ke clipboard

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

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

####

useHTMLRenderer() Hook

tsx

Salin kode

Salin kode ke clipboard

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

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

#### Utilitas

renderHTML()

tsx

Salin kode

Salin kode ke clipboard

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

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

Layanan `IntlayerHTMLService`

Render string HTML menggunakan layanan tersebut.

typescript

Salin kode

Salin kode ke clipboard

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

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

Referensi Opsi

Opsi-opsi ini dapat diteruskan ke HTMLProvider, HTMLRenderer, useHTMLRenderer, dan renderHTML.

Tampilkan semua isi tabel

Buka tabel dalam modal untuk melihat semua isi data dengan jelas

Opsi	Tipe	Default	Deskripsi
`components`	`Record<string, any>`	`{}`	Peta dari tag HTML atau nama komponen kustom ke komponen.
`renderHTML`	`Function`	`null`	Fungsi render kustom untuk menggantikan sepenuhnya parser HTML default (Hanya untuk provider Vue/Svelte).

Catatan: Untuk React dan Preact, tag HTML standar disediakan secara otomatis. Anda hanya perlu meneruskan prop components jika ingin menimpanya atau menambahkan komponen kustom.

Markdown

Pengambilan fungsi

Riwayat Versi

Konten HTML / HTML di Intlayer

Mendeklarasikan Konten HTML

Node html()

Merender HTML

Perenderan Otomatis (menggunakan useIntlayer)

Konfigurasi Global dengan HTMLProvider

Merender Manual & Alat Lanjutan

Komponen <HTMLRenderer />

useHTMLRenderer() Hook

Utilitas renderHTML()

Referensi Opsi

Node `html()`

Perenderan Otomatis (menggunakan `useIntlayer`)

Konfigurasi Global dengan `HTMLProvider`

Komponen `<HTMLRenderer />`

`useHTMLRenderer()` Hook

Utilitas `renderHTML()`