Je vais prendre l'exemple de l'extension bash pour dcGeshi.

dcGeshi

le plugin est à téléchargé sur le blog de clashdesign. Pour l'installer j'ai suivi le mode d'emploi de clashdesign:

  1. installation automatique avec le package-plugin|Installer automatiquement le plugin avec le .pkg.gz ou manuellement avec le .tar.gz] ou bien telechargement du tarball et depot dans le dossier plugin de dotclear2.
  2. modification du _head.hmtl du theme courant:
<style type="text/css" media="screen">
@import url({{tpl:BlogThemeURL}}/style.css);
</style>
<style type="text/css" media="print">
@import url({{tpl:BlogThemeURL}}/../default/print.css);
</style>
<script type="text/javascript" src="{{tpl:BlogThemeURL}}/js/jquery.js"></script>
<script type="text/javascript" src="{{tpl:BlogThemeURL}}/js/jquery.color.js"></script>
<script type="text/javascript" src="{{tpl:BlogThemeURL}}/js/jquery.corner.js"></script>
<script type="text/javascript" src="{{tpl:BlogThemeURL}}/js/perso.js"></script>
<script type="text/javascript" src="{{tpl:BlogThemeURL}}/js/pre2ol.js"></script>

{{tpl:include src="_dcgeshi.html"}}

Feuille de style pour bash

Comme je veux colorer un script bash, je verifie sur le site de geshi que la coloration n'a pas été déjà réalisée par l'équipe de maintenance ... et bien si ! je colle un script lambda dans la zone de texte de test, je choisi démonstration en bash et je valide. Le code source de la page renvoyée me fourni plein d'éléments:

/**
 * GeSHi (C) 2004 - 2007 Nigel McNie, 2007 - 2008 Benny Baumann
 * (http://qbnz.com/highlighter/ and http://geshi.org/)
 */

.bash .de1, .bash .de2 {color: #000060; font-weight: normal;}
.bash  {white-space: nowrap;border: 1px dotted #a0a0a0; font-family: 'Courier New', Courier, monospace; font-size: 110%; background-color: #f0f0f0; margin: 0; line-height: 110%; padding: 0;color: #000099;}
.bash a:link {color: #006;}
.bash a:hover {background-color: #d6d6e6;}
.bash .head {font-family: Verdana, Arial, sans-serif; color: #808080; font-size: 70%; font-weight: bold; background-color: #f0f0ff; border-bottom: 1px solid #d0d0d0; padding: 2px;}
.bash .foot {font-family: Verdana, Arial, sans-serif; color: #808080; font-size: 70%; font-weight: bold; background-color: #f0f0ff; border-top: 1px solid #d0d0d0; padding: 2px;}
.bash .imp {font-weight: bold; color: red;}
.bash li, .bash li.li1 {font-family: 'Courier New', Courier, monospace; color: #000060; background-color: #e0e0e0; padding-bottom: 2px;}
.bash .kw1 {color: #000000; font-weight: bold;}
.bash .kw2 {color: #c20cb9; font-weight: bold;}
.bash .kw3 {color: #7a0874; font-weight: bold;}
.bash .co0 {color: #808080; font-style: italic;}
.bash .es0 {color: #000099; font-weight: bold;font-weight: normal;}
.bash .br0 {color: #7a0874; font-weight: bold;}
.bash .sy0 {color: #000000; font-weight: bold;}
.bash .st0 {color: #ff0000;}
.bash .nu0 {color: #000000;}
.bash .me {1}
.bash .re0 {color: #007800;}
.bash .re1 {color: #007800;}
.bash .re2 {color: #007800;}
.bash .re4 {color: #007800;}

Je fais juste un copier-coller dans repertoireDeDcGeshi/plugin/dcGeshi/_style/style.geshi.css, en fin de fichier et les nouvelles règles css sont rentrées.

Logo de la fenêtre

Le joli logo de la fenêtre de code php:

 

peut-être adapté en remplaçant le logo de php par celui de gnu, en en changeant "php" par "bash" avec GIMP. J'enregistre l'image sous le nom "bash.png" dans le répertoire ..... /plugin/dsGeshi/images. Le tour est joué: je peux avoir une coloration bash en saisissant [bash] comme nom du langage entre les balises de code.

echo 'Ca marche'

Un nouveau langage

Si maintenant je veux un tout autre style, par exemple "console", mais qui n'a pas de coloration syntaxique dans geshi? Je suis la même procédure que précédement pour l'aspect visuel, en prenant l'exemple de la coloration de text en l'appelant .console dans les règles css et en nommant le logo console.png. Je vais dans le répertoire .... /plugin/dcGeshi/Geshi et je choisis le fichier text.php que je copie en console.php, après avoir modifié le nom du langage dans le tableau $langage_data:

$language_data = array (
        'LANG_NAME' => 'console',
        'COMMENT_SINGLE' => array( ),
        'COMMENT_MULTI' => array( ),
        'CASE_KEYWORDS' => GESHI_CAPS_NO_CHANGE,
        'QUOTEMARKS' => array(),
        'ESCAPE_CHAR' => '',
        'KEYWORDS' => array( ),
        'SYMBOLS' => array( ),
        'CASE_SENSITIVE' => array(
                GESHI_COMMENTS => false
                ),

L'activation de cette nouvelle coloration se fait par [console]. Je peux même me définir des mots clés ou des propriétés ou n'importe quoi d'autre, en m'inspirant des autres règles des langages déjà définis...