HTML-контент / HTML в Intlayer

export default {  key: "app",  contentAutoTransformation: true, // можно задать в файле конфигурации  content: {    myHtmlContent:  "<p>Привет <strong>Мир</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")),      ru: html(file("./content.ru.html")),    }),  },};

<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 { 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);      },    }),  ],};

 <script setup> import { HTMLRenderer } from "vue-intlayer/html"; </script> <template>   <HTMLRenderer content="<p>Привет, мир</p>" /> </template> 

<script lang="ts">import { HTMLRenderer } from "svelte-intlayer/html";</script><HTMLRenderer value="<p>Привет, мир</p>" />

<script lang="ts">import { useHTMLRenderer } from "svelte-intlayer/html";const render = useHTMLRenderer();</script>{@html render("<p>Привет, мир</p>")}

<script lang="ts">import { renderHTML } from "svelte-intlayer/html";</script>{@html renderHTML("<p>Привет, мир</p>")}

 import { HTMLRenderer } from "preact-intlayer/html"; <HTMLRenderer>   {"<p>Привет, мир</p>"} </HTMLRenderer> 

 import { useHTMLRenderer } from "preact-intlayer/html"; const render = useHTMLRenderer(); return <div>{render("<p>Привет, мир</p>")}</div>; 

 import { renderHTML } from "preact-intlayer/html"; return <div>{renderHTML("<p>Привет, мир</p>")}</div>; 

 import { HTMLRenderer } from "solid-intlayer/html"; <HTMLRenderer>   {"<p>Привет, мир</p>"} </HTMLRenderer> 

 import { useHTMLRenderer } from "solid-intlayer/html"; const render = useHTMLRenderer(); return <div>{render("<p>Привет, мир</p>")}</div>; 

 import { renderHTML } from "solid-intlayer/html"; return <div>{renderHTML("<p>Привет, мир</p>")}</div>; 

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