Coloriser les balises de code

[Ea]

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.

Cette astuce a été rédigée par le Staff du Forum des Forums. Aucune reproduction possible sans accord, conformément à l’article L122-1 du CPI. Pour proposer une astuce, merci de l'envoyer par MP à un Aidactif ou un Modéractif.