Colorisateur de CSS

Actualitéaccessibilité

Publié par (membre du staff)
le , mis à jour le (14459 lectures)

Qwix [fr] nous propose un Colorisateur syntaxique de CSS , utilisable sur n'importe quelle page web ou blog pour mettre en valeur une partie de code CSS.

Voici le code de la fonction :

 <?php
function cssColor(&$texteAColorer)
{
    //je remplace déjà les chaines entre doubles quotes en premier
 lieu dans les CSS sinon tout merde:
    $texteAColorer = preg_replace('#("[a-z0-9\s.-]+")#i', '<
span class="couleurChaine">$1</span>', $texteAColorer) ;

    $patterns = array(
    //je récupère le nom de la CSS
        '#^([a-z0-9.:@*\s,\#_><+\[\|=\]()"-]+[\s]*{)#mi',
        //je récupère les commentaires dans les css
        '#(/\*[^/\*]+\*/)#',
        //je récupère le texte entre les accolades, mais avant le ':'
        '#^([\t]*[\s]*[a-z0-9_-]+[\s]?):(?![\s\t]*{)#mi',
        //je récupère le texte entre les accolades, mais après le ':' jusqu'au ';'
        //ET NON SUIVI D'UNE FIN DE COMMENTAIRE => */
        '#(.*?)(;|})(?!(?:.*?)\*/)#',
        ) ;
    $remplacements = array(
        '<span class="couleurSelecteur">$1</span>',
        '<span class="couleurCommentaire">$1</span>',
        '<span class="couleurPropriete">$1</span><
span class="couleurSelecteur">:</span>',
        '<span class="couleurValeur">$1</span><
span class="couleurSelecteur">$2</span>'
        ) ;
    $texteAColorer = preg_replace($patterns, $remplacements, $texteAColorer) ;
}//fin fonction colorationSyntaxique
?>

La fonction s'utilise ainsi :

<?php 
$css = 'votre code CSS' ; 
cssColor($css) ; 
echo nl2br($css) ; 
?>

Vous avez la possibilité de faire vos tests ou de reporter les éventuels bugs sur le Blog de Qwix

Voici, pour exemple, un extrait de la CSS des tutos d'Alsacréations:

html, body { width: 100%; height: 100%; }

body { margin : 0; padding : 0; font-family : Verdana, Arial, Helvetica, sans-serif; font-size : 0.8em; background-color: white; }

#header { height : 100px; background : url(header.jpg) top left no-repeat; margin:0; position: absolute; left:0; top:0; width: 100%; }

#slogan { margin-left: 180px; margin-top: 50px; }

EDIT : Vous retrouverez la version définitive et corrigée du colorisateur à cette adresse.

Commentaires clos