Pastacode : Notre syntax highlighter !

par Julio Potier 15. octobre 2013 Plugins

Chronicles Of Syntax

Un plugin de syntax hightlight, vous connaissez ? Il s’agit de pouvoir colorer du code dans le langage de votre choix, dans vos articles, excellent non ? Sauf que d »ici, depuis Pastacode, vous pouvez colorer le code venant de différents services extérieurs comme Gist, Github, Pastebin, Bitbucket, ou un fichier de votre choix hébergé là où bon vous semble ou encore du code à copier/coller directement dans WordPress. Et ça, ça ne court pas les rues.

Ce plugin a été réalisé avec Willy Bahuaud de Wabeo.fr, voici sa présentation du plugin : Pastacode : Embed code pour WordPress

Sin And Syntax

J’utilisais (et j’utilise encore sur mes anciens articles le temps de faire la passe) le fameux plugin syntaxhighlighter de viper007bond, mais j’ai géléré pour bien le mettre en place au début de ma refonte, et il est plus lourd et ne permets pas l’inclusion depuis l’extérieur.

Syntax Error

Le plugin est en version [papii info= »version » plugin= »pastacode »] et va encore s’améliorer avec le temps. Mais pour un premier jet, il est largement suffisant, il inclus la coloration du HTML, CSS, JavaScript, PHP, C, C++, Java, Sass, Python, SQL, Ruby, CoffeeScript, Bash dans 6 thèmes de couleurs différents.

Le plugin a été réalisé avec Willy Bahuaud de Wabeo.fr durant le WordCamp Europe, c’est donc un plugin néerlandais !

Démo de coloration des 20 premières lignes du fichier version.php du core de WordPress (profitez-en pour lire la dernière version en dev) :

Le code ci-dessus est donc forcément à jour, même si vous lisez cet article 1 an après sa publication. C’est là toute la force et l’intérêt du plugin.

Sa configuration est très simple :

Choisissez une durée de cache, entre « Ne jamais mettre en cache » et « Ne jamais recharger le cache » en passant par les incontournables « 1 heure », « 1 semaine » etc, choisissez ensuite un style, si vous désirez afficher les numéros de lignes et les caractères invisibles.

Petite option depuis la 1.2, le bouton pour vider le cache des codes déjà entrés, imaginons que vous ayez mis « ne jamais recharger » et que finalement, vous avez envie de mettre un cache, videz le !

Trees Of Syntax

Un autre petit bonus réalisé par Willy est l’ajout du bouton dans la barre d’édition d’un article qui vous permet d’ajouter TRàˆS facilement un shortcode, voyez ça :

Selon le service sélectionné, les champs se cachent et se montrent, bravo Willy !

Musical Syntax

Et parce qu’on est pas avares en bonus j’en ajoute un. Le plugin contient des hooks vous permettant d’ajouter vos propres services externes. D’ailleurs le code ci-dessus provenant de WordPress est justement la démo. Le plugin ne gère pas les URLs externes pour des raisons de sécurité, mais si je choisis un site de confiance, comme WordPress.org alors je peux me permettre, voici comment faire :

// Ajout du service "wordpress"

add_filter( 'pastacode_services', '_pastacode_services' );

function _pastacode_services( $services ){

	$services['wordpress'] = 'core.svn.wordpress.org'; // label dans le &lt;select>

	return $services;

}



// Ajout de mon champs, le name "path_id" est important

add_action( 'pastacode_fields', '_pastacode_fields' );

function _pastacode_fields( $fields )

{ 

	$fields['wordpress'] = array( 'classes'=>array('wordpress'), 'name'=>'path_id', 'label'=>sprintf( __('File path relative to %s', 'pastacode'), 'http://core.svn.wordpress.org/' ), 'placeholder'=>'trunk/wp-config-sample.php' );

	return $fields;

}



// Ajout de l'url qui doit être contactée pour obtenir le code source

add_filter( 'pastacode_wordpress', '_pastacode_wordpress', 10, 2 );

function _pastacode_wordpress( $source,  $atts )

{

    extract( $atts );

    if( $path_id ) {

        $req  = wp_sprintf( 'http://core.svn.wordpress.org/%s', str_replace( 'http://core.svn.wordpress.org/', '', $path_id ) );

        $code = wp_remote_get( $req );

        if( ! is_wp_error( $code ) && 200 == wp_remote_retrieve_response_code( $code ) ) {

            $data = wp_remote_retrieve_body( $code );

            $source[ 'url' ]  = $req;

            $source[ 'name' ] = basename( $req );

            $source[ 'code' ] = esc_html( $data );                 

        }

    }

    return $source;

}