Comment faire la coloration de code source

Signaler
-
Messages postés
2081
Date d'inscription
mercredi 21 août 2002
Statut
Contributeur
Dernière intervention
16 mars 2020
-
bonjour et bien à vous les amis


je conçu un blog et la rédaction des tuto passe sans problème mais je cherche comment faire pour que le code source soit coloré lors de la lecture du tuto par un visiteur de mon blog .

c'est un peut comme quand on lut un tuto sur ccm on voit bien que les codes sources sont coloré ce qui permet la compréhension du lecteur ou visiteur.

merci d'avance

4 réponses

Messages postés
14666
Date d'inscription
vendredi 14 mars 2003
Statut
Modérateur
Dernière intervention
15 mai 2020
143
Cela s'appelle de la coloration syntaxique.
bonjour NHenry et merci pour la correction du terme ;

je voudrait bien voir aussi la réponse svp
merci cordialement
Messages postés
1760
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
23 mai 2020
76
bonjour

un exemple en javascript utilisant un regex et un objet json pour les mots réservé

<!doctype html>
 <html lang="fr">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <head>
 <style type="text/css">

 body{
  font-family:Verdana, Geneva, sans-serif;
  background-color:#b2bdc6;
 } 
 
 .coode{
  color:blue;
 }

 pre{
  background-color:gray;
 } 
 </style>
 <script>
 
 var un_objet={
   "Private" : "<span class='coode'>Private</span>",
   "Sub" : "<span class='coode'>Sub</span>",
   "If" :"<span class='coode'>If</span>",
   "Exit" :"<span class='coode'>Exit</span>",
   "End" : "<span class='coode'>End</span>",
   "Error" : "<span class='coode'>Error</span>",
   "GoTo" : "<span class='coode'>Goto</span>",
   "True" : "<span class='coode'>True</span>",
   "False" : "<span class='coode'>False</span>",
   "Then" : "<span class='coode'>Then</span>",
   "On" : "<span class='coode'>On</span>",
 };

function obj_key(){ 
 
 var txt=document.getElementById("tar").value

 for (var x in un_objet){
 
    var regex = new RegExp(x,'g');
 
    txt=txt.replace(regex,un_objet[x])
 
 }
  document.getElementById("rendu").innerHTML=txt
 }

 </script>
 </head>
 <body>
 <br>
 <button onclick="obj_key()">coloration</button>
 
 <textarea id="tar" style="height:350px;width:450px">Private Sub AskPin_Click()
On Error GoTo AskPin_Click_Error

If Len(Userid) < 6 Then
MsgBox ("Le nom d'utilisateur doit comporter au moins 6 caractères"), vbExclamation
Exit Sub
End If

Instr1.Visible = True
Instr3.Visible = False
End If
On Error GoTo 0
Exit Sub
AskPin_Click_Error:
ErrHdl ("AskPin_Click dans Connexion")
End Sub</textarea>
 <br>
 <span id="demo"></span>
 
 <pre id="rendu"></pre>
 </body>
 </html> 


le tout étant court et simple je te laisse comprendre par toi même.

rien ne sert de courir il faut partir a point.
cours Forest cours !
Bonjour karamel grand merci pour ce code !

ceci me permet d'avoir une idée pour la suite.

est ce que tu peut mettre quelques code php sur ceci ?
pour le moment j'utilise fckeditor pour la redaction de mes articles et tutos alors est ce possible d'integré ce code à fckeditor ?

merci bien cher ami.
Messages postés
1760
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
23 mai 2020
76
ce que j'ai mis est une approche ça demande a être amélioré surtout au niveau des regex (Expression régulière) de même pour une utilisation avec du code php il faut intégré a l'objet les mots réserve du langage php quand a l’intégration dans fckeditor je ne peut rien dire ne connaissant pas sont fonctionnement.

il faut bien avoir en tete que le code ne fait que rajouter des balises span avec une class a chaque mot réserve pour moi sa ne peut que servir a un affichage a l’écran
Messages postés
14666
Date d'inscription
vendredi 14 mars 2003
Statut
Modérateur
Dernière intervention
15 mai 2020
143
Il existe un paquet de code pour le faire.
Une recherches et quelques teste te permettront de trouver ce que tu cherches.
>
Messages postés
14666
Date d'inscription
vendredi 14 mars 2003
Statut
Modérateur
Dernière intervention
15 mai 2020

bonjour un lien vers n de tes découverte m'aidera beaucoup

merci cordialement
Messages postés
14666
Date d'inscription
vendredi 14 mars 2003
Statut
Modérateur
Dernière intervention
15 mai 2020
143 > busenu21
Tu veux l'utiliser pour quel langage ?
Pour du PHP : https://www.php.net/manual/en/function.highlight-string.php
>
Messages postés
14666
Date d'inscription
vendredi 14 mars 2003
Statut
Modérateur
Dernière intervention
15 mai 2020

justement pour du php

merci beaucoup pour le lien
Messages postés
2081
Date d'inscription
mercredi 21 août 2002
Statut
Contributeur
Dernière intervention
16 mars 2020
2
En JavaScript, il y a une librairie plus de 180 langages : https://hightlightjs.org/

Cordialement,