Coloriser les balises de code

Voir le sujet précédent Voir le sujet suivant Aller en bas

  • 0

Astuce Coloriser les balises de code

Message par Ea le Jeu 14 Oct 2010 - 10:07

Coloriser les balises de code


Cette astuce donne la marche à suivre afin de coloriser les balises de code comme dans l'exemple qui suit :

Avant :


Après :


Mise en place

Création du script

Panneau d'administration  Modules  Gestion des codes javascript

Créez un nouveau code javascript que vous afficherez sur toutes les pages, et qui contiendra ce code:
Code:
$(function(){var a=$("dl.codebox dd").find("code, div.cont_code");0!=a.length&&$.ajax({url:"http://yandex.st/highlightjs/8.0/highlight.min.js",cache:!0,dataType:"script",success:function(){hljs.configure({useBR:!0});a.each(function(a,b){hljs.highlightBlock(b)})}})});

Mise en place du CSS

Panneau d'administration  Affichage  Couleurs - Feuille de style CSS

Ajoutez le code suivant à votre CSS :
Code:
.hljs {
   display:inline-block;
   padding:0.5em;
   color:#333;
   background:#f8f8f8;
}
.hljs-comment,.hljs-template_comment,.diff .hljs-header,.hljs-javadoc {
   color:#998;
   font-style:italic;
}
.hljs-keyword,.css .rule .hljs-keyword,.hljs-winutils,.javascript .hljs-title,.nginx .hljs-title,.hljs-subst,.hljs-request,.hljs-status {
   color:#333;
   font-weight:bold;
}
.hljs-number,.hljs-hexcolor,.ruby .hljs-constant {
   color:#099;
}
.hljs-string,.hljs-tag .hljs-value,.hljs-phpdoc,.tex .hljs-formula {
   color:#d14;
}
.hljs-title,.hljs-id,.coffeescript .hljs-params,.scss .hljs-preprocessor {
   color:#900;
   font-weight:bold;
}
.javascript .hljs-title,.lisp .hljs-title,.clojure .hljs-title,.hljs-subst {
   font-weight:normal;
}
.hljs-class .hljs-title,.haskell .hljs-type,.vhdl .hljs-literal,.tex .hljs-command {
   color:#458;
   font-weight:bold;
}
.hljs-tag,.hljs-tag .hljs-title,.hljs-rules .hljs-property,.django .hljs-tag .hljs-keyword {
   color:#000080;
   font-weight:normal;
}
.hljs-attribute,.hljs-variable,.lisp .hljs-body {
   color:#008080;
}
.hljs-regexp {
   color:#009926;
}
.hljs-symbol,.ruby .hljs-symbol .hljs-string,.lisp .hljs-keyword,.tex .hljs-special,.hljs-prompt {
   color:#990073;
}
.hljs-built_in,.lisp .hljs-title,.clojure .hljs-built_in {
   color:#0086b3;
}
.hljs-preprocessor,.hljs-pragma,.hljs-pi,.hljs-doctype,.hljs-shebang,.hljs-cdata {
   color:#999;
   font-weight:bold;
}
.hljs-deletion {
   background:#fdd;
}
.hljs-addition {
   background:#dfd;
}
.diff .hljs-change {
   background:#0086b3;
}
.hljs-chunk {
   color: #aaa;
}

Le script est désormais fonctionnel.


Personnalisation

Vous pouvez prévisualiser en cliquant ici d'autres thèmes dont les fichiers CSS correspondants sont présents sur cette page.



Dernière édition par Etana le Mar 5 Juil 2011 - 16:39, édité 3 fois
avatar

Ea
Aidactif
Aidactif

Messages : 23484
Inscrit(e) le : 04/04/2008

Ea a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum