iDreamMicro - Mot-clé - Coloration syntaxique2023-05-17T23:19:49+02:00Julien Le Sechurn:md5:748efb83ba33c51f389cc9cd76987761DotclearLimiter le nombre de lignes affichées par SyntaxHighlighterurn:md5:370922c0e23d0445bed051612f3dca502011-09-22T11:48:00+02:002012-06-22T14:06:03+02:00Julien Le SechColoration syntaxiqueSyntaxHighlighter<p>
Par défaut, <a href="http://alexgorbatchev.com/SyntaxHighlighter/">SyntaxHighlighter</a> affiche toutes les lignes d'un code source quel qu'en soit le nombre. Dans le cas d'un code source ayant des centaines de lignes, outre le fait qu'en afficher la totalité peut-être gênant, l'intérêt en est très limité voire nul.
</p>
<p>
Cet article présente la solution mise en œuvre sur le blog <a href="http://www.idreammicro.com">iDreamMicro</a> pour limiter le nombre de lignes affichées, et ce en modifiant simplement la feuille de style de SyntaxHighligter.
</p> <p>
Dans le fichier <em><dotclear-path>/themes/<theme>/js/syntaxhighlighter/styles/shCore.css</em>, il faut repérer le bloc <em>.syntaxhighlighter</em> et ajouter la ligne 7.
</p>
<pre class="brush: css; highlight: [7]">
.syntaxhighlighter {
width: 100% !important;
margin: 1em 0 1em 0 !important;
position: relative !important;
overflow: auto !important;
font-size: 1em !important;
max-height: 36em;
}
</pre>
<p>
En affectant la valeur de <em>max-height</em> à 36em, le nombre de lignes affichées est d'une trentaine. Lorsque que le code source à afficher dépasse la hauteur maximale, un ascenseur vertical apparaît et permet de faire défiler le code source.
</p>http://www.idreammicro.com/post/Limitation-du-nombre-de-lignes-affich%C3%A9es-par-SyntaxHighlighter#comment-formhttp://www.idreammicro.com/feed/atom/comments/15Coloration syntaxique dans Dotclear avec SyntaxHighlighterurn:md5:a038acfbe9addc491228e4fe80adc8ea2011-08-11T15:55:00+02:002011-08-12T09:40:10+02:00Julien Le SechColoration syntaxiqueDotclearSyntaxHighlighter<pre class="brush: c" title="helloworld.c">
#include <stdio.h>
#include <stdlib.h>
int main(void)
{
printf("Hello World!");
return EXIT_SUCCESS;
}
</pre>
<p>
Le <a href="http://www.idreammicro.com">blog iDreamMicro</a> traite essentiellement de développement logiciel. Qui dit développement logiciel dit code source. Qui dit code source dit <a href="http://fr.wikipedia.org/wiki/Coloration_syntaxique">coloration syntaxique</a>, fonctionnalité indispensable pour présenter du code source de manière claire et lisible.
</p>
<p>
Parmi tous les <em>plugins</em> et outils disponibles, le choix s'est porté sur <a href="http://alexgorbatchev.com/SyntaxHighlighter/">SyntaxHighlighter</a> d'Alex Gorbatchev.
</p>
<p>Cet article présente la manière dont SyntaxHighlighter est intégré à ce blog <a href="http://dotclear.org/">Dotclear</a>. Il n'a pas vocation à remplacer la <a href="http://alexgorbatchev.com/SyntaxHighlighter/manual/installation.html">documentation officielle</a>. Mais il faut avouer que mener à bien cette intégration nécessite un réel effort de compréhension.
</p> <h2>Téléchargement</h2>
<p>
Le meilleur moyen de se procurer SyntaxHighlighter, et plus particulièrement la dernière version, est de se rendre sur la <a href="http://alexgorbatchev.com/SyntaxHighlighter/download/">page de téléchargement</a> du site officiel.
</p>
<p>
Il faut ensuite décompresser l'archive précédemment téléchargée et la télécharger sur le serveur du blog, et plus particulièrement dans le sous-dossier <em>js</em> du <em>template</em> Dotclear. Ici, l'emplacement de destination est le dossier <em>/themes/idreammicro/js/syntaxhighlighter/</em>.
</p>
<p>
Dotclear définit le <em>tag</em> <a href="http://fr.dotclear.org/documentation/2.0/resources/themes/tags/blogthemeurl"><em>{{tpl:BlogThemeURL}}</em></a> permettant d'indiquer l'emplacement du thème courant. Par la suite, c'est cet emplacement qui sera privilégié : <em>{{tpl:BlogThemeURL}}/js/syntaxhighlighter/</em>.
</p>
<h2>Intégration</h2>
<p>
L'intégration de SyntaxHighlighter dans Dotclear se fait en modifiant le <em>template</em> utilisé et plus particulièrement les fichiers <em>_top.html</em> et <em>_footer.html</em>.
</p>
<h3>Fichier _top.html</h3>
<p>
Dans le fichier <em>_top.html</em>, on indique l'emplacement du <em>core</em> de SyntaxHighlighter (ligne 3) ainsi que les feuilles de styles à utiliser (lignes 5 et 6).
</p>
<pre class="brush: html" title="_top.html">
<!-- Syntax Highlighter -->
<!-- Include required JS files -->
<script type="text/javascript" src="http://www.idreammicro.com/post/{{tpl:BlogThemeURL}}/js/syntaxhighlighter/scripts/shCore.js"></script>
<!-- Include *at least* the core style and default theme -->
<link href="http://www.idreammicro.com/post/{{tpl:BlogThemeURL}}/js/syntaxhighlighter/styles/shCore.css" rel="stylesheet" type="text/css" />
<link href="http://www.idreammicro.com/post/{{tpl:BlogThemeURL}}/js/syntaxhighlighter/styles/shThemeDefault.css" rel="stylesheet" type="text/css" />
</pre>
<h3>Fichier _footer.html</h3>
<p>
Dans le fichier <em>_footer.html</em>, on indique l'emplacement des fichiers Javascript de SyntaxHighlighter (lignes 2 et 3) ainsi que les <a href="http://alexgorbatchev.com/SyntaxHighlighter/manual/brushes/"><em>brushes</em></a> à utiliser (lignes 16 à 20), chacune correspondant à un langage. Il est également possible de changer les <a href="http://alexgorbatchev.com/SyntaxHighlighter/manual/configuration/">options</a> de SyntaxHighlighter, par exemple désactiver l'affichage de la barre d'outils (ligne 21).
</p>
<pre class="brush: html" title="_footer.html">
<!-- Syntax Highlighter -->
<script src="http://www.idreammicro.com/post/{{tpl:BlogThemeURL}}/js/syntaxhighlighter/scripts/shCore.js" type="text/javascript"></script>
<script src="http://www.idreammicro.com/post/{{tpl:BlogThemeURL}}/js/syntaxhighlighter/scripts/shAutoloader.js" type="text/javascript"></script>
<script type="text/javascript">
function path()
{
var args = arguments,
result = []
;
for(var i = 0; i < args.length; i++)
result.push(args[i].replace('@', '{{tpl:BlogThemeURL}}/js/syntaxhighlighter/scripts/'));
return result;
};
SyntaxHighlighter.autoloader.apply(null, path(
'bash @shBrushBash.js',
'c cpp @shBrushCpp.js',
'python @shBrushPython.js'
));
SyntaxHighlighter.defaults['toolbar'] = false;
SyntaxHighlighter.all();
</script>
</pre>
<h2>Le mot de la fin</h2>
<p>
L'intégration de SyntaxHighlighter dans Dotclear est terminée, de la manière la plus simple possible. De nombreuses autres possibilités et exemples sont à découvrir sur le site officiel : <em>brushes</em> et styles personnalisés, paramètres de configuration, etc...
</p>http://www.idreammicro.com/post/Coloration-syntaxique-dans-Dotclear-avec-SyntaxHighlighter#comment-formhttp://www.idreammicro.com/feed/atom/comments/12