Comment faire la coloration de code source

busenu21 - Modifié le 28 janv. 2020 à 12:06
cs_PaTaTe
Messages postés
2107
Date d'inscription
mercredi 21 août 2002
Statut
Contributeur
Dernière intervention
19 février 2021
- 6 févr. 2020 à 01:03
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

NHenry
Messages postés
14926
Date d'inscription
vendredi 14 mars 2003
Statut
Modérateur
Dernière intervention
16 mai 2022
162
28 janv. 2020 à 18:54
Cela s'appelle de la coloration syntaxique.
0
bonjour NHenry et merci pour la correction du terme ;

je voudrait bien voir aussi la réponse svp
merci cordialement
0
@karamel
Messages postés
1807
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
5 mai 2022
144
Modifié le 29 janv. 2020 à 16:11
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 !
0
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.
0
@karamel
Messages postés
1807
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
5 mai 2022
144
30 janv. 2020 à 09:15
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
0
NHenry
Messages postés
14926
Date d'inscription
vendredi 14 mars 2003
Statut
Modérateur
Dernière intervention
16 mai 2022
162
30 janv. 2020 à 19:07
Il existe un paquet de code pour le faire.
Une recherches et quelques teste te permettront de trouver ce que tu cherches.
0
busenu21 > NHenry
Messages postés
14926
Date d'inscription
vendredi 14 mars 2003
Statut
Modérateur
Dernière intervention
16 mai 2022

31 janv. 2020 à 08:12
bonjour un lien vers n de tes découverte m'aidera beaucoup

merci cordialement
0
NHenry
Messages postés
14926
Date d'inscription
vendredi 14 mars 2003
Statut
Modérateur
Dernière intervention
16 mai 2022
162 > busenu21
31 janv. 2020 à 19:02
Tu veux l'utiliser pour quel langage ?
Pour du PHP : https://www.php.net/manual/en/function.highlight-string.php
0
busenu21 > NHenry
Messages postés
14926
Date d'inscription
vendredi 14 mars 2003
Statut
Modérateur
Dernière intervention
16 mai 2022

3 févr. 2020 à 12:32
justement pour du php

merci beaucoup pour le lien
0
cs_PaTaTe
Messages postés
2107
Date d'inscription
mercredi 21 août 2002
Statut
Contributeur
Dernière intervention
19 février 2021
2
6 févr. 2020 à 01:03
En JavaScript, il y a une librairie plus de 180 langages : https://hightlightjs.org/

Cordialement,
0