Passage de React-Markdown à Marked

Pourquoi utiliser Marked avec Strapi ?

Sur Strapi, lorsque l'on crée son modèle de données, le champs Rich Text, idéal pour un article de blog est écrit en Markdown.

Cela est pratique pour écrire quelque chose rapidement et en tant que développeur, car ce langage se veut relativement simpliste.

Dernièrement, je vous disais que j'avais choisi React-Markdown pour interprété le markdown généré par mon contenu. C'était vraiment pas mal, mais j'ai fini par revenir sur ma décision afin de mettre un outil plus complet, capable d’interpréter du HTML, créer des comportement Custom, etc...

Remplacement de la librairie React-Markdown

On installe notre librairie Marked :

yarn add marked hljs
yarn add -D @types/marked

N'hésitez pas à regarder la documentation pour en savoir plus sur Marked .

Dans ma page :

import { marked } from 'marked'
import hljs from 'highlight.js'
import MarkdownLink from '@components/markdown-link'

import 'highlight.js/styles/atom-one-dark.css'

marked.setOptions({
  highlight: (code, language) =>
    language ? hljs.highlight(language, code).value : hljs.highlightAuto(code).value,
})

marked.use({ renderer: MarkdownLink })

function MyPage () {
  // ... init
  
  return (
    // ... components
    <div
      className={classNames('w-full mb-4', s['article'])}
      dangerouslySetInnerHTML={{
        __html: marked(post.attributes.content),
      }}
    ></div>
  )
}

export default MyPage

Voici mon composant pour personnaliser les liens :

// @components/markdown-link

import { Renderer } from 'marked'

const MarkdownLink: Partial<Omit<Renderer<false>, 'constructor' | 'options'>> = {
  link(href: string, title: string, text: string) {
    return `<a href="${href}" target="_blank" rel="noreferrer" ${
      title ? 'title="' + title + '"' : ''
    }>
        ${text}
      </a>`
  },
}

export default MarkdownLink

Il n'aura pas fallu plus de lignes pour pouvoir remplacer React-Markdown par Marked. Donc au niveau de la mise en place, on va dire que c'est très simple.

Qu'est-ce qui a réellement changé avec Marked

Désormais, je peux mettre des balises HTML dans le markdown et elles seront directement interprété ensuite. C'est vraiment très pratique, surtout que Next fait un premier render côté back, et d'après les tests, j'obtiens une page déjà rendue avec le Markdown interprété et un résultat très propre pour le référencement.

Il y a tout de même un petit bémol, cette opération n'aura pas été sans inconvénients, car le revers de la médaille, c'est que désormais au build je suis passé de 173ko à > 400ko sur la page de lecture d'article à cause de la taille des bundles depuis l'ajout de Marked.

J'imagine que cela génère quelques lenteurs au chargement de la page, mais d'après les tests cela reste raisonnable et ne gène en rien le confort de navigation.

Voilà, pour ma part je continuerai à améliorer le blog petit à petit, tout en sachant que j'ai déjà commencé à faire de nouveaux projets, mais je vous en dirai plus prochainement. 😃