Prism

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

  • plugin éditeur pour saisie directe
  • 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
  • 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 éditeur par la méthode classique de Joomla.
    Les fichiers PRISM sont copiés dans le dossier /media/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.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

Configuration LM-Prism

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.

Bouton éditeur de LM-Prism

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

Panneau éditeur de LM-Prism
  • 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.
  • 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.
  • 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.
  • 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.
  • Mode affichage : par défaut le code est affiché dans un bloc PRE sur une nouvelle ligne. Il est possible de l'afficher dans un paragraphe en choisissant le mode inline. Dans ce cas, les options numéro de lignes et info langage ne sont pas disponibles
  • Bouton 'Insérer' : lance la conversion du code et l'insère à la position courante du curseur dans l'article.

le Surlignage partiel de code doit être réalisé directement dans le code par l'insertion de balises mark

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

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

Les points à améliorer

  • Pas de prise en charge des balises <?php et ?> en mode markup. Utiliser le langage PHP
    <h1>Bonjour</h1>
    <h2>Nous somme le 27-04-2017 à 14:52</h2>
    <h1>Bonjour</h1>
    <h2>Nous somme le 27-04-2017 à 14:52</h2>
  • Ascenseur automatique pour les longs codes. Pour l'instant, un style="max-height:100px;" dans la balise PRE remplit parfaitement ce rôle.
  • 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

Support

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

Print Friendly and PDF