Coloriser les couleurs d'un fichier CSS dans Emacs

Ce tutoriel s'adresse aux utilisateurs de GNU Emacs et ses dérivés.

Il est fréquent de définir des couleurs dans fichier CSS. Certaines fois, on peut se demander quel couleur est définie par rgb(red-value, green-value, blue-value) ou une valeur hexadécimale. Rainbow mode (écrit par Julien Danjou) est un mode mineur pour Emacs qui colorise les couleurs, ce qui évite de tester avec un fichier HTML ou de passer par un logiciel d'imagerie pour connaitre la couleur.

Exemple

Sans rainbow mode

.blood { color: red; }
.color-hex { color: #e2572e; }
.color-rgb { color: rgb(30, 0, 76); }
.color-rgb2 { color: rgb(30, 60%, 76); }

Avec rainbow mode

.blood { color: red; }
.color-hex { color: #e2572e; }
.color-rgb { color: rgb(30, 0, 76); }
.color-rgb2 { color: rgb(30, 60%, 76); }

Installer

À partir de GNU Emacs 24.1, M-x package-install RET rainbow-mode permet de l'installer à condition que le système de paquet soit activé. Il est aussi possible de le télécharger depuis GNU ELPA et le placer dans un dossier faisant parti de load-path (génaralement ajouté avec (add-to-list 'load-path "~/.emacs.d/packages/")).

Ensuite, il faut configurer Emacs, en modifiant votre fichier de configuration ".emacs" en Emacs Lisp. Il se trouve normalement dans votre dossier personnel, qui sous un système UNIX-like (comme une distribution GNU/Linux ou un *BSD) est facilement accessible avec "~/.emacs" ou "$HOME/.emacs".

Il faut ajouter (require 'rainbow-mode) à votre fichier de configuration. Ensuite pour activer le mode dans un buffer, il faut utiliser M-x rainbow-mode (avec M correspondant à la touche Mêta, généralement Alt).

Gabriel Saldaña explique comment activer le rainbow mode automatiquement en 2 instructions dans le fichier de configuration.
;; Mode CSS et rainbow
(defun all-css-modes() (css-mode) (rainbow-mode))
;; Charge les 2 modes si le nom de fichier fini par .css
(add-to-list 'auto-mode-alist '("\\.css$" . all-css-modes))