Syntax highlighting

Note: si vous lisez ce billet à même votre lecteur de fil RSS/Atom, je vous recommande de venir le lire directement sur le blogue, question de voir le code en couleur !

Je viens d’implanter un système de coloration de syntaxe de code source, à l’aide du plugin Chili pour la librairie Javascript jQuery. J’ai même essayé de recréer les schémas de « colorization » que j’utilise avec Aptana (tels que vus à la télé! dans ce billet).

J’ai pensé qu’il serait bien de démontrer toute la puissance de ce système avec quelques petits exemples:

Tout d’abord du code HTML (et non XHTML — ce qui me fait penser que je devrais poster un billet expliquant pourquoi ce blogue est codé en HTML au lieu de XHTML… quoiqu’un petit tour dans le code source vous donnera un indice !) :

<link rel="openid.server" href="http://www.myopenid.com/server">
<link rel="openid.delegate" href="http://remi.myopenid.com/">
<meta http-equiv="X-XRDS-Location" content="http://www.myopenid.com/xrds?username=remi.myopenid.com">

<link rel="alternate" type="application/atom+xml" title="Effair (remiprevost.com) — tous les billets" href="http://feeds.feedburner.com/Effair">
<link rel="alternate" type="application/atom+xml" title="Effair (remiprevost.com) — billets du blogue" href="http://remiprevost.com/atom/blogue/">
<link rel="alternate" type="application/atom+xml" title="Effair (remiprevost.com) — billets du sideblogue" href="http://remiprevost.com/atom/sideblogue/">

<script src="http://remiprevost.com/public/js/markdown/toolbar.js" type="text/javascript"></script>
<script src="http://remiprevost.com/public/js/markdown/textarea.js" type="text/javascript"></script>
<script src="http://remiprevost.com/public/js/markdown/onload.js" type="text/javascript"></script>

Ensuite, CSS:

body {
  background: #111111 url(images/bg-body.gif) repeat-y top center;
  /*  background: #0F0F0F;*/
  color: #f4f4f4;
  font-size: 0.90em;
  font-family: Arial, sans-serif;
  position: relative;
}

#wrap {
  background: #1d1d1d url(images/bg-wrap_003.gif) repeat-y top center;
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
}

Et finalement, du code PHP (pour les curieux, c’est le code qui génère la page d’archives) :

function archives() {
  $header['titre'] = "Archives";
  $this->load->model('Tags');
  $this->load->model('Billets');

  $data['tags'] = $this->Tags->get_tags_cloud();
  $data['months'] = $this->Billets->get_months_list();

  $output  = $this->load->view('layout/header',$header,true);
  $output .= $this->load->view('archives', $data, true);
  #$output .= acronyms(Smartypants(Markdown($this->load->view('static/archives', null, true))));
  $output .= $this->load->view('layout/footer',null,true);
  echo $output;
}