Pastacode : Notre syntax highlighter !

15. octobre 2013 Plugins 16
Pastacode : Notre syntax highlighter !

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 1.7 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 :

Options de Pastacode
Options de Pastacode

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 pastacode_logo dans la barre d’édition d’un article qui vous permet d’ajouter TRÈS facilement un shortcode, voyez ça :

Le bouton "P"
Le bouton « P »

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 <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;
}

Syntax

Avez-vous déjà un plugin de coloration syntaxique ? Lequel ? Seriez-vous prêt à passer à pastacode ?

Lire la suite

Vous aimez ? Partagez !

Abonnement gratuit à 0€


16 thoughts on “Pastacode : Notre syntax highlighter !”

  • 1
    David on 15 octobre 2013 Répondre
    Bonjour Julio,
    J’utilise WP-Syntax de Steven A. Zahm. Il me convient plutôt bien, mais pastacode me tente, notamment grâce à la possibilité d’inclure des extraits de fichiers externes.
    Je n’ai pas vu dans ta description s’il était possible d’utiliser aussi du code local, dans un par exemple. C’est le cas ? Comment ça marche ?
    David
    • 2
      Julio Potier on 15 octobre 2013
      Hello

      Je viens de modifier le premier paragraphe pour indiquer qu’on peut ajouter du code à copier/coller aussi ;)
      Comment faire ? Cliquer sur le « P » et lire ! C’est tout :D
      Merci
      ps : le plugin arrive en français

  • 3
    Greg on 15 octobre 2013 Répondre
    Salut.

    Le plugin a l’air super.
    J’ai aussi pensé à prism.js pour la V3 de mon site, mais je me suis rendu compte qu’il ralentissait énormément mes pages. Vous avez testé sur une page avec beaucoup de code ? Ce que j’aimais surtout dans prims.js c’est qu’il respecte les standards html, mais venant de Lea Verou ce n’est pas du tout surprenant :p

    GG pour le résultat en tout cas, ça a l’air bien sympa :)
    ++

    • 4
      Julio Potier on 15 octobre 2013
      C’est quoi beaucoup de code ? Combien de lignes ? Combien de fois le shortcode ? Je ne compte pas colorer le core en un article, ce n’est pas le but du plugin non plus. Ici avec mes 2 blocs, je tourne à 0.85s. Vive la Rocket ;)
  • 5
    FxB on 16 octobre 2013 Répondre
    J’utilise WP Gist de Michael Novotny, je vais essayer le Pastacode. Rien que le nom déjà donne faim de test.
    Il manque le pot dans le fichier languages ;) et un i à si dans l’article à « mais s je choisis »
    • 6
      Julio Potier on 16 octobre 2013
      Merci, article MAJ, j’avoue ne jamais mettre le .pot dans mes plugins, juste le po/mo.
      Je ne vais pas dire du mal de ce plugin, mais il ne gère pas de cache et se contente de faire un echo des params URL et FILE du shortcode, exemple :
      [gist url="https://gist.github.com/manovotny/5014426" file="find-this-line-in-load-styles.php"] va donner

      echo ‘<script src="’ . $url . ‘.js?file=’ . $file . ‘"></script>’;

      et le HTML est retourné avec une feuille CSS externe, voyez : https://gist.github.com/manovotny/5014426.js?file=find-this-line-in-load-styles.php.
      Donc, objectivement je préfère Pastacode (sisi objectivement, rien que pour le cache déjà)

      Merci Fx ;)

  • 7
    Manoz on 7 février 2014 Répondre
    Des plugins de colo syntaxique, j’en ai testé une chié parce que je n’ai jamais trouvé un seul plugin qui avait une colo intéressante pour le css (notamment). Manque de tags, sélecteurs non pris en compte, et j’en passe.

    J’ai fais des pull requests à droite à gauche pour ajouter les tags manquants et elles n’ont jamais été étudiées. J’attends encore.

    Du coup je vais tester Pastacode. Il a l’air plutôt mignon même si je ne suis toujours pas fan du style de Prism. Par contre en ouvrant mon webinspector sur ton bout de code, j’ai remarqué qu’il détecte bien les « punctuation » et « markups ». C’est ce qui manque sur beaucoup de plugins et ajouter ses propres regex, à la longue, c’est relou.

    Merci :)

  • 9
    Aurélien Denis on 22 février 2014 Répondre
    Tu pourrais m’expliquer comment publier un code qui est présent sur GitHub avec votre plugin (cf. dernier billet sur wpchannel) ? J’ai pas capté mec ! :)
  • 14
    Mesobius on 15 mars 2014 Répondre
    bonjour,
    plugin super genial, mais j’ai un pb que je ne comprends pas et ca fait 2 jours que je m’arrache les cheveux (j’en ai dejà pas beaucoup ^^)
    bref :
    j’edite ou crée un article. je « pastacode » un code C (en mode manuel, langage C et je colle mon code dans la fenetre de pastacode).
    je fais une preview, tout est OK. Impeccable.
    mais si je sauve l’article et qu’ensuite je fais une preview, alors les
    #include
    sont changés en
    #include
    tout court !
    et je comprends pas comment ça se fait. peut être un truc que j’ai pas compris dans wordpress ou dans pastacode, mais la je seche.
    j’imagine que les sont interpreté comme des balises HTML, mais pourquoi ?
    Vaut-il mieux utiliser un depot de code externe comme GIT ou autre ? perso je prefere laisser mes bouts de code sur mon site perso, mais bon…
    D’avance merci pour votre aide.
  • 15
    Tif on 1 avril 2014 Répondre
    Bonjour,

    Félicitation pour ce plugin simple et efficace. Je l’utilise depuis quelques jours, et après avoir un peu galéré, je trouve le résultat superbe.

    Pour info, un des soucis rencontré concernait l’utilisation de fichiers depuis la bibliothèque. Lorsque les fichiers en question contiennent certains caractères particuliers, des accents par exemple, le chargement ne se fait pas. Je comprends la problématique d’encodage, et ce comportement ne peut pas être vraiment considéré comme un bug, mais j’avoue que ça m’a un peu dérouté… Donc si ça vous arrive, ça n’est pas un problème d’url ou de cache ou de je ne sais quoi d’autre, commencez par vérifier si vos fichiers ne contiennent pas des caractères (trop) spéciaux!

    Merci :-)

  • 16
    Thalie on 30 octobre 2015 Répondre
    Plugin très intéressant.

    Cependant, j’ai essayé avec un bout de code d’une dizaine de ligne et lors de l’affichage, il m’affiche tout sur une seule ligne. Bug ou working as intended (je penche pour la solution n°1) ?

Laisser un commentaire

Avant de parler, merci de lire la charte des commentaires.

Utiliser le tag [php][/php] pour ajouter du code ou utilisez un service comme pastebin.com.
Cibler un commentateur avec un "@", merci à Mention Comments Authors !