LM-Prism ~ Coloration syntaxique

 

LM-Prism, l'adaptation de Prism pour Joomla, permet l'affichage de code avec coloration syntaxique dans les articles.

• plugin éditeur pour saisie directe
• neutralisation des caractères ' " ? < > { }
• très léger (28ko tout compris)
• support inclus du HTML, PHP, JS, CSS, LESS, SCSS, SQL, INI
• 111 langages disponibles sur le site Prism
• mention optionnelle des numéros de lignes
• mention du langage (texte personnalisable)
• autres plugins disponibles sur le site Prism
• mise en évidence de lignes
• surlignage partiel de code
• bouton "copy" lors survol en frontend
• utilisable en mode bloc et inline
• adaptation CSS facile
• identification du langage par un cadre de couleur

Exemples

Un code SCSS et son résultat en CSS

            .foo { 
   background-color: red; 
   a { // sélecteur enfant 
      color: white; 
      &:hover { // pseudo-sélecteur 
         color:yellow; 
      } 
   } 
}
        

            .foo { 
   background-color: red; 
} 
.foo a { 
   color: white; 
} 
.foo a:hover { 
	color: yellow; 
}
        

Il est aussi possible d'insérer du code dans du texte, comme ceci <h1>Ceci est un titre</h1>. Une fonctionnalité bien pratique !

Installation

Pour l'instant, il faut réaliser l'installation en 2 étapes :

1. Installation du plugin bouton éditeurpar la méthode classique de Joomla.
   Les fichiers PRISM sont copiés dans le dossier /media/plg_lmprism
2. Le chargement des fichiers à l'aide d'un module tel que LM-Custom ou d'une fonctionnalité similaire déjà présente sur votre site.
   Les fichiers à charger sont :
   • /media/plg_lmprism/lm-prism.js
   • /media/plg_lmprism/lm-prism-coy.css ou sa version minifiée : lm-prism-coy.min.css

La version de PRISM que je propose, qui ne fait que 28Ko, contient :

• les languages markup, clike, javascript, css, css-extras, ini, less, php, php-extras, scss, sql
• les plugins line-highlight et line-numbers
• lm-prism-coy.css, une version adaptée du style COY. Les modifications sont regroupées à la fin du fichier.

Pour info, je n'utilise pas le plugin show-language de PRISM mais des règles CSS qui me permettent de personnaliser le texte affiché.

Configuration

Le seul paramètre du plugin editor-xtd est la liste des langages supportés.

Sa modification n'a d'intérêt que si vous utilisez une version différente des fichiers JS et CSS de Prism

Adapter le CSS des éditeurs

En fonction de l'éditeur que vous utilisez, il pourrait être difficile de visualiser l'utilisation de ce plugin.

Je vous conseille d'ajouter ou de modifier le fichier CSS chargé par votre éditeur.

Voici une idée de personnalisation

pre > code[class^="language-"]{
	border:1px solid #369;
	border-left:5px solid #369;
	padding:4px;
}
:not(pre)>code[class^="language-"]{
	border:1px solid #369;
	padding:0 4px;
}

Utilisation

Pour afficher du code dans un article, il suffit de positionner le curseur à l'emplacement voulu, puis de cliquer sur le bouton au-dessous de la zone d'édition des contenus.

Le plugin est utilisable avec les éditeurs en mode code (CodeMirror, Rockpad, Emmet, ...) et ceux en mode wisiwig (TinyMCE, JCE, ...)

• Code: taper ou coller le code dans cette zone.
  Tous les caractères ambigus seront remplacés.
  Les lignes vides en début et en fin seront automatiquement supprimées.
• Langage: indiquer le langage utilisé. Markup est un mélange de HTML, PHP, ...
  Ce choix conditionne aussi la couleur de la bordure.
• Langage affiché: Le texte qui sera affiché en haut à droite du bloc. Le texte est totalement libre.
• Numéro première ligne: Pour afficher les numéros de ligne, il suffit d'indiquer ici le numéro de la première ligne affichée.
• Ligne(s) en évidence: vous pouvez indiquer les numéros de lignes à mettre en évidence dans le code affiché en les séparant par une virgule. Un groupe de lignes peut être spécifié par 1-5.
• Hauteur maxi du bloc: indiquez la hauteur maximum du bloc pour le code. Un ascenseur sera ajouté si besoin.
• 2 boutons 'Insérer en inline' et 'Insérer comme bloc': lance la conversion du code et l'insère à la position courante du curseur dans l'article au format demandé

le Surlignage partiel de code doit être réalisé directement dans le code par l'insertion de balises mark ou en utilisant le bouton 'couleur de fond' de l'éditeur wysiwyg.

Exemple : le mot <mark>mark</mark> est surlignéaffiche le mot markest surligné

Vous pouvez utiliser langage-none pour ne pas avoir de coloration syntaxique en conservant les facilités de mise en page.

Version 2.3 : ajout d'un bouton COPY pour permettre un copier-coller sans reprendre ces enrichissements.

Les points à améliorer

• Pas de prise en charge des balises <?php et ?>
  • modifier le code retourné par le plugin en mettant le ? en gras : <<b>?</b>php ...
  • Utiliser le langage PHP pour mettre en évidence le code

                      <h1>Bonjour</h1> 
  <h2>Nous sommes le <?php echo date('d-m-Y à H:i'); ?></h2>
                  

                      <h1>Bonjour</h1> 
  <h2>Nous sommes le <?php echo date('d-m-Y à H:i'); ?></h2>
                  

• Manque de précision dans le placement des lignes en évidence. J'ai pondéré la hauteur de ligne utilisée dans les calculs en lui appliquant un coefficient de 0.9. Voir ligne 14 de lmprism.js. c=d(getComputedStyle(e).lineHeight) *0.9

Utiliser une autre version de Prism

Que ce soit pour prendre en charge d'autres langages ou utiliser une présentation différente, cette page vous propose de construire vos fichiers JS et CSS sur mesure.

1. cocher le thème, les langages, les plugins désirés et le mode de compression des fichiers
2. télécharger le fichier JS et le fichier CSS
3. reporter en les adaptant les modifications en fin du fichier lm-prism.css à la fin du nouveau fichier css
4. reporter, si besoin, la modification sur le fichier JS. Je vous laisse trouver sa nouvelle localisation
   c=d(getComputedStyle(e).lineHeight) *0.9
5. indiquer au module de chargement les nouveaux noms des fichiers

Attention, pour minifier le fichier CSS, la plupart des programmes suppriment les guillemets.
Cet outil ne pose pas de souci : www.cleancss.com/css-minify

Téléchargement  

• plg_editors-xtd_lmprism-5.0.1.zip (36.22 ko - 22/02/2024 09:33) téléchargé 5 fois
• plg_editors-xtd_lmprism-3.0.zip (37.42 ko - 26/11/2023 18:26) téléchargé 19 fois

Support

aeSecure

Si vous utilisez aesecure pour protéger votre site, il est possible que la fenêtre de saisie du code ne s'affiche pas ou mal.

Dans ce cas, il faut supprimer "php.ini" de la liste des "interdiction d'accès à certains fichiers par URL" (point 1.7)

Forum

Pour partager vos questions et suggestions, c'est par là : forum LMPrism