Utilitário de componente Astro Markdown para qualquer estrutura

No artigo anterior, falei sobre por que e como usar um componente Markdown no Astro .

Aqui, vamos expandir isso e ajudá-lo a usar o Markdown em qualquer lugar – independentemente da estrutura que você usa. Então, isso funciona para React, Vue e Svelte.

Todo o processo depende do utilitário Markdown que criei para Splendid Labz .

Por que este utilitário?

Encontrei um obstáculo ao usar a maioria das bibliotecas Markdown. Naturalmente, escrevo conteúdo Markdown assim:

<div>
  <div>
    <!-- prettier-ignore -->
    <Markdown>
      This is a paragraph

      This is a second paragraph
    </Markdown>
  </div>
</div>

Mas como a maioria das bibliotecas de markdown não levam em conta o recuo de espaço em branco, elas criam uma saída com as tags <pre> e <code>.

Isso ocorre porque o Markdown trata o recuo além de quatro espaços como um bloco de código:

<div>
  <div>
    <pre><code>  This is a paragraph

      This is a second paragraph
    </code></pre>
  </div>
</div>

Então você é forçado a remover todo o recuo e escrever assim:

<div>
  <div>
    <!-- prettier-ignore -->
    <Markdown>
  This is a paragraph

  This is a second paragraph
    </Markdown>
  </div>
</div>

Isso é difícil de ler e chato de manter.

Meu utilitário Markdown lida com esse problema de espaço em branco e gera o HTML correto, independentemente de como seu código é recuado:

<div>
  <div>
    <p>This is a paragraph</p>
    <p>This is a second paragraph</p>
  </div>
</div>

Usando isso em sua estrutura

É fácil. Você deve passar o texto do Markdown para o utilitário. Se inline for true, então markdown retornará uma saída sem tags de parágrafo.

Aqui está um exemplo com Astro.

---
import { markdown } from '@splendidlabz/utils'
const { inline = false, content } = Astro.props
const slotContent = await Astro.slots.render('default')

// Process content
const html = markdown(content || slotContent, { inline })
---

<Fragment set:html={html} />

Você pode então usá-lo assim:

<Markdown>
   <!-- Your content here -->
</Markdown>

Aqui está outro exemplo para Svelte.

Svelte não pode ler conteúdo dinâmico de slots, então só podemos passá-lo através de um suporte.

<script>
  import { markdown } from '@splendidlabz/utils'
  const { content, inline = false } = $props()
  const html = markdown(content, { inline })
</script>

<!-- eslint-disable-next-line svelte/no-at-html-tags -->
{@html html}

E você pode usar assim:

<Markdown content=`
  ### This is a header

  This is a paragraph
`/>

É bastante simples construir o mesmo para React e Vue, então deixo isso para você.

Indo além

Tenho desenvolvido para a web — tempo suficiente para sentir a frustração de fazer as mesmas coisas repetidamente.

Então consolidei tudo que uso em algumas bibliotecas simples — como Splendid Utils , e algumas outras para layouts, componentes Astro e Svelte.

Escrevo sobre todos eles no meu blog . Venha se estiver interessado em um melhor DX ao construir seus sites e aplicativos!

Utilitário de componente Astro Markdown para qualquer estrutura originalmente escrito à mão e publicado com amor em CSS-Tricks . Você realmente deveria receber o boletim informativo também.