Vérifiez vos informations

Il semblerait que les informations techniques de votre profil n'aient pas été actualisées depuis un certain temps... Pour que l'aide apportée vous soit efficace, il est important que ces informations soient à jour : prenez quelques secondes pour confirmer ou compléter les informations suivantes.


Lien de votre forum
Version de ce forum
Vous êtes le fondateur de ce forum
Vous avez modifié le CSS de ce forum
Vous avez modifié les templates de ce forum
Votre navigateur

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 : 23491
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