@intlayer/docs 8.10.0-canary.0 → 8.10.0

package/docs/pt/dictionary/markdown.md

@@ -2,7 +2,7 @@
 createdAt: 2025-02-07
 updatedAt: 2026-05-19
 title: Markdown
-description: Descubra como declarar e usar conteúdo Markdown no seu site multilíngue com o Intlayer. Siga os passos nesta documentação online para integrar o Markdown de forma simples ao seu projeto.
+description: Aprenda como declarar e usar conteúdo Markdown em seu site multilíngue com o Intlayer. Siga os passos nesta documentação online para integrar o Markdown de forma nativa ao seu projeto.
 keywords:
   - Markdown
   - Internacionalização
@@ -19,22 +19,22 @@ slugs:
 history:
   - version: 8.10.0
     date: 2026-05-19
-    changes: "Adicionar suporte a arquivos `.content.md`"
+    changes: "Adicionado suporte a arquivos `.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: "Adicionado o objeto plugin `intlayerMarkdown`; use `app.use(intlayerMarkdown)` em vez de `app.use(installIntlayerMarkdown)`"
   - version: 8.5.0
     date: 2026-03-24
-    changes: "mover a importação de {{framework}}-intlayer para {{framework}}-intlayer/markdown"
+    changes: "Movida a importação de `{{framework}}-intlayer` para `{{framework}}-intlayer/markdown`"
   - version: 8.0.0
     date: 2026-01-22
-    changes: "Adicionar MarkdownRenderer / useMarkdownRenderer / utilitário renderMarkdown e opção forceInline"
+    changes: "Adicionada a utilidade MarkdownRenderer / useMarkdownRenderer / renderMarkdown e a opção forceInline"
   - version: 8.0.0
     date: 2026-01-18
-    changes: "Decoração automática do conteúdo markdown, suporte MDX e SSR"
+    changes: "Decoração automática de conteúdo markdown, suporte a MDX e SSR"
   - version: 5.5.10
     date: 2025-06-29
-    changes: "Init history"
+    changes: "Histórico inicializado"
 ---
 
 # Markdown / Conteúdo de Texto Rico
@@ -43,27 +43,27 @@ O Intlayer suporta conteúdo de texto rico definido usando a sintaxe Markdown. I
 
 ## Declarando Conteúdo Markdown
 
-Você pode declarar conteúdo Markdown usando a função `md` ou simplesmente como uma string (se contiver sintaxe Markdown).
+Você pode declarar conteúdo Markdown usando a função `md` ou simplesmente como uma string (se ela contiver sintaxe Markdown).
 
 <Tabs>
   <Tab label=".content.md" value=".content.md">
-    A partir da versão `8.10.0`, você pode declarar conteúdo Markdown diretamente em arquivos `.content.md`. O Intlayer irá detectar e analisar automaticamente o conteúdo Markdown.
+    A partir da versão `8.10.0`, você pode declarar conteúdo Markdown diretamente em arquivos `.content.md`. O Intlayer detectará e processará automaticamente o conteúdo Markdown.
 
-    ```md fileName="markdown-file.pt.content.md"
+    ```md fileName="markdown-file.en.content.md"
     ---
-    key: meu-conteudo-markdown
+    key: my-markdown-content
     description: Meu conteúdo
-    locale: pt
+    locale: en
     ---
 
     # Meu conteúdo
 
-    Aqui está um exemplo de conteúdo Markdown
+    Aqui está um exemplo de conteúdo markdown
     ```
 
-    O campo frontmatter `locale` é o campo que define o idioma (locale) do conteúdo. É opcional. Se não for fornecido, o Intlayer usará o idioma padrão, que também é usado como idioma de fallback se nenhuma tradução estiver disponível para um idioma específico.
+    O campo `locale` no front-matter é o campo que define a localização do conteúdo. É opcional. Se não for fornecido, o Intlayer usará o idioma padrão, que também é usado como idioma de fallback caso não haja tradução disponível para um idioma específico.
 
-    Exemplo de estrutura de arquivos:
+    Exemplo de estrutura de diretórios:
 
     ```text
     content/
@@ -75,11 +75,11 @@ Você pode declarar conteúdo Markdown usando a função `md` ou simplesmente co
         └── markdown-file.es.content.md
     ```
 
-    Você pode adicionar no front-matter quaisquer propriedades definidas na [definição do Dicionário](https://github.com/aymericzip/intlayer/blob/main/docs/docs/pt/dictionary/content_file.md)
+    Você pode adicionar no front-matter quaisquer propriedades definidas na [Definição de Dicionário](https://github.com/aymericzip/intlayer/blob/main/docs/docs/pt/dictionary/content_file.md)
 
   </Tab>
-  <Tab label="Envolvimento Manual" value="manual-wrapping">
-    Use a função `md` para declarar explicitamente conteúdo Markdown. Isso é útil se você quiser garantir que uma string seja tratada como Markdown mesmo que não contenha sintaxe óbvia.
+  <Tab label="Empacotamento Manual" value="manual-wrapping">
+    Use a função `md` para declarar explicitamente o conteúdo Markdown. Isso é útil se você quiser garantir que uma string seja tratada como Markdown, mesmo que não contenha sintaxe óbvia.
 
     ```typescript fileName="markdownDictionary.content.ts"
     import { md, type Dictionary } from "intlayer";
@@ -95,34 +95,34 @@ Você pode declarar conteúdo Markdown usando a função `md` ou simplesmente co
     ```
 
   </Tab>
-  <Tab label="Detecção Automática" value="automatic-detection">
-    Se a string contiver indicadores comuns de Markdown (como cabeçalhos, listas, links, etc.), o Intlayer irá transformá-la automaticamente.
+  <Tab label="Arquivos Externos" value="external-files">
+    Importe arquivos `.md` diretamente usando a função `file`.
 
     ```typescript fileName="markdownDictionary.content.ts"
+    import { md, file, t } from "intlayer";
+
     export default {
       key: "app",
-      contentAutoTransformation: true, // Ativar a detecção automática de conteúdo Markdown - Pode ser definido globalmente em intlayer.config.ts
       content: {
-        myMarkdownContent: "## Meu título \n\nLorem Ipsum",
+        content: t({
+          en: md(file("./myMarkdown.en.md")),
+          pt: md(file("./myMarkdown.pt.md")),
+        }),
       },
     };
     ```
 
   </Tab>
-  <Tab label="Arquivos Externos" value="external-files">
-    Importe arquivos `.md` diretamente usando a função `file`.
 
-    ```typescript fileName="markdownDictionary.content.ts"
-    import { md, file, t } from "intlayer";
+  <Tab label="Detecção Automática" value="automatic-detection">
+    Se a string contiver indicadores Markdown comuns (como cabeçalhos, listas, links, etc.), o Intlayer a transformará automaticamente.
 
+    ```typescript fileName="markdownDictionary.content.ts"
     export default {
       key: "app",
+      contentAutoTransformation: true, // Ativar detecção automática de conteúdo Markdown - Pode ser definido globalmente em intlayer.config.ts
       content: {
-        content: t({
-          en: md(file("./myMarkdown.en.md")),
-          fr: md(file("./myMarkdown.fr.md")),
-          pt: md(file("./myMarkdown.pt.md")),
-        }),
+        myMarkdownContent: "## Meu título \n\nLorem Ipsum",
       },
     };
     ```
@@ -132,38 +132,74 @@ Você pode declarar conteúdo Markdown usando a função `md` ou simplesmente co
 
 ---
 
-## Renderização de Markdown
+## Renderizando Markdown
+
+O Intlayer fornece duas maneiras independentes de renderizar Markdown:
+
+1. **Através do `useIntlayer`**
+   — O Intlayer transforma automaticamente o nó `md` na saída nativa do framework (JSX, VNode, string HTML).
+   - O Frontmatter é analisado e exposto como `.metadata`. Você pode substituir a renderização em dois níveis — globalmente com `MarkdownProvider` (ou o equivalente do framework) e localmente por nó com `.use()`. Ambos podem ser combinados; `.use()` tem prioridade sobre `MarkdownProvider`, que por sua vez tem prioridade sobre o padrão.
 
-A renderização pode ser feita automaticamente pelo sistema de conteúdo do Intlayer ou manualmente usando ferramentas especializadas.
+2. **Utilitários auxiliares** — `<MarkdownRenderer />`, `useMarkdownRenderer()` e `renderMarkdown()` são ferramentas autônomas que aceitam **apenas strings Markdown brutas**. Elas são independentes do `useIntlayer` e não funcionam com os nós decorados que ele retorna.
 
-### 1. Renderização automática (usando `useIntlayer`)
+A renderização do Markdown suporta **MDX** — use qualquer componente JSX/framework por nome diretamente no seu Markdown.
 
-Quando você acessa conteúdo via `useIntlayer`, os nós Markdown já estão preparados para renderização.
+### 1. Renderização Automática (através de `useIntlayer`)
 
 <Tabs group="framework">
   <Tab label="React / Next.js" value="react">
-    Os nós Markdown podem ser renderizados diretamente como JSX.
+    Nós Markdown podem ser renderizados diretamente como 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} />, // Componente MDX
+        }}
+      >
+        <AppContent />
+      </MarkdownProvider>
+    );
     ```
 
+    > Se o `MarkdownProvider` não estiver presente, o Intlayer renderizará o markdown usando o parser padrão Markdown-para-JSX.
+
     Você também pode fornecer substituições locais para nós específicos usando o método `.use()`:
 
     ```tsx
     {myMarkdownContent.use({
-      h1: ({ children }) => <h1 className="text-3xl font-bold">{children}</h1>,
+      h1: ({ children }) => <h1 style={{ color: "red" }}>{children}</h1>,
     })}
     ```
 
+    Você pode recuperar o Markdown como string:
+
+    ```tsx
+    {myMarkdownContent.value}
+    {String(myMarkdownContent)}
+    {myMarkdownContent.toString()}
+    ```
+
+    E você pode acessar os metadados do markdown assim:
+
+    ```tsx
+    {myMarkdownContent.metadata}
+    {myMarkdownContent.metadata.title}
+    ```
+
   </Tab>
   <Tab label="Vue" value="vue">
-    No Vue, o conteúdo Markdown pode ser renderizado usando o built-in `component` ou diretamente como um nó.
+    No Vue, o conteúdo Markdown pode ser renderizado usando a tag nativa `component` ou diretamente como um nó.
 
     ```vue fileName="App.vue"
     <script setup>
@@ -176,48 +212,188 @@ Quando você acessa conteúdo via `useIntlayer`, os nós Markdown já estão pre
     </template>
     ```
 
+    Configure globalmente via plugin `intlayerMarkdown` (suporta componentes MDX personalizados):
+
+    ```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), // Componente MDX
+      },
+    });
+    ```
+
+    > Se o plugin `intlayerMarkdown` não estiver instalado, o Intlayer renderizará usando o compilador padrão.
+
+    Você também pode fornecer substituições locais para nós específicos usando o método `.use()`:
+
+    ```vue
+    <component :is="myMarkdownContent.use({
+      h1: (props) => h('h1', { style: { color: 'red' } }, props.children),
+    })" />
+    ```
+
+    Você pode recuperar o Markdown como string:
+
+    ```vue
+    {{ myMarkdownContent.value }}
+    {{ String(myMarkdownContent) }}
+    {{ myMarkdownContent.toString() }}
+    ```
+
+    E você pode acessar os metadados do markdown assim:
+
+    ```vue
+    <component :is="myMarkdownContent.metadata" />
+    <component :is="myMarkdownContent.metadata.title" />
+    ```
+
   </Tab>
   <Tab label="Svelte" value="svelte">
-    O Svelte renderiza Markdown como uma string HTML por padrão. Use `{@html}` para renderizá-lo.
+    O Svelte renderiza Markdown como string HTML por padrão. Use `{@html}` para renderizá-lo.
 
-    ```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>
+    ```
+
+    > Se o `MarkdownProvider` não estiver presente, o Intlayer renderizará o markdown usando o compilador padrão.
+
+    Você também pode fornecer substituições locais para nós específicos usando o método `.use()`:
+
+    ```svelte
+    {@html $content.myMarkdownContent.use({ ... })}
+    ```
+
+    Você pode recuperar o Markdown como string:
+
+    ```svelte
+    {$content.myMarkdownContent.value}
+    {String($content.myMarkdownContent)}
+    {$content.myMarkdownContent.toString()}
+    ```
+
+    E você pode acessar os metadados do markdown assim:
+
+    ```svelte
+    {$content.myMarkdownContent.metadata}
+    {$content.myMarkdownContent.metadata.title}
     ```
 
   </Tab>
   <Tab label="Preact" value="preact">
-    Preact suporta nós Markdown diretamente no JSX.
+    O Preact suporta nós Markdown diretamente em JSX.
 
     ```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} />, // Componente MDX
+        }}
+      >
+        <AppContent />
+      </MarkdownProvider>
+    );
+    ```
+
+    > Se o `MarkdownProvider` não estiver presente, o Intlayer renderizará o markdown usando o parser padrão Markdown-para-JSX.
+
+    Você também pode fornecer substituições locais para nós específicos usando o método `.use()`:
+
+    ```tsx
+    {myMarkdownContent.use({
+      h1: ({ children }) => <h1 style={{ color: "red" }}>{children}</h1>,
+    })}
+    ```
+
+    Você pode recuperar o Markdown como string:
+
+    ```tsx
+    {myMarkdownContent.value}
+    {String(myMarkdownContent)}
+    {myMarkdownContent.toString()}
+    ```
+
+    E você pode acessar os metadados do markdown assim:
+
+    ```tsx
+    {myMarkdownContent.metadata}
+    {myMarkdownContent.metadata.title}
     ```
 
   </Tab>
   <Tab label="Solid" value="solid">
-    Solid suporta nós Markdown diretamente no JSX.
+    O Solid suporta nós Markdown diretamente em JSX.
 
     ```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} />, // Componente MDX
+        }}
+      >
+        <AppContent />
+      </MarkdownProvider>
+    );
+    ```
+
+    > Se o `MarkdownProvider` não estiver presente, o Intlayer renderizará o markdown usando o parser padrão Markdown-para-JSX.
+
+    Você também pode fornecer substituições locais para nós específicos usando o método `.use()`:
+
+    ```tsx
+    {myMarkdownContent.use({
+      h1: (props) => <h1 style={{ color: "red" }}>{props.children}</h1>,
+    })}
+    ```
+
+    Você pode recuperar o Markdown como string:
+
+    ```tsx
+    {myMarkdownContent.value}
+    {String(myMarkdownContent)}
+    {myMarkdownContent.toString()}
+    ```
+
+    E você pode acessar os metadados do markdown assim:
+
+    ```tsx
+    {myMarkdownContent.metadata}
+    {myMarkdownContent.metadata.title}
     ```
 
   </Tab>
   <Tab label="Angular" value="angular">
-    Angular utiliza a diretiva `[innerHTML]` para renderizar conteúdo Markdown.
+    O Angular usa a diretiva `[innerHTML]` para renderizar conteúdo Markdown.
 
     ```typescript fileName="app.component.ts"
     import { Component } from "@angular/core";
@@ -232,6 +408,8 @@ Quando você acessa conteúdo via `useIntlayer`, os nós Markdown já estão pre
     }
     ```
 
+    > Se o provedor IntlayerMarkdown não estiver configurado, o Intlayer renderizará usando o compilador padrão.
+
     Você também pode fornecer substituições locais para nós específicos usando o método `.use()`:
 
     ```typescript
@@ -240,16 +418,35 @@ Quando você acessa conteúdo via `useIntlayer`, os nós Markdown já estão pre
     })
     ```
 
+    Você pode recuperar o Markdown como string:
+
+    ```typescript
+    content().myMarkdownContent.value
+    String(content().myMarkdownContent)
+    content().myMarkdownContent.toString()
+    ```
+
+    E você pode acessar os metadados do markdown assim:
+
+    ```typescript
+    content().myMarkdownContent.metadata
+    content().myMarkdownContent.metadata.title
+    ```
+
   </Tab>
 </Tabs>
 
-### 2. Renderização Manual e Ferramentas Avançadas
+### 2. Utilitários auxiliares (Somente Strings Markdown)
 
-Se precisar renderizar strings Markdown brutas ou tiver mais controlo sobre o processo de renderização, use as seguintes ferramentas.
+Estes utilitários renderizam **apenas strings Markdown brutas** e são independentes do `useIntlayer`. Use-os quando precisar renderizar Markdown de fontes além de seus dicionários.
 
 <Tabs group="framework">
   <Tab label="React / Next.js" value="react">
   
+    #### Componente `<MarkdownRenderer />`
+
+    Renderiza uma string Markdown com opções específicas.
+
     ```tsx
     import { MarkdownRenderer } from "react-intlayer/markdown";
 
@@ -260,7 +457,7 @@ Se precisar renderizar strings Markdown brutas ou tiver mais controlo sobre o pr
 
     #### Hook `useMarkdownRenderer()`
 
-    Obtenha uma função de renderização pré-configurada.
+    Obtém uma função de renderização pré-configurada.
 
     ```tsx
     import { useMarkdownRenderer } from "react-intlayer/markdown";
@@ -274,7 +471,7 @@ Se precisar renderizar strings Markdown brutas ou tiver mais controlo sobre o pr
     ```
 
     #### Utilitário `renderMarkdown()`
-    Utilitário independente para renderização fora de componentes.
+    Utilitário autônomo para renderização fora dos componentes.
 
     ```tsx
     import { renderMarkdown } from "react-intlayer/markdown";
@@ -394,7 +591,7 @@ Se precisar renderizar strings Markdown brutas ou tiver mais controlo sobre o pr
   </Tab>
   <Tab label="Angular" value="angular">
     #### Serviço `IntlayerMarkdownService`
-    Renderize uma string Markdown utilizando o serviço.
+    Renderiza uma string Markdown usando o serviço.
 
     ```typescript
     import { IntlayerMarkdownService } from "angular-intlayer/markdown";
@@ -415,7 +612,7 @@ Se precisar renderizar strings Markdown brutas ou tiver mais controlo sobre o pr
 
 ## Configuração Global com `MarkdownProvider`
 
-Você pode configurar a renderização de Markdown globalmente para toda a sua aplicação. Isso evita passar as mesmas props para cada renderer.
+O `MarkdownProvider` (ou o seu equivalente do framework) configura o pipeline de renderização Markdown para toda a sua aplicação. Aplica-se tanto para a renderização automática do `useIntlayer` quanto para os utilitários auxiliares. Opções definidas aqui são os padrões — o `.use()` substitui-os em nível de nó.
 
 <Tabs group="framework">
   <Tab label="React / Next.js" value="react">
@@ -426,8 +623,9 @@ Você pode configurar a renderização de Markdown globalmente para toda a sua a
     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}
@@ -435,7 +633,9 @@ Você pode configurar a renderização de Markdown globalmente para toda a sua a
     );
     ```
 
-    Você também pode usar o seu próprio renderizador de Markdown:
+    > O MDX é suportado — qualquer nome de componente usado dentro do seu Markdown (ex: `<MyCustomJSXComponent />`) é resolvido com base no mapa de `components`.
+
+    Você também pode usar seu próprio renderizador de markdown:
 
     ```tsx fileName="AppProvider.tsx"
     import { MarkdownProvider } from "react-intlayer/markdown";
@@ -443,8 +643,9 @@ Você pode configurar a renderização de Markdown globalmente para toda a sua a
     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}
@@ -452,7 +653,7 @@ Você pode configurar a renderização de Markdown globalmente para toda a sua a
     );
     ```
 
-    > Importar dinamicamente o seu renderizador de Markdown é uma boa maneira de reduzir o tamanho do pacote da sua aplicação.
+    > Importar dinamicamente o seu renderizador de Markdown é uma ótima maneira de reduzir o tamanho do pacote da sua aplicação.
 
   </Tab>
   <Tab label="Vue" value="vue">
@@ -479,7 +680,7 @@ Você pode configurar a renderização de Markdown globalmente para toda a sua a
     app.mount("#app");
     ```
 
-    Você também pode usar o seu próprio renderizador de Markdown:
+    Você também pode usar seu próprio renderizador de markdown:
 
     ```typescript fileName="main.ts"
     import { createApp } from "vue";
@@ -492,15 +693,15 @@ Você pode configurar a renderização de Markdown globalmente para toda a sua a
     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");
     ```
 
-    > Importar dinamicamente o seu renderizador de Markdown é uma boa maneira de reduzir o tamanho do pacote da sua aplicação.
+    > Importar dinamicamente o seu renderizador de Markdown é uma ótima maneira de reduzir o tamanho do pacote da sua aplicação.
 
   </Tab>
   <Tab label="Svelte" value="svelte">
@@ -520,7 +721,7 @@ Você pode configurar a renderização de Markdown globalmente para toda a sua a
     </MarkdownProvider>
     ```
 
-    Você também pode usar o seu próprio renderizador de Markdown:
+    Você também pode usar seu próprio renderizador de markdown:
 
     ```svelte fileName="App.svelte"
     <script lang="ts">
@@ -529,15 +730,15 @@ Você pode configurar a renderização de Markdown globalmente para toda a sua a
 
     <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>
     ```
 
-    > Importar dinamicamente o seu renderizador de Markdown é uma boa maneira de reduzir o tamanho do pacote da sua aplicação.
+    > Importar dinamicamente o seu renderizador de Markdown é uma ótima maneira de reduzir o tamanho do pacote da sua aplicação.
 
   </Tab>
   <Tab label="Preact" value="preact">
@@ -556,7 +757,7 @@ Você pode configurar a renderização de Markdown globalmente para toda a sua a
     );
     ```
 
-    Você também pode usar o seu próprio renderizador de Markdown:
+    Você também pode usar seu próprio renderizador de markdown:
 
     ```tsx fileName="AppProvider.tsx"
     import { MarkdownProvider } from "preact-intlayer/markdown";
@@ -564,8 +765,8 @@ Você pode configurar a renderização de Markdown globalmente para toda a sua a
     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}
@@ -573,7 +774,7 @@ Você pode configurar a renderização de Markdown globalmente para toda a sua a
     );
     ```
 
-    > Importar dinamicamente o seu renderizador de Markdown é uma boa maneira de reduzir o tamanho do pacote da sua aplicação.
+    > Importar dinamicamente o seu renderizador de Markdown é uma ótima maneira de reduzir o tamanho do pacote da sua aplicação.
 
   </Tab>
   <Tab label="Solid" value="solid">
@@ -592,7 +793,7 @@ Você pode configurar a renderização de Markdown globalmente para toda a sua a
     );
     ```
 
-    Você também pode usar o seu próprio renderizador de Markdown:
+    Você também pode usar seu próprio renderizador de markdown:
 
     ```tsx fileName="AppProvider.tsx"
     import { MarkdownProvider } from "solid-intlayer/markdown";
@@ -600,8 +801,8 @@ Você pode configurar a renderização de Markdown globalmente para toda a sua a
     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}
@@ -609,59 +810,29 @@ Você pode configurar a renderização de Markdown globalmente para toda a sua a
     );
     ```
 
-    > Importar dinamicamente o seu renderizador de Markdown é uma boa maneira de reduzir o tamanho do pacote da sua aplicação.
+    > Importar dinamicamente o seu renderizador de Markdown é uma ótima maneira de reduzir o tamanho do pacote da sua aplicação.
 
   </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" },
-          },
-        }),
-      ],
-    };
-    ```
-
-    Você também pode usar o seu próprio renderizador de 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 {}
     ```
 
-    > Importar dinamicamente o seu renderizador de Markdown é uma boa maneira de reduzir o tamanho do pacote da sua aplicação.
+    > Importar dinamicamente o seu renderizador de Markdown é uma ótima maneira de reduzir o tamanho do pacote da sua aplicação.
 
   </Tab>
 </Tabs>
-
----
-
-## Referência de Opções
-
-Essas opções podem ser passadas para `MarkdownProvider`, `MarkdownRenderer`, `useMarkdownRenderer` e `renderMarkdown`.
-
-| Opção                 | Tipo        | Padrão  | Descrição                                                                                            |
-| :-------------------- | :---------- | :------ | :--------------------------------------------------------------------------------------------------- |
-| `forceBlock`          | `boolean`   | `false` | Força a saída a ser envolvida em um elemento de nível de bloco (ex: `<div>`).                        |
-| `forceInline`         | `boolean`   | `false` | Força a saída a ser envolvida em um elemento inline (ex: `<span>`).                                  |
-| `tagfilter`           | `boolean`   | `true`  | Ativa o Filtro de Tags do GitHub para melhorar a segurança ao remover tags HTML perigosas.           |
-| `preserveFrontmatter` | `boolean`   | `false` | Se `true`, o frontmatter no início da string Markdown não será removido.                             |
-| `components`          | `Overrides` | `{}`    | Um mapa de tags HTML para componentes personalizados (ex: `{ h1: MyHeading }`).                      |
-| `wrapper`             | `Component` | `null`  | Um componente personalizado para envolver o Markdown renderizado.                                    |
-| `renderMarkdown`      | `Function`  | `null`  | Uma função de renderização personalizada para substituir completamente o compilador Markdown padrão. |