SPIP-Contrib

SPIP-Contrib

عربي | Deutsch | English | Español | français | italiano | Nederlands

288 Plugins, 197 contribs sur SPIP-Zone, 109 visiteurs en ce moment

Accueil > Rédaction > Assistants de rédaction > Coloration code > Du joli code dans les articles

Du joli code dans les articles

7 décembre 2004 – par mortimer – 13 commentaires

4 votes

Ceci est une ARCHIVE, peut-être périmée. Vérifiez bien les compatibilités !

Ou comment avoir du code coloré dans spip grâce aux nouveaux points d’entrée dans inc_texte. une démo ici.

Quand on insère du code dans un article avec les balises <code>, on peut avoir une présentation différente en ajustant le style css. Pourtant, pour des gros morceaux de code, ça fait vite mal aux yeux.

screenshot
un screenshot de la version complexe. On y voit du code php, java et html coloré.

Voici une utilisation des points d’entrée dans inc_texte.php3 pour faire du « syntax highlighting » du code inséré dans les articles. Ainsi, comme dans tout bon éditeur de code, on peut voir les mots clefs, nom de fonctions etc... dans des couleurs différentes. On a ainsi une lecture plus rapide.

-  La version « simple » utilise une fonction de php existante pour colorer du code php compris entre des balises <ccode> et </ccode>.

-  La version plus complexe nécessite l’installation d’un module php externe disponible ici ou en version améliorée par mes petites mains ici qui permet de colorer n’importe quel langage [1].

les codes spécifiques se trouvent après l’explication.

Méthode

A partir de la version 1.7.1 de SPIP deux points d’entrée dans inc_texte.php3 sont fournis [2]. Ce fichier est responsable du traitement des raccourcis typographiques que les rédacteurs utilisent quand ils écrivent un article (gras, italique, balises code, etc...) :
-  avant_propre permet de traiter le texte avant que SPIP ne le traite lui même et donc d’intercepter des raccourcis qui seraient modifiés par SPIP autrement.
-  apres_propre permet de traiter le texte après tous les traitements de SPIP.

Vous pouvez donc implémenter, dans votre propre fichier ecrire/mes_options.php des pré/post-traitements pour des nouveaux raccourcis. Voir par exemple cet article, ou ce wiki et cette explication de Fil.

Bon, je vous ment un tout petit peu. Spip, avant d’appeler avant_propre, va échapper (les enlever du texte) certaines parties du texte qui pourraient être sensibles. par exemple le code entre balises <code>. Une fois tout le traitement typographique fait (et donc après apres_propre), Spip réinsère le texte échappé au bon endroit. On verra ce que cela implique dans quelques instants.

La méthode que l’on va utilisée est la même : échapper le code entre les balises <ccode> </ccode> pour le réinsérer tout à la fin avec les informations de couleurs.

Version Simple

Ici, je dit version simple, mais elle implique la même utilisation des points d’entrée dans inc_texte. La seule différence est la technique de coloration du code, qui implique une toute petite différence dans le code de ecrire/mes_options.php3.

Coloration

PHP fournie, avec la fonction highlight_string un moyen de colorer du code. Il y a deux conditions :
-  il doit s’agir de code PHP [3],
-  le code doit être compris entre les balises php standards : <?php et ?> .

prétraitement du texte

dans ecrire/mes_options.php3

Ce code permet d’échapper le code qui se trouve entre nos deux balises. On remplace cette partie du texte par une balise spéciale [4] <@@colorercode_..> qui comprend un index dans le tableau dans lequel on stoque temporairement le code escamoté.

post traitement

dans ecrire/mes_options.php3

Cette fonction est donc appelée à la fin du traitement. On y remplace toutes les balises d’échappement (<@@colorercode_..>) par le code coloré.

On récupère l’index dans le tableau, puis on appelle la fonction highlight sur le code. Il faut ensuite lui faire un petit traitement :
-  on ajoute le code de formatage, qui met le code coloré dans un DIV de classe spip_ccode [5],
-  on enléve les balises code (html cette fois, pas spip) ajoutées par la fonction highlight,

La dernière étape nécessite quelques explication. Comme mentionné plus tôt, SPIP échappe un certain nombre de chose avant d’appeler avant_propre, et le remplace par des balises spéciales. Si dans notre code, spip a trouvé quelque chose à échappé (par exemple certain code html au milieu du code php), alors il le fera [6].

Mais les balises spéciales spip sont ensuite traitées par l’highlighter, ainsi les < et > sont remplacés par &lt; et &gt;. On doit donc les retransformer pour avoir des < et >.

Cela pose un deuxième problème, prenons un exemple : Si votre code php contient une balise d’image

$reg = "/<img src='IMG\/([^']+)'.+alt=(.+) title=([^>]+)>/";

,
alors spip va l’échapper :
$reg = "<@@SPIPSOURCEPROPREX@@>";
et le remettre en place après votre traitement du code php. Ainsi la chaine de caractéres ne sera pas colorée, mais prise comme une vraie balise html [7]. il faut donc mettre tout le code html qui se trouve dans votre code php entre balises spip <code>, sous peine d’avoir de mauvaises surprises. Ainsi notre exemple devra être écrit :
$reg = "/<code><img src='IMG\/([^']+)'.+alt=(.+) title=([^>]+)></code>/";

il faut ensuite faire attention au style. Insérez ce code [8] :

dans habillage.css par exemple

dans votre fichier css [9], pour annuler le style .spip_code à l’intérieur d’un bloc .spip_ccode.

Méthode « complexe »

Ici je décris l’installation du code Beautifier et donne un code adapté d’avant_propre et apres_propre. La technique utilisée dans ces deux méthode n’étant pas différente, je ne la redécris pas.

Beautifier

Je vous conseille d’utiliser l’adaptation du beautifier disponible ici [10].

Le beautifier est simple à installer :
- télécharger les fichiers de base,
- télécharger aussi les fichiers de formatages pour les langages qui vous intéressent.
- décompresser les packages où vous voulez dans votre repertoire spip (par exemple dans ecrire/)
- adapté le chemin dans le fichier Beautifier/Init.php
- adapté le chemin dans la fonction décrite ici.

On va donc appeler depuis spip la fonction du beautifier de cette façon :

dans ecrire/mes_options.php3

elle prend deux paramètre : le code à colorer, et le type du fichier (langage).

il vous faudra aussi ajouter ces styles à votre css [9] [11] :

dans habillage.css par exemple

code de traitement du raccourcis

avant_propre et apres_propre ne changent pas beaucoup ici, on les adapte juste pour utiliser des balises au format
<ccode(nom_du_langage)> code à colorer </ccode>

le nom du langage etant le nom dans le fichier HFile, par exemple pour du php3, on a un fichier HFile_php3.php, on donnera donc le nom de langage php3.

dans ecrire/mes_options.php3

Notes

[1Plus de 200 fichiers de configuration sont déjà disponibles.

[2voir l’annonce dans les archives de spip-core

[3du code perl ou C passe à peut pret, vue la similitude.

[4cette technique est justement celle utilisée par SPIP

[5à ajouter à votre fichier css

[6SPIP échappe le texte avec des expressions régulières. Il échappe tout ce qui se trouve entre balise html, code, cadre et poesie. Mais aussi tout code html qui pourrait être mal interprété par le moteur de typographie, soit, tout code html qui ressemble à <[a-zA-Z!][^<>!':;\?]*[!':;\?][^<>]*>

[7i.e. le navigateur cherchera à afficher une image appelée $source.

[8adapté à votre style

[9habillage.css par exemple

[10la condition d’utilisation est de mettre un lien sur votre site vers les sources.

[11et à ecrire/spip_style.php si vous voulez voir la tête du texte dans la partie privée du site.

Dernière modification de cette page le 11 février 2007

Retour en haut de la page

Vos commentaires

  • Le 26 février 2007 à 23:47, par ? En réponse à : Du joli code dans les articles

    Pour ceux qui ne l’auraient pas vu, dans la partie « compliquée » il manque les fonctions avant_propre et apres_propre à récupérer de la partie « simple » et à mettre dans ecrire/mes_fonctions.php(3) également.

    Belle contribution en tout cas !

    Répondre à ce message

  • Le 3 mai 2008 à 14:19, par ? En réponse à : Du joli code dans les articles

    Maintenant on peut utiliser en plus du plugin officiel un autre plugin : SyntaxHighlighter pour SPIP

    Répondre à ce message

  • Le 5 novembre 2005 à 17:39, par Balluche En réponse à : Du joli code dans les articles

    J’ai modifié ta contrib pour utiliser d’autres langages (colorisés à la sauce PHP). Cà peut être utile pour mettre en valeur du code HTML par exemple sans utiliser de programme externe.

    Répondre à ce message

  • Le 22 juin 2005 à 09:21, par Nicolas En réponse à : > Du joli code dans les articles

    Tout d’abord merci pour cet article très intéressant.

    Par gout personnel, j’ai remplacé l’utilisation de beautifier par GeSHI. Pour cela, il suffit de modifier la fonction
    apres_colorer_code comme ceci :

    (...)
    while (ereg('<@@colorercode_([^_]+)_([0-9]+)@@>', $texte, $regs)) {
    $lenum = $regs[2];

    include_once('geshi.php');
    $geshi =& new GeSHi($code_a_colorer[$lenum], $regs[1]);
    $lecode = $geshi->parse_code();

    $pos = strpos($texte, $regs[0]);
    (...)

    Sinon, l’on souhaite une expression régulière plus courte en voici une :

    $regexp_echap = ",<ccode\((\w+)\)>(.*?)</ccode>,ims";
    • Le 22 juin 2005 à 16:42, par mortimer En réponse à : > Du joli code dans les articles

      normalement, la fonction my_higlight_string et faite pour être modifiée et brancher un autre systéme. C’est peut être un peu plus simple de proposer une nouvelle fonction :


      je ne connaissait pas ce script, il a l’air vraiment interessant, est-ce que c’est facile d’ajouter un langage ?

    Répondre à ce message

  • Le 19 décembre 2004 à 01:49, par Hapax En réponse à : > Du joli code dans les articles

    « screenshot » se dit « copie d’écran » ; « syntaxe highlighting » se dit « surlignement syntaxique » ; etc... si si ! c’est important.

    • Le 2 janvier 2005 à 16:12, par bmr En réponse à : Du joli code dans les articles

      100% d’accord avec toi, Hapax.

      Malgré tout je suis surpris que ce soit le seul commentaire pour cet intéressant article, qui une application de avant_propre et apres_propre. J’avais déjà lu les explications indiquées en tête de cet article, auxquelles je n’avais rien compris. Me voilà comblé maintenant. Reste plus qu’à utiliser cette contrib et à l’adapter à mes besoins.

    • Le 2 janvier 2005 à 20:19, par bmr En réponse à : Du joli code dans les articles

      Je veux afficher du code HTML, mais j’ai l’impression que c’est l’expression

      $regexp_echap = "(<ccode>(([^<]|<[^/]|</[^c]|</c[^c]|</cc[^o]|</cco[^d]|</ccod[^e]|</ccode[^>])*)<\/ccode>)";

      qui ne sait pas délimiter certaines séquences ...</ccode.

      Pour moi ce genre de regexp, c’est l’enfer ! Je me demande d’ailleurs pourquoi il n’existe pas quelque chose pour interdire une séquence de caractères. Peut-être avec une référence arrière ? mais je ne vois pas trop comment...

    • Le 3 janvier 2005 à 18:26, par mortimer En réponse à : > Du joli code dans les articles

      et fin de semaine alors !!

      bon je n’ai plus le droit d’ecriture sur l’article, ça tombe mal.

    • Le 3 janvier 2005 à 19:01, par mortimer En réponse à : > Du joli code dans les articles

      je crois qu’on peut faire cela. J’ai découvert après et jamais essayé :

        $regexp_echap = "(<ccode\\((.+)\\)>(.*)<\/ccode>)U";

      mais attention, il faut aussi reprendre les index plus loin.

      Qu’est ce qui passe pas comme code html en fait ?

    • Le 3 janvier 2005 à 23:47, par bmr En réponse à : Du joli code dans les articles

      Escuses. J’ai testé la regexp toute seule. Elle marche très bien. Donc elle n’est pas en cause...

      J’ai des balises HTML entre et le script en masque certaines. Je viens de trouver la raison pour certaines : les balises qui entourent une page HTML sont prises pour des raccourcis du même nom. Mais il y a d’autres choses que je ne comprends pas et SPIP met des @@SPIP_SOURCEPROPREXX@@ (sans <> autour) dans les $code_a_colorer[$colo_code_ech].

      Ayant utilisé Beautifier avec le fichier html fourni, comme ça ne fonctionnait pas, je suis passé à la méthode simple et encore sans highlight_text. J’utilise une méthode simple pour passer les balises HTML en < et >.

    • Le 4 janvier 2005 à 15:05, par mortimer En réponse à : > Du joli code dans les articles

      Ok, le problème est expliqué dans l’article :

      SPIP appelle sa fonction d’échappement des blocs « code », « html », « cadre » etc... avant celle fournit ici et je n’y peut rien :(

      La méthode, vraiment pas cool quand on doit utiliser <html>, c’est d’écrire <code><html></code>.

      La deuxième méthode, pas très cool non plus, c’est les &lt ; à la place des <.

      Dans les deux cas, beautifier sera perdu et ne pourra pas colorer les parties échappées.

    Répondre à ce message

Répondre à cet article

Qui êtes-vous ?

Pour afficher votre trombine avec votre message, enregistrez-la d’abord sur gravatar.com (gratuit et indolore) et n’oubliez pas d’indiquer votre adresse e-mail ici.

Ajoutez votre commentaire ici Les choses à faire avant de poser une question (Prolégomènes aux rapports de bugs. )
Ajouter un document

Retour en haut de la page

Ça discute par ici

  • Agenda 2.0

    3 novembre 2008 – 1095 commentaires

    Voici la version pour SPIP 2.0 du Plugin Agenda pour SPIP 1.9.2, avec une interface remaniée pour encore plus de plaisir. Pour une documentation concernant l’utilisation d’Agenda 3 pour SPIP 3, veuillez pour l’instant vous référer à SPIP 3, Agenda (...)

  • SpipClear 2.1

    18 avril 2009 – 137 commentaires

    Un squelette de blog parmi les autres, entièrement pompé (avec la permission du concepteur) sur le thème par défaut de DotClear.

  • Diaporama responsive avec Nivo Slider

    15 septembre 2015 – commentaires

    Un diaporama responsive basé sur « Nivoslider ». Introduction Cette contribution est une adaptation liée à Nivo-Slider (http://contrib.spip.net/Nivo-Slider-3747). Ce dernier plugin disponible n’étant pas responsive, nous l’avons refait une adaptation (...)

  • Mon site affiche une page blanche ou je ne peux plus accèder à l’espace privé

    7 février 2008 – 32 commentaires

    Au secours ! « Tout à coup » votre site devient inutilisable ou inaccessible ! Comment faire ? Pourquoi ? Par où commencer ? Sans pouvoir couvrir tous les cas, cet article va essayer de vous guider rapidement vers la (...)

  • Polyhiérarchie

    14 juillet 2009 – 166 commentaires

    Ce plugin permet de rattacher un article ou une rubrique à plusieurs rubriques parentes.