Ajouter la coloration syntaxique avec Highlight js
Inscris-toi
(c'est gratuit !)
Un compte est nécessaire pour participer aux discussions.
Créer un compteToutes les questions
Beachmountains
23 septembre 2024
Résolue
10 réponses
Problème de couleur avec highlight.js
Bonjour,
j'ai un probleme avec la fonction `hljs.highlightAll();` la couleur ne fonctionne pas
j'ai bien mis dans html ``
Et l'autre ``
Pour terminer notre projet, nous allons utiliser la librairie highlight js pour styliser les blocs de codes de l'IA.
Pour commencer, nous allons ajouter la librairie javascript et la feuille de style dans le <head> de notre page index.html :
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.2.0/highlight.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.2.0/styles/default.min.css">
De retour dans l'événement d'envoi du formulaire, nous allons ajouter un bloc try /catch / finally pour terminer le traitement du message une fois le stream terminé :
document.addEventListener("DOMContentLoaded", () => {
const form = document.querySelector("#prompt-form");
const spinnerIcon = document.querySelector("#spinner-icon");
const sendIcon = document.querySelector("#send-icon");
form.addEventListener("submit", async (event) => {
event.preventDefault();
spinnerIcon.classList.remove("hidden");
sendIcon.classList.add("hidden");
const prompt = form.elements.prompt.value;
addToLog(prompt);
try {
const answerBlock = addToLog("GPT est en train de réfléchir...");
const reader = await fetchPromptResponse();
await readResponseChunks(reader, answerBlock);
} catch (error) {
console.error('Une erreur est survenue:', error);
} finally {
spinnerIcon.classList.add("hidden");
sendIcon.classList.remove("hidden");
hljs.highlightAll();
}
});
});
Dans le bloc finally, nous changeons les classes des icônes pour masquer l'icône de chargement et afficher de nouveau l'icône d'envoi.
Puis, nous utilisons hljs.highlightAll() pour ajouter la coloration syntaxique sur tous les blocs de code détectés sur la page.
Le catch nous permet en cas d'erreur de récupérer l'erreur et l'afficher dans la console.
00:00:00 :On arrive à la fin de la création de notre site, il ne reste plus grand chose à faire.La seule étape qu'on va rajouter, c'est une autre bibliothèque qui s'appelle Highlight.js
00:00:09 :qui va nous permettre de rajouter la coloration syntaxique sur les blocs de code.Et on va aussi rajouter un petit bloc try except ici à la fin pour pouvoir gérer les casoù on peut avoir des erreurs et également gérer l'affichage des icônes icipuisque pour l'instant on change les classes ici au début mais on ne les remet pas
00:00:27 :parce que c'était par défaut à la fin donc ça cause un petit problème icipuisque à la fin de la génération du message on est toujours avec le spinnerdonc l'icône qui affiche que la génération est en cours.
00:00:37 :Donc on va déjà rajouter ce bloc try except et par la suite on rajoutera la librairie Highlight.jsDonc là c'est un petit peu comme en Python, on va faire un bloc try avec un catchdonc c'est un peu le try except du Python.
00:00:48 :Dans mon try je vais essayer tout ça.Si on a un problème donc on va faire un catch donc hop ici à la place je vais faire un catchpour récupérer dans le cas où il y a une erreur l'erreur et pour l'afficherdonc on va faire un simple console.log et dire par exemple une erreur est survenue
00:01:03 :et on va afficher l'erreur en question qu'on aura récupéré.Donc voilà rien de bien compliqué.Tant qu'on y est on va aussi rajouter le point virgule ici à la finet ici j'en ai probablement oublié d'autres c'est pas très très grave encoremais je pense que je les ai tous mis ok.
00:01:16 :Et ici on va rajouter un finally donc finally c'est en fait si tout se passe bienet donc si tout se passe bien et bien qu'est-ce qu'on veut faire ?
00:01:23 :On veut inverser comme on l'avait dit ces conditions icidonc c'est à dire qu'on va remettre le hidden sur le spinner iconet on va l'enlever sur le send icon.
00:01:31 :Donc je veux inverser le remove et le add tout simplementcomme ça ça me permet de remettre le hidden sur le spinneret d'enlever le hidden qui était rajouté ici sur le send.
00:01:40 :Donc on va vérifier si tout ça fonctionne biensi on n'a pas créé d'erreur j'actualiseje vais remettre mon comment faire un print en Pythonet ça semble fonctionner pour le momentdonc on a bien le make HTML donc tout est bienet on a l'icône ici qui s'affiche
00:01:55 :et normalement à la fin on devrait revenir avec l'icône de l'enveloppe.Voilà donc ça fonctionne on a bien le finally qui est exécutél'icône revient comme il faut.
00:02:03 :On pourrait également tant qu'on y est enlever la question dans le inputdonc ça on peut faire form.elements.print.valueégal à une chaîne de caractère videcomme ça ça permet quand on envoie le messagealors là on peut pas faire un value comme çaje me suis planté j'ai mis un S
00:02:20 :j'actualise, je mets testvoilà j'envoie et donc là ça permet justede remettre la valeur à 0 pour ne pas laisser la question de l'utilisateurdans la boîte de texte comme ça s'il veut continuer à écrireil n'a pas besoin à chaque fois d'effacer ce qu'il avait écrit auparavant.
00:02:34 :Donc du côté visuel ici tout est bonil ne reste plus qu'à ajouter la librairie highlight.jsdonc on va retourner dans notre index.htmlet là encore on va modifier un petit peu dans le headet juste avant le script icidonc on va rajouter déjà le fichier javascriptdonc là encore on va le chercher à partir d'un cdn
00:02:51 :donc j'utilise la version 11.2.0 si vous voulez utiliser exactement la mêmeet on met donc highlight.min.jset il va rester uniquement la feuille de style qu'on va mettre au début icidonc je vais la mettre juste avant le styles.css
00:03:05 :là encore on va la chercher depuis un cdnavec la même version 11.2.0et on utilise le style par défautet pour finir il ne reste plus dans le javascript iciqu'à rajouter une fonction qui va appliquer cette coloration syntaxiquedonc là maintenant qu'on a installé cette bibliothèque avec le cdn
00:03:22 :on peut utiliser hljs donc highlight.jset on a la fonction highlight.allqu'on va faire juste à la finalors là c'est à vous de voir ce que vous préférezon pourrait la faire directement iciquand on ajoute les élémentspour que au fur et à mesure de la génération
00:03:36 :on ait la coloration syntaxique qui soit effectuéece n'est pas forcément très utileet ça risque de ralentir un petit peu la générationpuisque c'est quand même une bibliothèquequi va chercher sur toute la pagepour trouver des éléments de bloc de codeet rajouter la coloration syntaxiquedonc ça peut quand même ralourdir un petit peu ça
00:03:54 :si on le fait à chaque foisdonc moi je préfère le faire une fois à la find'ailleurs là c'est un h minusculedonc highlight.all comme ça
00:04:01 :et donc c'est juste à la fin dans le finally iciqu'on va faire cette coloration syntaxiquedonc si on n'a pas fait d'erreurnormalement ça devrait fonctionnerje vais remettre ma question comment faire un printet cette fois-ci on devrait avoir la coloration syntaxiquequi s'affiche donc à la fin bien sûr
00:04:14 :là elle n'est pas encore làon a bien les éléments de codequi sont en fuchsia icidonc ça c'est grâce à la feuille de styleet une fois que ça va être terminévoilà on a bien ici la coloration syntaxiqueavec les blocs de code qui s'affichentdonc tout fonctionne parfaitement
Ce n'est pas fini...
✋
Tu as complété % du parcours 🔥
Termine l'intégralité de la formation pour pouvoir débloquer ton attestation de réussite.
