Intégration de la Coloration Syntaxique avec Nuxt et NuxtContent

Dans la continuité des travaux technique, j'ai récemment mis à jour mon site en intégrant le support de la librairie Prism.js pour la coloration syntaxique. Cette optimisation vise à rendre la lecture du code plus agréable et accessible. Prism.js est une librairie réputée pour sa capacité à mettre en valeur la syntaxe de multiples langages de programmation. En l'incorporant à mon site, je cherche à offrir une lecture plus fluide et visuellement attractive de mes extraits de code, que ce soit dans mes articles techniques ou sur mes pages de projets.

Avantages Clés :

• Lisibilité Améliorée : La coloration syntaxique distingue clairement les éléments du code, facilitant la compréhension pour mes lecteurs.
• Compatibilité Étendue : Prism.js prend en charge un large éventail de langages, garantissant que tous mes extraits de code soient mis en valeur de manière optimale.
• Personnalisation : La flexibilité de Prism.js me permet d'ajuster la coloration selon mes préférences esthétiques et les besoins spécifiques de mon site.

Comment Intégrer Prism.js :

1. Installer nuxt-content
2. Ouvrir le fichier nuxt.config.ts et ajouter le bloc suivant:

  content: {
    highlight: {
      theme: "solarized-dark",
      preload: ['diff', 'ts', 'js', 'css', 'java', 'sql', 'yaml', 'json'],
    }
  },

Voilà un article bref mais qui apporte une meilleure expérience utilisateur.

Restez à l'affût pour plus d'optimisations et de fonctionnalités à venir !

Liens Utiles:

• Code source sur GitLab
• Contactez-moi