Coloration Syntaxique

Pourquoi un nouveau plugin ?

L’objectif du plugin est d’ajouter très simplement la possibilité de partager des portions de codes informatique au sein de vos contenus éditoriaux (articles, rubriques, etc...).

Le plugin coloration_code permet lui aussi de coloriser vos portions de code mais il utilise la librairie HighlightJS alors que ce plugin utilise PrismJS. Vous avez donc maintenant le choix en fonction de vos besoins si vous préférez HighlightJS ou PrismJS.

Le but de ce plugin est de rester très minimaliste, selon le principe « KISS, Keep It Simple, Stupid ».

Il ne dépend d’aucun autre plugin et charge les css/javascript de coloration syntaxique uniquement si il y a des balises <code> dans la page pour optimiser et alléger le rendu des pages.

Fonctionnalités

• Le plugin ajoute la coloration syntaxique à tous les langages de programmation supportés par la librairie PrismJS. Il inclut aussi la prise en charge des langages spip (pour la typographie SPIP) et spip-squelette (pour les squelettes SPIP) pour faciliter le partage au sein de la communauté SPIP 😊.
• Une unification de l’utilisation des raccourcis typographiques <cadre>, <frame>, et <code> est faite
  pour afficher le même résultat quelque soit le raccourci utilisé.
• Le raccourci <pre> est quant à lui échappé et sécurisé sans traitement des balises <code> qu’il peut contenir.
• Le raccourci typographique backtick simple markdown (ex. `ligne de code...`) est maintenant traité lors de l’appel de la fonction typo(), permettant ainsi d’ajouter du code sur une ligne au fil du texte dans vos titres, sous-titres et autres champs apparentés.
• Le plugin facilite le copier-coller des blocs de code. En survolant un bloc de code, un bouton « Copier » s’affiche et au clic le contenu est copié dans le presse-papier.
• Le plugin corrige aussi un bug du core SPIP qui affiche parfois en base64 des parties d’une portion de code (par exemple : <span class="base64" title="PGNvZGUgY2xhc3M9J3NwaXBfY29kZSBzcGlwX2NvZGVfaW5saW5lJyBkaXI9J2x0cic+dGVzdDwvY29kZT4="></span>).
• Unification de la coloration syntaxique avec le squelette inclure/coloration_syntaxique.html pour pouvoir être utilisé directement depuis un squelette ou un raccourci typographique.
• Chargement des css/javascript de coloration syntaxique uniquement si il y a des balises <code> dans la page pour optimiser et alléger le rendu des pages.
• Un nouveau raccourci typographique SPIP <exemple_de_code> pour présenter proprement un exemple de code html ou spip.

Compatibilité et prérequis du plugin SPIP

Le plugin est compatible avec :

• SPIP 4.2+
• PHP 8.1+

Utilisation

Le plugin utilise le plugin porte_plume pour ajouter des boutons à la barre d’édition de code informatique.

`...votre portion de code...`

Exemples

CSS

Le code suivant :

```css
.container {
	width: 900px;
}
.container div {
	display: inline-block;
	width: 300px;
}
```

Affichera :

HTML

Le code suivant :

```html
<div class="container">
	<div><p>Lorem Elsass ipsum bredele [...]</p></div>
	<div><p>Lorem Elsass ipsum bredele [...]</p></div>
	<div><p>Lorem Elsass ipsum bredele [...]</p></div>
</div>
```

Affichera :

Coloration syntaxique spécifique à SPIP

Pour faciliter le partage de portion de code SPIP et SQUELETTE, le plugin inclut la prise en charge des langages spip (pour la typographie SPIP) et spip-squelette (pour les squelettes SPIP).

Le code suivant :

```spip
{{{ Un intertitre }}}

Du texte avec {de l’italique} et {{du gras}} ou un {{ {mélange des deux} }}.
Un retour à la ligne avec [un lien externe->https://www.spip.net], [un lien interne->art2] et un lien interne avec un titre automatique [->rubrique2].

-* Une liste
-* Une liste
-** Sous élément de liste

-# Une liste ordonnée
-# Une liste ordonnée
-## Sous élément de liste ordonnée

Un séparateur
----
```

Affichera :

Le code suivant :

```spip-squelette
<footer class="footer clearfix" role="contentinfo">
	<p class="colophon">
		<BOUCLE_annee(ARTICLES){par date}{0,1}>[(#DATE|annee|!={#VAL{Y}|date}|oui)[(#DATE|annee)]]</BOUCLE_annee> - </B_annee>[(#DATE|annee) ]#NOM_SITE_SPIP
		<br /><a rel="contents" href="#URL_PAGE{plan}" class="first"><:plan_site:></a>[
		(#SESSION{id_auteur}|non) | <a href="[(#URL_PAGE{login}|parametre_url{url,#SELF})]" rel="nofollow" class='login_modal'><:lien_connecter:></a>][
		(#AUTORISER{ecrire})| <a href="#CONST{_DIR_RESTREINT_ABS}"><:espace_prive:></a>][
		(#SESSION{id_auteur}|oui) | <a href="#URL_LOGOUT" rel="nofollow"><:icone_deconnecter:></a>] | 
		<a rel="nofollow" href="#URL_PAGE{contact}"><:contact:></a> |
		<a href="#URL_PAGE{backend}" rel="alternate" title="<:syndiquer_site:>" class="last">RSS&nbsp;2.0</a>
	</p>
	[<small class="generator"><a href="https://www.spip.net/" rel="generator" title="<:site_realise_avec_spip:>" class="generator spip_out">(#CHEMIN{spip.svg}|balise_svg{'',SPIP})</a></small>]
</footer>
```

Affichera :

Nouveau raccourci SPIP : <exemple_de_code>

Une fois activé, le plugin permet l’utilisation du raccourci <exemple_de_code>...</exemple_de_code> dans vos contenus éditoriaux. Ce raccourci permet de présenter proprement un exemple de code html ou spip qui affichera successivement le rendu puis le code source de l’exemple.

<exemple_de_code>
	Du texte avec {de l’italique} et {{du gras}} ou un {{ {mélange des deux} }}.
</exemple_de_code>

<exemple_de_code|titre=Titre personnalisé>
	Du texte avec {de l’italique} et {{du gras}} ou un {{ {mélange des deux} }}.
</exemple_de_code>

<exemple_de_code|html>
	<div class="container">
		<div><p>Lorem Elsass ipsum bredele [...]</p></div>
		<div><p>Lorem Elsass ipsum bredele [...]</p></div>
		<div><p>Lorem Elsass ipsum bredele [...]</p></div>
	</div>
</exemple_de_code>

2 nouveaux squelettes SPIP pour afficher des portions de code informatique

Vous trouverez une explication plus détaillée des paramètres d’inclusions directement dans le code source de chaque squelette.

#SET{code,#CHEMIN{demo/coloration_syntaxique_code.html}|spip_file_get_contents}
<INCLURE{
	fond=inclure/coloration_syntaxique,
	langage=html,
	code=#GET{code},
}>

#SET{code,#CHEMIN{demo/coloration_syntaxique_exemple_de_code.spip}|spip_file_get_contents}
<INCLURE{
	fond=inclure/exemple_de_code,
	code=#GET{code},
}>