Highlight.js

Parcequ'il est bien plus facile de lire un code avec une coloration syntaxique, une bibliothèque permettant cela est bien pratique. C'est ce que permet Highlight.js.

Elle permet un large choix de coloration et est adaptée à de nombreux langages. Ci-dessous une exemple en css:

blockquote{
    color:black;
    background-color:white;
    border:1px solid brown;
    border-radius:5px;
    width:540px;
    margin-left:10px;
    padding-left:5px;
}

Puis un autre en javascript:

if(typeof(onJSFilesLoaded) != "object")
 onJSFilesLoaded = [];
onJSFilesLoaded.push(function(){
if (document.getElementById('module_menu111111111')) {
    var showTopArticle = function(){
var a=  document.getElementById('module_menu111111111');      
new Element('li', {
            id: "articleauto",
            html: a.innerHTML
        }).inject($("ulmodules"), "top");

        
    };
    showTopArticle();

    Loader.onloadxhr2 = Loader.onloadxhr;
    Loader.onloadxhr = function(){
        Loader.onloadxhr2.apply(this);
        if(!this.nohistory)
            showTopArticle();

   };

}});

Cette bibliothèque présente l'avantage de reconnaître automatiquement le langage utilisé. Il reste néanmoins possible de définir le langage voulu.

1. Installation

La première chose consiste à télécharger les fichiers source ici: https://highlightjs.org/download/

Sur la page de téléchargement, cochez les langages qui vous interessent puis cliquez sur download (il est inutile de prendre des langages dont vous ne vous servirez pas de manière à obtenir le fichier javascript le plus petit possible).

Vous obtiendrez un fichier.zip qu'il vous suffit de décompresser sur votre disque dur.

Celui-ci contient le fichier highlight.pack.js ainsi que les fichiers de style css.

Choisissez le style css que vous voulez. Voir les différents styles ici : https://highlightjs.org/static/test.html

Lorsque votre choix est fait, enregistrez highlight.pack.js parmi les fichiers de votre blog (je vous conseille de le placer dans un répertoire que vous pouvez appeler par exemple Highlight)

Copiez ensuite le contenu du fichier css dans Apparence/Modifier le thème / Ajouter du css en commençant par .hljs

Pour ma part, j'ai choisi le style Railscasts. Voir le css ci-dessous

.hljs {
  display: block;
  overflow-x: auto;
  padding: 0.5em;
  background: #232323;
  color: #e6e1dc;
  -webkit-text-size-adjust: none;
}

.hljs-comment,
.hljs-template_comment,
.hljs-javadoc,
.hljs-shebang {
  color: #bc9458;
  font-style: italic;
}

.hljs-keyword,
.ruby .hljs-function .hljs-keyword,
.hljs-request,
.hljs-status,
.nginx .hljs-title,
.method,
.hljs-list .hljs-title {
  color: #c26230;
}

.hljs-string,
.hljs-number,
.hljs-regexp,
.hljs-tag .hljs-value,
.hljs-cdata,
.hljs-filter .hljs-argument,
.hljs-attr_selector,
.apache .hljs-cbracket,
.hljs-date,
.tex .hljs-command,
.markdown .hljs-link_label {
  color: #a5c261;
}

.hljs-subst {
  color: #519f50;
}

.hljs-tag,
.hljs-tag .hljs-keyword,
.hljs-tag .hljs-title,
.hljs-doctype,
.hljs-sub .hljs-identifier,
.hljs-pi,
.input_number {
  color: #e8bf6a;
}

.hljs-identifier {
  color: #d0d0ff;
}

.hljs-class .hljs-title,
.hljs-type,
.smalltalk .hljs-class,
.hljs-javadoctag,
.hljs-yardoctag,
.hljs-phpdoc,
.hljs-dartdoc {
  text-decoration: none;
}

.hljs-constant {
  color: #da4939;
}


.hljs-symbol,
.hljs-built_in,
.ruby .hljs-symbol .hljs-string,
.ruby .hljs-symbol .hljs-identifier,
.markdown .hljs-link_url,
.hljs-attribute {
  color: #6d9cbe;
}

.markdown .hljs-link_url {
  text-decoration: underline;
}



.hljs-params,
.hljs-variable,
.clojure .hljs-attribute {
  color: #d0d0ff;
}

.css .hljs-tag,
.hljs-rules .hljs-property,
.hljs-pseudo,
.tex .hljs-special {
  color: #cda869;
}

.css .hljs-class {
  color: #9b703f;
}

.hljs-rules .hljs-keyword {
  color: #c5af75;
}

.hljs-rules .hljs-value {
  color: #cf6a4c;
}

.css .hljs-id {
  color: #8b98ab;
}

.hljs-annotation,
.apache .hljs-sqbracket,
.nginx .hljs-built_in {
  color: #9b859d;
}

.hljs-preprocessor,
.hljs-preprocessor *,
.hljs-pragma {
  color: #8996a8 !important;
}

.hljs-hexcolor,
.css .hljs-value .hljs-number {
  color: #a5c261;
}

.hljs-title,
.hljs-decorator,
.css .hljs-function {
  color: #ffc66d;
}

.diff .hljs-header,
.hljs-chunk {
  background-color: #2f33ab;
  color: #e6e1dc;
  display: inline-block;
  width: 100%;
}

.diff .hljs-change {
  background-color: #4a410d;
  color: #f8f8f8;
  display: inline-block;
  width: 100%;
}

.hljs-addition {
  background-color: #144212;
  color: #e6e1dc;
  display: inline-block;
  width: 100%;
}

.hljs-deletion {
  background-color: #600;
  color: #e6e1dc;
  display: inline-block;
  width: 100%;
}

.coffeescript .javascript,
.javascript .xml,
.tex .hljs-formula,
.xml .javascript,
.xml .vbscript,
.xml .css,
.xml .hljs-cdata {
  opacity: 0.7;
}

Voilà, les préparatifs sont finis. Passons maintenant à l'utilisation.

2. Mise en place de la coloration Syntaxique

Au début de chaque article contenant du code à colorer, placez le code qui suit en veillant à mettre l'url correspondant à votre fichier highlight.pack.js . Dans mon cas ce fichier se trouve à l'url suivante:http://ekladata.com/Q6z1fQIFevHe5Azzsg82K9y8_I8/highlight-pack.js

<script src="http://ekladata.com/Q6z1fQIFevHe5Azzsg82K9y8_I8/highlight-pack.js"></script>
<script>// <![CDATA[
onJSFilesLoaded.push(function(){
     hljs.initHighlighting.called = false;
     hljs.initHighlighting();});
// ]]></script>

Enfin, pour colorer du code, il vous suffit de le placer entre les balises pre et code comme ceci:

<pre><code>
votre code ...
....
</code></pre>