Mejore Astro con componentes Markdown

Hay dos formas de mejorar Markdown en proyectos Astro:

1. A través de MDX
2. A través del componente Markdown

Este artículo se centra en los componentes de Markdown.

Por qué utilizar elementos Markdown

Utilizo elementos Markdown por dos razones principales:

1. Reduce la cantidad de marcado que necesito escribir.
2. Convierte símbolos tipográficos, p. ' a la cotización de apertura o cierre (' o ').

Entonces, puedo omitir algunas etiquetas HTML, por ejemplo. <p>, <strong>, <em>, <ul>, <ol>, <li>y <a>. También puedo omitir la etiqueta del título si no necesito agregarle una clase.

<div class="card">
  <!-- prettier-ignore -->
  <Markdown>
    ## Card Title
    This is a paragraph with **strong** and *italic* text.
    This is the second paragraph with a (link)(https://link-somewhere.com)

    - List
    - Of
    - Items
  </Markdown>
</div>

Aviso prettier-ignore ¿Comentario? Le dice más bonito que no formatee el contenido interno. <Markdown> Bloquear para que Prettier no arruine mi contenido de Markdown.

La salida HTML es la siguiente:

<div class="card">
  <h2> Card Title </h2>
  <p>This is a paragraph with <strong>strong</strong> and <em>italic</em> text.</p>
  <p>This is the second paragraph with a <a href="https://link-somewhere.com">link</a></p>

  <ul>
    <li> List </li>
    <li> Of </li>
    <li> Items </li>
  </ul>
</div>

Instalar componentes de Markdown

Dato curioso: Astro viene con un <Markdown> componente en su versión anterior, pero esto <Markdown> El componente es Migrado a un complemento independiente en la versión 1y Completamente eliminado en la versión 3..

Me siento incómodo con esto. Pero decidí crear un elemento Markdown porque me gusta usarlo. Puedes ver la documentación aquí..

Usar los componentes de Markdown es fácil: simplemente impórtalos y úsalos como te mostré arriba.

---
import { Markdown } from '@splendidlabz/astro'
---

<Markdown>
  ...
</Markdown>

Respetar automáticamente la sangría

Puedes escribir Markdown de forma natural, tal como escribirías contenido normalmente. Este elemento Markdown detecta sangría y genera los valores correctos (sin envolverlos en <pre> y <code> Etiqueta).

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

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

Esta es la salida:

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

opciones en línea

hay uno inline las opciones dicen <Markdown> El componente no genera etiquetas de párrafo.

<h2 class="max-w-(12em)">
  <Markdown inline> Ain't this cool? </Markdown>
</h2>

Esta es la salida:

<h2 class="max-w-(12em)">
  Ain't this cool?
</h2>

Trampas y advertencias

Más bella en mal estado <!-- prettier-ignore --> Bloquee si hay caracteres Unicode como emojis y guiones en cualquier lugar anterior.

Este es el código original:

<!-- prettier-ignore -->
<Markdown>
  Markdown block that contains Unicode characters 🤗
</Markdown>

<!-- prettier-ignore -->
<Markdown>
  Second Markdown block.
</Markdown>

Se ve así después de guardar:

<!-- prettier-ignore -->
<Markdown>
  Markdown block that contains unicode characters 🤗
</Markdown>

<!-- prettier-ignore -->
<Markdown>
  Second Markdown block.
</Markdown>

Desafortunadamente, no hay nada que podamos hacer con los emojis, ya que el problema surge del formateador de Prettier.

Sin embargo, podemos utilizar en y em guión de escritura -- y ---respectivamente.

Soluciones de contenido

Puedes evitar que Prettier destruya todos estos <!-- prettier-ignore --> ¡Comenta sin usarlos!

Para hacer esto, solo necesitas poner el contenido en content propiedad. Tampoco hay necesidad de preocuparse por los espacios en blanco: eso ya está hecho por usted.

<Markdown content=`
  This is a paragraph

  This is another paragraph
`/>

Personalmente, no creo que se vea tan bien como la versión de máquina tragamonedas anterior…

¡Pero te permite usar Markdown directamente con cualquier contenido JS o json que cargues!

---
const content = `
  This is a paragraph

  This is another paragraph
`
---

<Markdown {content} />

ir más lejos

He estado construyendo con Astro durante más de 3 años y sigo encontrando los mismos puntos de fricción en sitios web ricos en contenido: páginas de blog, páginas con pestañas, paginación y una estructura de carpetas que se abarrota con el tiempo.

así que construí Astro práctico: sistema de contenidos — 7 soluciones listas para usar para flujos de trabajo de contenido de Astro (MDX es solo una de ellas). Obtienes el código y las ideas detrás de él.

Si desea un flujo de trabajo de contenido más limpio y tranquilo, compruébelo.

También escribí sobre el modo Astro y el uso de Tailwind + CSS. mi blog. ¡Ven a saludar!