Prism

Publié le : 19 janvier 2023 – par bricebou – 16 commentaires

1
2
3
4
5
8 votes

Prism est un plugin pour SPIP visant à faciliter l’édition des contenus en ajoutant la coloration syntaxique aux raccourcis typographiques.

S’appuyant sur les librairies développées par Lea Verou PrismJS et Prism Live, le plugin Prism propose donc une coloration syntaxique des raccourcis SPIP sur tous les textarea (les champs longs de saisie) dotés d’une barre d’édition, c’est-à-dire où le Porte-plume est chargé (par défaut ou grâce au plugin Porte -plume partout).

Il convient de noter que Prism propose la coloration syntaxique et des raccourcis typographiques propres à SPIP et la syntaxe Markdown, lorsque le plugin Markdown est actif et configuré pour appliquer la syntaxe Markdown par défaut.

Discussion

5 ans 1 an 3 mois Sans limite
par date
Filtrer

4 discussions

  • Bredt

    Salut,
    Je suis en train d’essayer d’ajouter via Prism, un bouton de désactivation de la coloration syntaxique, dans le Porte Plume . Tout fonctionne sauf le pipline prism_porte_plume_lien_classe_vers_icone qui n’est pas appelé (j’ai ajouté un die() au debut pour tester) quand le Porte Plume est utilisé. En revanche, ce pipline est appelé en configuration de Prism ...
    Je suis sous SPIP 4.1.15, Prism 1.1.5, Porte plume 3.0.2, PHP 8.1.23, MySQL 5.7
    Si quelqu’un a une idée !!!!
    Merci

    Répondre à ce message

  • 3
    Loiseau2nuit

    Ooooh alors ça c’est énorme ! MErci beaucoup ! 😁

    Mis en test ce jour sur un projet en interne et voici quelques petits retours :

    • je pressentais une incompatibilité avec coloration_code du fait de conflits entre 2 libs différentes de coloration syntaxique, et finalement, cela semble fonctionner so far
    • en revanche il semble que Pre&Code n’apprécie guère la cohabitation et « casse » les cadres de codes de certains langages (dont Powershell pour ce que j’en teste aujourd’hui)
    • La coloration ne fonctionne chez moi pas en front via crayons (mais ça c’est du à ma sauce interne), en revanche il marche très bien côté espace privé avec cependant un comportement bizarre sur le focus souris, dans le sens où le texte ne semble pas être réellement là où tu le vois mais plutôt quelques pixels au dessus ? (voir screenshot)

    En tout cas, c’est beau ! 🙂

    • spipfactory

      ah ben merci loiseau c’est exactement le même pb que l’on ma remonté, il y a quelque jours
      mais au moins toi tu la expliqué correctement ...

    • bricebou

      @Loiseau2nuit
      -  pour Coloration Code, ça dépend de la branche du plugin utilisée ; s’il s’agit de la branche principale ou de la version distribuée via SVP, la coloration se fait côté serveur donc aucun risque d’interaction ;
      -  pour Pre & Code, oui je me doute que ça a potentiellement un impact ; ce serait possible d’avoir plus de précisions ou d’avoir une capture du souci ?
      -  pour une compatibilité avec Crayons il faut utiliser la branche de développement suivante : https://git.spip.net/spip-contrib-extensions/prism/src/branch/dev_crayons

    • Loiseau2nuit

      Hello !
      Je rebondis un peu tard (mais rebondis quand même ^^)

      Pour la capture, elle est dans mon message initial. En fait il s’agit d’un problème connu semble t’il, déjà évoqué dans un thread de ces commentaires et qui t’a déjà été remonté sur git.spip.net

      Pour crayons, vu le projet en question est pour mon taff, je préfère rester sur la branche définitive pour le moment. J’essaierai une version dev_ lorsque je serai sur un projet perso. Après, c’est pas non plus comme si c’était bloquant ;-)

    Répondre à ce message

  • 9
    1138

    Oooh, ça semble bien sympa ! (Je verrai bien sûr à l’usage).

    Serait-il possible de le rendre compatible avec Les crayons ? (J’ai essayé en balançant salement les JS et CSS du plugin dans le head des pages publiques et en ajoutant textarea.crayon-active dans les sélecteurs personnalisés de Porte plume partout, mais ça n’a pas suffi. 😇)

    Merci pour ce plugin.

    1138.

    • bricebou

      Bonjour,

      Arf... Ce n’est pas la première fois qu’il est question de Crayons, mais je n’utilise pas ce plugin malheureusement... Il faudrait que je m’y penche (mais je ne peux garantir de délai ^^)

    • 1138

      Je vois en effet que tu es en formation pour encore quelques mois. ;-)

    • bricebou

      Alors, je viens de faire un premier jet du chargement des scripts et styles en partie publique lorsque le plugin Crayons est activé... Cf. https://git.spip.net/spip-contrib-extensions/prism/issues/7#issuecomment-45985 :)

      C’est sur une branche spécifique : https://git.spip.net/spip-contrib-extensions/prism/src/branch/dev_crayons

      Est-ce que tu aurais moyens de tester et de me faire tes retours ?

      Merci par avance :)

    • YannX

      Bonjour,

      Je decouvre ce plugin grace à la liste ; très intéressant, je vais tester de ce pas.
      @+

    • 1138

      Merci, Bricebou.

      J’ai mis cette version sur un site de tests et, après des tests rapides, ça semble bien fonctionner avec les crayons. \o/

      Par contre, j’en ai profité pour voir ce que ça donne avec le plugin CKEditor – que, là aussi, j’avais installé pour tests. On a alors la barre de CKEditor qui se superpose au texte Prism (voir pièce jointe) mais, surtout, ça rend la chose complètement inutilisable : le texte n’est plus éditable (ni même sélectionnable) et même la barre « ascenseur » n’est plus actionnable. Pareil dans l’espace privé.

      N’ayant pas installé CKEditor sur le site de prod, ça ne va pas poser de problème à mes auteurices mais, pour d’autres personnes, ce peut être un souci. CKEditor étant un éditeur WYSIWYG, j’imagine qu’une solution serait d’avoir l’activation de Prism uniquement sur les champs en syntaxe SPIP…

      Pour info, dans l’espace privé, la structure avec à la fois Prism et CKEditor est la suivante :

      <div class="prism-live" style="font: 400 15.0015px / 22.5px &quot;DejaVu Sans Mono&quot;; font-synthesis: weight style small-caps; font-palette: normal; tab-size: 4;">
	<pre class="markItUpEditor pp_previsualisation no-whitespace-normalization prism-live language-spip_typo" tabindex="0" style="font: inherit; font-synthesis: inherit; font-palette: inherit; tab-size: inherit; height: 519px; display: block;">
		[…]
	</pre>
	<textarea name="texte" id="text_area" rows="10" cols="40" class="markItUpEditor pp_previsualisation language-spip_typo prism-live prism-live-source" style="height: 519px; caret-color: rgb(51, 51, 51); font: inherit; font-synthesis: inherit; font-palette: inherit; tab-size: inherit; padding-left: 15.0015px; display: none; visibility: hidden;" spellcheck="true" lang="fr">
		[…]
	</textarea>
	<div id="cke_text_area" class="cke_2006 cke cke_reset cke_chrome cke_editor_text_area cke_ltr cke_browser_gecko" dir="ltr" role="application" aria-labelledby="cke_text_area_arialbl" lang="fr">
		[…]
	</div>
</div>
    • bricebou

      Merci pour le retour !

      Heureux de voir que cela fonctionne avec Crayons ! Alors, actuellement, j’essaie de réécrire tout le plugin... Donc la bascule de la compatibilité avec Crayons sur une branche distribuée avec SVP risque de traîner un peu... Désolé par avance !

      Par contre, pour ce qui est de CKEditor, je ne pense pas me pencher sur une compatibilité, désolé... Je rajouterai un paragraphe dans la documentation ;)

    • spipfactory

      Bonsoir,

      j’ai rencontré des effets de bord avec le plugin
      un utilisateur de la plateforme ma remonter qu’on ne pouvez pas placer le curseur correctement et que le surlignage pour faire un coupir/coller efface les carractéres visible.

      j’ai donc descativé le plugin pour l’instant sachant que tu travail sur uneversion comptat avec crayons et que nous tuilisons cayons

      @micalement stéphane

    • bricebou

      Bonjour @spipfactory,

      Alors, pour ce qui est de la compatibilité avec Crayons, c’est sur une branche de développement : https://git.spip.net/spip-contrib-extensions/prism/src/branch/dev_crayons

      J’ai travaillé à une réécriture du plugin pour SPIP 4.2+ mais sans support de Crayons pour le moment :-/

    • 1138

      J’ai eu le même problème de décalage entre l’affichage et le texte «  réel  », comme le dit spipfactory ou comme quand on fait une recherche (mais, pour moi, sans même avoir fait de recherche).

      J’aurais voulu illustrer le problème avec une capture animée, mais je n’arrive pas à reproduire le problème.

      Comme ça risquait fort de mettre à mal le travail de mes auteurices, j’ai moi aussi supprimé ce plugin…

    Répondre à ce message

  • Filipe

    Dommage que le plugin ne soit pas compatible avec les versions plus anciennes de SPIP...

    Répondre à ce message

Ajouter un commentaire

Avant de faire part d’un problème sur un plugin X, merci de lire ce qui suit :

  • Désactiver tous les plugins que vous ne voulez pas tester afin de vous assurer que le bug vient bien du plugin X. Cela vous évitera d’écrire sur le forum d’une contribution qui n’est finalement pas en cause.
  • Cherchez et notez les numéros de version de tout ce qui est en place au moment du test :
    • version de SPIP, en bas de la partie privée
    • version du plugin testé et des éventuels plugins nécessités
    • version de PHP (exec=info en partie privée)
    • version de MySQL / SQLite
  • Si votre problème concerne la partie publique de votre site, donnez une URL où le bug est visible, pour que les gens puissent voir par eux-mêmes.
  • En cas de page blanche, merci d’activer l’affichage des erreurs, et d’indiquer ensuite l’erreur qui apparaît.

Merci d’avance pour les personnes qui vous aideront !

Par ailleurs, n’oubliez pas que les contributeurs et contributrices ont une vie en dehors de SPIP.

Qui êtes-vous ?
[Se connecter]

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

Ce champ accepte les raccourcis SPIP {{gras}} {italique} -*liste [texte->url] <quote> <code> et le code HTML <q> <del> <ins>. Pour créer des paragraphes, laissez simplement des lignes vides.

Ajouter un document

Suivre les commentaires : RSS 2.0 | Atom