Coloration php, css, html, javascript
Soyez le premier à donner votre avis sur cette source.
Vue 16 838 fois - Téléchargée 1 198 fois
Description
Je crois que le titre en dis déjà pas mal, c'est un script de
coloration syntaxique multi-language ( actuellement 4 ).
Pour le faire fonctionner :
Télécharger le zip et lancer le fichier html, coller un code
source dans le textarea, puis sélectionner votre type de coloration
et enfin, cliquer sur le bouton magique 'colore'.
Pour lancer la coloration a partir d'une de vos page html ou script,
=>
<script type="text/javascript">
<!--//
ColoreCode(CodeSource,ObjetDest,Coloration)
//-->
</script>
CodeSource => Un simple texte ( code source d'une page html par ex. )
ObjetDest => L'élément de destination qui recevra le code source coloré ( document.getElementById('IdDuneDiv') par ex. )
Coloration =>
0 => Colore en fonction du tag détecter ( html + CSS + Javascript + PHP ) ( plus long )
1 => Coloration HTML
2 => Coloration CSS
3 => Coloration JavaScript
4 => Coloration PHP
Les Styles CSS sont dans le fichier colore_code.html
Dite moi ce que vous en pensez ^^
Note : Il exist encore quelque bug qui seront corrigé ;)
}
Dest.innerHTML = text;
tms = new Date();
var tpsFin = tms.getTime();
/** Commenter les 4 lignes si vous n'en voulez pas **/
try {
document.getElementById('CODE_TimeStamp').innerHTML = 'Temps d\éxécution : '+((tpsFin-tpsDep)/1000)+' Secondes pour '+parent.NbLn+' Lignes.';
} catch(e) {
alert('Temps d\éxécution : '+((tpsFin-tpsDep)/1000)+' Secondes\r\nNombre de ligne : '+parent.NbLn);
}
return false;
}
function ColorSrc(s, Sel, Num) {
t = RemoveChar(s);
switch(Sel) {
case 0:
t = t.replace(/(<style.*?>)(.*?)(<\/style>)/gim, function(st) { return '
Coloration Javascript => - Certaines Expressions régulières ne sont pas coloré
- <script type="text/javascript">un paquet de code js
sans nouvelle ligne</script> ne sont pas coloré ou
très mal.
coloration syntaxique multi-language ( actuellement 4 ).
Pour le faire fonctionner :
Télécharger le zip et lancer le fichier html, coller un code
source dans le textarea, puis sélectionner votre type de coloration
et enfin, cliquer sur le bouton magique 'colore'.
Pour lancer la coloration a partir d'une de vos page html ou script,
=>
<script type="text/javascript">
<!--//
ColoreCode(CodeSource,ObjetDest,Coloration)
//-->
</script>
CodeSource => Un simple texte ( code source d'une page html par ex. )
ObjetDest => L'élément de destination qui recevra le code source coloré ( document.getElementById('IdDuneDiv') par ex. )
Coloration =>
0 => Colore en fonction du tag détecter ( html + CSS + Javascript + PHP ) ( plus long )
1 => Coloration HTML
2 => Coloration CSS
3 => Coloration JavaScript
4 => Coloration PHP
Les Styles CSS sont dans le fichier colore_code.html
Dite moi ce que vous en pensez ^^
Note : Il exist encore quelque bug qui seront corrigé ;)
Source / Exemple :
// Script Coloration Syntaxique HTML, CSS, JavaScript, PHP
function Init() {
ColoreCode();
}
/*
- Colorer le code en (SelColore) :
- 0 -> les 4 languages confondu ( effectué s'il croise leur tag correspondant )
- 1 -> HTML
- 2 -> CSS
- 3 -> JavaScript
- 4 -> PHP
- Numéroter les lignes (Num):
- true -> numérote les lignes + souligne la ligne au passage de la sourie
- false -> ne numérote pas les lignes
- Src => texte source
- Dest => l'objet de destination prêt a recevoir le code Html
- /
}
Dest.innerHTML = text;
tms = new Date();
var tpsFin = tms.getTime();
/** Commenter les 4 lignes si vous n'en voulez pas **/
try {
document.getElementById('CODE_TimeStamp').innerHTML = 'Temps d\éxécution : '+((tpsFin-tpsDep)/1000)+' Secondes pour '+parent.NbLn+' Lignes.';
} catch(e) {
alert('Temps d\éxécution : '+((tpsFin-tpsDep)/1000)+' Secondes\r\nNombre de ligne : '+parent.NbLn);
}
return false;
}
function ColorSrc(s, Sel, Num) {
t = RemoveChar(s);
switch(Sel) {
case 0:
t = t.replace(/(<style.*?>)(.*?)(<\/style>)/gim, function(st) { return '
'+ColorCSS(st)+'</CODE_CSS>';} ); // style CSS
t = t.replace(/(<script.*?>)(.*?)(<\/script>)/gi, function(st) { return '<CODE_JS>'+ColorJSC(st)+'</CODE_JS>';} ); // javascript
t = t.replace(/(<\?.*?\?>)/gi, function(st) { return '<CODE_PHP>'+ColorPHP(st)+'</CODE_PHP>';} ); // Code PHP
t = t.replace(/(<html.*?<\/html>)/gi, function(st) { return '<CODE_HTM>'+ColorHTML(st)+'</CODE_HTM>';} ); // html
t = t.replace(/<(CODE_HTM|CODE_CSS|CODE_JS|CODE_CSS|CODE_PHP)>/g, '<span class="$1">');
t = t.replace(/<\/(CODE_HTM|CODE_CSS|CODE_JS|CODE_CSS|CODE_PHP)>/g, '</span>');
break;
case 1:
t = '<span class="CODE_HTM">'+ColorHTML(t)+'</span>';
break;
case 2:
t = '<span class="CODE_CSS">'+ColorCSS(t)+'</span>';
break;
case 3:
t = '<span class="CODE_JS">'+ColorJSC(t)+'</span>';
break;
case 4:
t = '<span class="CODE_PHP">'+ColorPHP(t)+'</span>';
break;
}
t = CleanTag(t);
t = ReplaceChar(t);
return t;
}
/*** Coloration Javascript ***/
function ColorJSC(s) {
/* Expression Régulière */
s = s.replace(/(\()(\/)([^\/<>]*?)(\/)([gim\)]+)/g, '$1<b>$2$3$4</b>$5'); // ça bug ...
/* Mots réservé */
s = s.replace(/\b(window|document|layer|self|opener|location|body|parent|screen)\b([\.\(\)])/gi, '<i>$1</i>$2');
s = s.replace(/(\.)\b(getElementById|getElementsByTagName|getElementsByName|item|forms|element)\b([\.\[\(])/gi, '$1<em>$2</em>$3');
s = s.replace(/\b(alert|prompt|focus|blur|open|close|find|event|navigator|submit|scroll|clearTimeout|clearInterval)\b/gi, '<big>$1</big>');
s = s.replace(/(\.)\b(designMode|keyCode|charCode|select|text|clear|appName|value|innerHTML|innerText|match|replace|search|exec|test|write|writeln|length|substr|substring|indexOf|lastIndexOf|getSelection|left|right|down|top|width|height|offsetLeft|offsetRight|offsetTop|offsetDown|offsetWidth|offsetHeight|style|value|escape|unescape|Object|valueOf|String|toString|setTimeout|setInterval|Math|parseInt|parse|parseFloat|Array|isNaN|name|id|status|Number|addEventListener|onmouseup|onmousedown|onclick|onmouseover|onmouseout|onkeypress|onkeydown|onkeyup|onload|onunload|onblur|onfocus|onsubmit|onchange|execCommand|pasteHTML|selection|createRange|getRangeAt|createTextRange|insertNode|createElement|appendChild|removeChild|firstChild|rangeCount|childNodes|nodeType|parentElement|setAttribute|getAttribute|insertBefore|addRange|removeAllRanges|parentNode|cloneNode|nodeValue|startContanier|deleteContents|toLowerCase|toUpperCase|tagName|button|which|type)\b/gi, '$1<u>$2</u>');
s = s.replace(/(\.?)\b(setTimeout|setInterval|Math|parseInt|parse|parseFloat|Array|Number|eval|RegExp)\b/gi, '$1<u>$2</u>');
s = s.replace(/\b(for|if|else|switch|case|break|default|return|while|do|try|catch|throws|int|boolean|label|goto)\b/gi, '<small>$1</small>');
s = s.replace(/\b(function|class|var|new)\b/gi, '<var>$1</var>');
/* Décimaux */
s = s.replace(/(=|\+|\*|\-|\[|\(|,|;|\s)(\s?)([\d]+)/g, '$1$2<sup>$3</sup>');
// Booléen
s = s.replace(/\b(null|true|false)\b/gi, '<s>$1</s>');
// quotes double
s = s.replace(/([\s=;\:\+\.\(\[,])(")([^"]*?)(")/g, '$1<strike>$2$3$4</strike>');
// quotes simple
s = s.replace(/([\s=;\:\+\.\(\[,])(')([^']*?)(')/g, '$1<strike>$2$3$4</strike>');
// &&, ||, <=, >=, !=, += etc ...
s = s.replace(/(&&||||\!=|==|\+=|<=|>=|\[|\]|\{|\}|\(|\))/gi, '<s>$1</s>');
// Commentaires
s = s.replace(/(\/\*)(.*?)(\*\/)/g, '<cite>$1$2$3</cite>');
s = s.replace(/([^:])(\/\/.*?)(<br \/>)/g, '$1<cite>$2</cite>$3');
return s;
}
/*** Coloration CSS ***/
function ColorCSS(s) {
/* class/tag/id:évenement */
s = s.replace(/([A-Za-z0-9\:_\-, \.#]+)(\{)/g, function(st) { return st.replace(/([A-Za-z0-9_-]+)(\:?)([A-Za-z0-9_-]*)/g, '<s>$1</s>$2<em>$3</em>'); });
/* Attribut:value; */
s = s.replace(/(\s?)([A-Za-z0-9_-]+)(:)([^;\/]+?)(\s?)(;)/gi, '$1<u>$2</u>$3<i>$4</i>$5$6');
/* Chaine de caractère */
s = s.replace(/(")([^"]*?)(")/g, '<strike>$1$2$3</strike>');
s = s.replace(/(')([^']*?)(')/g, '<strike>$1$2$3</strike>');
/* Commentaire */
s = s.replace(/(\/\*)(.*?)(\*\/)/g, function(st) { st = CleanTag(st); return '<cite>'+st+'</cite>'; });
return s;
}
/*** Coloration (x)HTLM / XML ***/
function ColorHTML(s) {
//if (s.
// attributs="value" ( double quote )
s = s.replace(/([A-Za-z_-]+=)(")([^"<>]*?)(")/g, '<i>$1</i><s>$2$3$4</s>');
// attributs='value' ( simple quote )
s = s.replace(/([A-Za-z_-]+=)(')([^'<>]*?)(')/g, '<i>$1</i><s>$2$3$4</s>');
// tags
s = s.replace(/(<)(\/?)([A-Za-z0-9]+)/g, '$1$2<u>$3</u>');
// doctype
s = s.replace(/(<!doctype)([^|]*)(>)/gi, '<span class="HTM_Doc">$1$2$3</span>');
// xml
s = s.replace(/(<\?xml)([^|]*)(>)/gi, '<span class="HTM_Xml">$1$2$3</span>');
// commentaires
s = s.replace(/(<\!\-\-.*?\-\->)/gi, function(h) { h = CleanTag(h);
h = h.replace(/\"/g, '"');
h = h.replace(/\'/g, ''');
return '<cite>'+h+'</cite>'; });
return s;
}
/*** Coloration PHP ***/
function ColorPHP(s) {
s = s.replace(/<br \/>/g, '\n');
s = s.replace(/<\S[^><]*?>/g, '');
s = s.replace(/\n/g, '<br \/>');
// tag <?, <?php, ?>
s = s.replace(/(<\?php|<\?|\?>)/g, '<big>$1</big>');
// Boucle, Condition, et autres ...
s = s.replace(/\b(if|while|for|do|else|endif|endfor|endwhile|endswitch|case|return|break|case|default|echo|print_r|printf|print|exit|die|foreach|throw|try|catch)\b(\s?)/gi, '<small>$1</small>$2');
// du type function truc () , class truc(), var $machin
s = s.replace(/\b(function|var|class|global|new|static|extends|public|private)\b/g, '<i>$1</i>');
// du type mysql_connect(), fopen() ...
s = s.replace(/([A-Za-z0-9_]+)([\s]*)(\(|\{)/g, '<u>$1</u>$2$3');
// les variables ( $truc );
s = s.replace(/(\$[A-Za-z0-9_\-]+)/g, '<var>$1</var>');
s = s.replace(/\b(this)\b(\->)/g, '<var>$&1-></var>');
// les décimaux
s = s.replace(/(=|\+|\*|\-|\[|\(| |,|;)([\d]+)/g, '$1<sup>$2</sup>');
// Booléen, et caractère divers
s = s.replace(/\b(false|true|null|and|or|xor|as)\b/g, '<em>$1</em>');
s = s.replace(/(==|\!=|&&||||<=|>=|\(|\[|\]|\)|\{|\})/g, '<em>$1</em>');
// Expression régulière
s = s.replace(/(\(|=)(#|@)(.*?)(#|@)/g, '$1<b>$2$3$4</b>');
// quotes double
//s = s.replace(/(\s|\[|\(|=|\.|,)(")([^"]*)(")/g, '$1<strike>$2$3$4</strike>');
s = s.replace(/(")([^"]*)(")/g, '<strike>$1$2$3</strike>');
// quotes simple
//s = s.replace(/(\s|\[|\(|=|\.|,)(')([^']*)(')/g, '$1<strike>$2$3$4</strike>');
s = s.replace(/(')([^']*)(')/g, '<strike>$1$2$3</strike>');
// Commentaires
s = s.replace(/(\/\*.*?\*\/)/g, '<cite>$1</cite>');
s = s.replace(/(\s|<br \/>)(\/\/|#)(.*?)(<br \/>)/g, '$1<cite>$2$3</cite>$4');
return s;
}
function addNumLn(s) {
parent.TagAdd = parent.TagEnd = parent.Class = ''; /** récupère la classe des tags span croisé au passage **/
parent.NbLn = 0; /** compteur de ligne **/
Ln = s+'<br />';
Ln = Ln.replace(/(.*?<br \/>)/g, function(st) {
parent.NbLn++;
endTag = false;
if (st.match(/<span class="[^"]*?">/)) {
parent.Class = st.match(/<span class="([^"]*?)">/)[st.match(/<span class="([^"]*?)">/).length-1];
st = st.replace(/<span class="[^"]*?">/g, ''); /** après récupération de la class, on efface le tag inutile **/
} else if (st.indexOf('</span>') != -1) {
parent.Class = 'CODE_HTM';
} else if (st.indexOf('<cite>') != -1 && st.indexOf('</cite>') == -1) { /** corrige un p'tit bug de commentaire multi-ligne **/
parent.TagAdd = '<cite>';
parent.TagEnd = '</cite>';
} else if (st.indexOf('</cite>') != -1) { /** met fin au commentaire multi-ligne **/
endTag = true;
}
st = '<tr><td class="CODE_NumLn">'+parent.NbLn+'</td><td class="'+parent.Class+'">'+parent.TagAdd+st+parent.TagEnd+'</td></tr>';
if (endTag) {
parent.TagAdd = '';
parent.TagEnd = '';
}
return st;
});
Ln = Ln.replace(/<\/span>/g, '');
return Ln;
}
/** Supprime les Tags HTML inutile et/ou en trop **/
function CleanTag(s) {
Clean = function(st1) {
st1 = st1.replace(/<br \/>/gi, '\n');
st1 = st1.replace(/<\S[^><]*?>/gm, '')
st1 = st1.replace(/\n/gm, '<br />');
return st1;
}
s = s.replace(/(<strike>.*?<\/strike>)/gi, function(st) { return '<strike>'+Clean(st)+'</strike>'; } );
s = s.replace(/(<b>.*?<\/b>)/gi, function(st) { return '<b>'+Clean(st)+'</b>'; } );
s = s.replace(/(<cite>.*?<\/cite>)/gi, function(st) { return '<cite>'+Clean(st)+'</cite>'; } );
return s
}
/** Encode les caractères pouvant géner le parseur **/
function RemoveChar(s) {
Remove = function(St) {
St = St.replace(/</g, '‹');
St = St.replace(/>/g, '›');
return St;
}
s = s.replace(/&/gm, '&');
s = s.replace(/\|/gm, '|');
s = s.replace(/\\\//gm, '\\/');
s = s.replace(/\\\\/gm, '\\');
s = s.replace(/\\/gm, '\\');
s = s.replace(/\\'/gm, '\\'');
s = s.replace(/\\"/gm, '\\"');
s = s.replace(/</gm, '<');
s = s.replace(/>/gm, '>');
s = s.replace(/\t/gm, ' ');
s = s.replace(/\r?\n/g, function(t) { parent.NbLn++; return '<br />'; });
s = s.replace(/(\s\/\*.*?\*\/\s)/g, function(st) { st = st.replace(/\'/g, '\\''); st = st.replace(/\"/g, '\\"'); return Remove(st); });
s = s.replace(/<br \/>\/\*.*?\*\/<br \/>/g, function(st) { st = st.replace(/\'/g, '\\''); st = st.replace(/\"/g, '\\"'); return Remove(st); });
s = s.replace(/(\s\/\/)(.*?<br \/>)/g, function(st) { st = st.replace(/\'/g, '''); st = st.replace(/\"/g, '"'); return Remove(st); });
s = s.replace(/(<br \/>\/\/)(.*?<br \/>)/g, function(st) { st = st.replace(/\'/g, '''); st = st.replace(/\"/g, '"'); return Remove(st); });
s = s.replace(/([\s=;\:\+\.\(\[,])("[^"]*?")/g, function(st) { st = st.replace(/\'/g, '''); return Remove(st); });
s = s.replace(/([\s=;\:\+\.\(\[,])('[^']*?')/g, function(st) { st = st.replace(/\"/g, '"'); return Remove(st); });
s = s.replace(/(\(\/[^\/]*?\/)/g, function(st) { st = st.replace(/'/g, '''); st = st.replace(/"/g, '"'); return Remove(st); });
return s;
}
/** Décode les caractères nécessaire dernièrement encodé **/
function ReplaceChar(s) {
Replace = function(St) {
St = St.replace(/‹/g, '<');
St = St.replace(/›/g, '>');
St = St.replace(/"/g, '"');
St = St.replace(/'/g, "'");
St = St.replace(/ /g, " ");
St = St.replace(/> /g, "> ");
return St;
}
return Replace(s);
}
Conclusion :
Coloration Javascript => - Certaines Expressions régulières ne sont pas coloré
- <script type="text/javascript">un paquet de code js
sans nouvelle ligne</script> ne sont pas coloré ou
très mal.
Codes Sources
A voir également
- Php s
- Javascript printf - Meilleures réponses
- S javascript - Meilleures réponses
- Javascript : Enlever toutes les pubs de mulitmania (ca marche) avec le php, le html - CodeS SourceS - Guide
- Javascript : Charger une page php ou html dans un div - CodeS SourceS - Guide
- PHP : [expreg] coloration synthaxique (x)html - CodeS SourceS - Guide
- Javascript : Quiz html css et javascript - CodeS SourceS - Guide
- Menu déroulant vertical html css sans javascript - Guide
Commentaires
entre temps je suis passé sur un autre chose, mais il n'est jamais trop tard pour bien faire (même 5 ans après !!!).
Bref impeccable, c'est juste ce qu'il me faut avec quelques adaptations style un script qui balaye l'ensemble du document et effectue une conversion automatique, en conservant peut être la version original dans un div caché.
JJDAI
- Messages postés
- 488
- Date d'inscription
- samedi 5 avril 2003
- Statut
- Membre
- Dernière intervention
- 31 mars 2009
3- Messages postés
- 33
- Date d'inscription
- dimanche 15 mai 2005
- Statut
- Membre
- Dernière intervention
- 14 janvier 2016
2Pour le retour à la ligne, je pense que via le CSS ça pourrait être mieux géré, mais bon si la ligne de code
fait plus de 300 caractères, sans espaces, le problème sera toujours présent.
Je metterais a jour la source dés que possible ;)
- Messages postés
- 5487
- Date d'inscription
- dimanche 4 août 2002
- Statut
- Modérateur
- Dernière intervention
- 20 juin 2013
44- Messages postés
- 33
- Date d'inscription
- dimanche 15 mai 2005
- Statut
- Membre
- Dernière intervention
- 14 janvier 2016
2bref pas grave ^^'
Pour ceux qui pourrait être intéressé, en surfant sur le web,
je suis tombé sur un Wysiwyg plutot intéressant ^^
ça reste dans le thème "Coloration Syntaxique" mais via un wysiwyg,
en temps réelle et sans passer par un serveur quelconque ( Ajax/XMLHttpRequest )
C'est rapide, et ça change de mon "usine a gaz" XD
Jetter un oeil la dessus ^^
=> http://codepress.fermads.net/
Vous n'êtes pas encore membre ?
inscrivez-vous, c'est gratuit et ça prend moins d'une minute !
Les membres obtiennent plus de réponses que les utilisateurs anonymes.
Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.
Le fait d'être membre vous permet d'avoir des options supplémentaires.