En mi artículo anterior hablé de Por qué y cómo utilizar elementos Markdown en Astro.
Aquí, ampliaremos eso y lo ayudaremos a usar Markdown en todas partes, sin importar qué marco use. Entonces esto funciona para React, Vue y Svelte.
Todo el proceso depende de utilidad de rebaja de precios he creado Laboratorio brillante.
¿Por qué utilizar esta utilidad?
Tengo problemas para usar la mayoría de las bibliotecas Markdown. Naturalmente, escribiría contenido de Markdown como este:
<div>
<div>
<!-- prettier-ignore -->
<Markdown>
This is a paragraph
This is a second paragraph
</Markdown>
</div>
</div>Pero como la mayoría de las bibliotecas Markdown no consideran espacios para sangría, crean una salida <pre> y <code> Etiqueta.
Esto se debe a que Markdown trata la sangría de más de cuatro espacios como un bloque de código:
<div>
<div>
<pre><code> This is a paragraph
This is a second paragraph
</code></pre>
</div>
</div>Entonces estás obligado a eliminar toda sangría y escribir así:
<div>
<div>
<!-- prettier-ignore -->
<Markdown>
This is a paragraph
This is a second paragraph
</Markdown>
</div>
</div>Esto es difícil de leer y molesto de mantener.
Mi utilidad Markdown puede manejar este problema de espaciado y producir HTML correcto sin importar la sangría de su código:
<div>
<div>
<p>This is a paragraph</p>
<p>This is a second paragraph</p>
</div>
</div>Úselo en su marco
Es fácil. Debe pasar el texto de Markdown a la utilidad. si inline Sí trueEntonces markdown Se devolverán los resultados sin etiquetas de párrafo.
Este es un ejemplo de 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} />Entonces puedes usarlo así:
<Markdown>
<!-- Your content here -->
</Markdown>Este es otro ejemplo de Svelte.
Svelte no puede leer contenido dinámico de las tragamonedas, por lo que solo podemos pasarlo a través de accesorios.
<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}Puedes usarlo así:
<Markdown content=`
### This is a header
This is a paragraph
`/>Crear el mismo contenido para React y Vue es bastante simple, así que te lo dejo a ti.
ir más lejos
He estado construyendo para la web, el tiempo suficiente para experimentar la frustración de hacer lo mismo una y otra vez.
Así que consolidé todo lo que uso en unas pocas bibliotecas simples, por ejemplo. Maravillosa herramienta de utilidadasí como algunos otros componentes de diseño, Astro y Svelte.
Escribí todo esto en mi blog. Si está interesado en un mejor DX al crear sitios web y aplicaciones, ¡venga!
