Retour à l'accueil

Remplacer le composant <Markdown/> d'Astro

Le composant <Markdown/> d’Astro était bien pratique pour convertir du Markdown depuis une API. Mais il a depuis été délaissé.

On peut toujours l’ajouter à nos projets l’installant

npm i @astrojs/markdown-component

et

import Markdown from "@astrojs/markdown-component";

Mais cette solution ne devrait plus être viable très longtemps. L’alternative proposée par Astro est d’utiliser directement des fichiers .md avec leur intégration MDX, mais ça ne résout pas le problème du Markdown importé depuis un CMS headless.

Pour palier à cette absence, il est recommandé dans la doc d’utiliser votre propre convertisseur. En l’occurence, marked.

---
import { marked } from 'marked';
const response = await fetch('https://raw.githubusercontent.com/wiki/adam-p/markdown-here/Markdown-Cheatsheet.md');
const markdown = await response.text();
const content = marked.parse(markdown);
---
<article set:html={content} />

C’est un peu dommage car le composantmarchait vraiment bien, mais c’est rien c’est la rue.