Sujet Précédent Sujet Suivant

Comment faire la coloration de code source

busenu21 - Modifié le 28 janv. 2020 à 12:06
cs_PaTaTe Messages postés 2126 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

Réponse 1 / 4
NHenry Messages postés 15151 Date d'inscription vendredi 14 mars 2003 Statut Modérateur Dernière intervention 4 septembre 2024 159
28 janv. 2020 à 18:54
Cela s'appelle de la coloration syntaxique.
0
busenu21
29 janv. 2020 à 17:07
bonjour NHenry et merci pour la correction du terme ;

je voudrait bien voir aussi la réponse svp
merci cordialement
0
Réponse 2 / 4
@karamel Messages postés 1860 Date d'inscription vendredi 9 mai 2008 Statut Modérateur Dernière intervention 12 août 2024 154
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.

0
busenu21
29 janv. 2020 à 17:43
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
Réponse 3 / 4
@karamel Messages postés 1860 Date d'inscription vendredi 9 mai 2008 Statut Modérateur Dernière intervention 12 août 2024 154
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 15151 Date d'inscription vendredi 14 mars 2003 Statut Modérateur Dernière intervention 4 septembre 2024 159
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 15151 Date d'inscription vendredi 14 mars 2003 Statut Modérateur Dernière intervention 4 septembre 2024
31 janv. 2020 à 08:12
bonjour un lien vers n de tes découverte m'aidera beaucoup

merci cordialement
0
NHenry Messages postés 15151 Date d'inscription vendredi 14 mars 2003 Statut Modérateur Dernière intervention 4 septembre 2024 159 > 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 15151 Date d'inscription vendredi 14 mars 2003 Statut Modérateur Dernière intervention 4 septembre 2024
3 févr. 2020 à 12:32
justement pour du php

merci beaucoup pour le lien
0
Réponse 4 / 4
cs_PaTaTe Messages postés 2126 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

Discussions similaires

Faut-il dire "une source" ou "un source"?
racpp -
racpp -

13 réponses
Portail Intranet open source
sophie316 -
titeoe -

3 réponses
GMAO
cs_cecel -
cs_ghalinaji -

3 réponses
developper une petite gmao en php !!
cs_manoudj -
Mike97168 -

5 réponses
migration de base de données
cs_koutami -
koutami -

4 réponses
Rejoignez-nous