Home GitHub Twitter

Syntax Highlighting for Mephisto

Je complèterai un peu ce billet plus tard. Pour l’heure, une démarche sommaire pour mettre en place un module de syntax highlighting sur votre Mephisto’blog.
Il existe de nombreuses autres méthodes a priori, j’en essayerai certainement quelques unes pour voir, pour des questions de performance et d’évolutivité, stay tuned :-)

Téléchargement :

$ cd /tmp
$ wget http://syntaxhighlighter.googlecode.com/files/SyntaxHighlighter_1.5.1.rar
$ mkdir sh && unrar e SyntaxHighlighter_1.5.1.rar sh/
$ wget http://bboy.mr.freeze.googlepages.com/shBrushBash.js && mv shBrushBash.js sh/

Intégration à Mephisto :

$ cd /home/app/mephisto
$ mkdir public/javascripts/syntaxHighlighter/ && cp /tmp/sh/*.js public/javascripts/syntaxHighlighter/
$ mkdir public/stylesheets/syntaxHighlighter && cp /tmp/sh/*.css public/stylesheets/syntaxHighlighter/
$ mkdir public/flash && cp /tmp/sh/*.swf public/flash/

Ajouts dans layout.liquid :

{{ 'syntaxHighlighter/SyntaxHighlighter' | stylesheet }}
{{ 'syntaxHighlighter/shCore' | javascript }}
{{ 'syntaxHighlighter/shBrushRuby' | javascript }}
{{ 'syntaxHighlighter/shBrushCss' | javascript }}
{{ 'syntaxHighlighter/shBrushXml' | javascript }}
{{ 'syntaxHighlighter/shBrushBash' | javascript }}
<script language="javascript">
window.onload = function () {
  dp.SyntaxHighlighter.ClipboardSwf = '/flash/clipboard.swf';
  dp.SyntaxHighlighter.HighlightAll('code');
}
</script>

Et ensuite, il suffit d’appliquer les règles d’utilisation dans vos articles.