Comment configurer PrismJS et le plugin Autoloader avec Nuxt 3?
Dans un précédent article intitulé Comment rendre les mathématiques dans vue ou nuxt?, nous avons expliqué comment rendre des équations mathématiques dans Nuxt.js en utilisant un CDN local. Ce CDN local permet de charger facilement plusieurs bibliothèques JavaScript sans ralentir le chargement de la page.
PrismJS est une bibliothèque JavaScript légère qui permet de mettre en évidence les blocs de code sur vos pages. La configuration habituelle de PrismJS (voir Comment mettre en valeur la syntaxe des blocs de code dans Nuxt?) nécessite d'importer le fichier de presque tous les langages que vous souhaitez mettre en évidence. Par exemple, pour mettre en évidence TypeScript, vous devez ajouter import "prismjs/components/prism-typescript"
. Cela peut vite devenir fastidieux.
Heureusement, PrismJS propose plusieurs plugins qui étendent ses fonctionnalités. Le plugin Autoloader peut charger automatiquement les langages dont vous avez besoin, vous évitant ainsi d'importer individuellement les fichiers de tous les langages requis.
La méthode la plus simple pour charger le plugin Autoloader consiste à utiliser un CDN. Dans cet article, nous utiliserons la même méthode employée pour charger Mathjax afin de configurer PrismJS et son plugin Autoloader dans Nuxt 3.
Installation de PrismJS :
1. Téléchargez d'abord le code source de PrismJS à partir de Github :
https://github.com/PrismJS/prism/archive/refs/tags/v1.29.0.zip
Ou vous pouvez l'installer via npm :
npm install prismjs
2. Ensuite, déplacez le code source dans le répertoire public
de votre projet Nuxt. La structure du répertoire devrait ressembler à ceci :
Nuxt-app/
node_modules
pages
...
public/
prismjs
Configuration de nuxt.config.ts
3. Enfin, configurez votre fichier nuxt.config.ts
comme suit :
export default defineNuxtConfig({
css: [
"prismjs/themes/prism-tomorrow.css"
],
app: {
head: {
link: [{ rel: "icon", type: "image/png", href: "/favicon.svg" }],
script: [
{
src: "/prismjs/components/prism-core.min.js",
tagPosition: "bodyClose",
},
{
src: "/prismjs/plugins/autoloader/prism-autoloader.min.js",
tagPosition: "bodyClose",
},
]}
}
});
Remarque importante : Nous devons ajouter tagPosition: "bodyClose"
car les balises <script>
doivent être placées dans le corps du document (body
) et non dans l'en-tête (head
).
Maintenant, PrismJS chargera automatiquement tous les langages dont vous avez besoin. Il vous suffit d'appeler la fonction highlightAll()
pour mettre en évidence les blocs de code.
Pas encore de commentaire, ajoutez le premier.