VueJS: Mise en évidence de la syntaxe de vos codes (syntax highligter)

Une façon de le mettre en place sur votre site VueJS est d'utiliser la dépendance vue-code-highlight, qui fonctionne sur le principe des composants VueJS.

Premièrement, installez vue-code-highlight

npm i vue-code-highlight

Ajoutez cette dépendance à votre fichier main.js:

import VueCodeHighlight from 'vue-code-highlight'; 
Vue.use(VueCodeHighlight) //registers the v-highlight directive

Puis ajoutez la balise suivante dans le composant qui accueillera le code à afficher:

<div v-highlight >
  //code à afficher ici
</div>

Une fois cela fait, il ne vous reste plus qu'à afficher le code en utilisant les balises de cette manière:

<pre class="language-javascript">
    <code>
        console.log('test');
    </code>
</pre>

La liste des langues supportées est disponible ici: https://prismjs.com/index.html#supported-languages

Pour personnaliser encore plus le code highlighter, vous pouvez encore importer les fichiers CSS de thème en appliquant un @import dans votre css:

@import url('../node_modules/vue-code-highlight/themes/prism-okaidia.css');