Coloration syntaxique pour lignes de code informatique

Écrire du code dans un billet sur Hypothèses est déjà possible. Pour indiquer qu’une partie de votre contenu est du code, écrivez-la dans un bloc “Préformaté” ou un bloc “Code”. Vous pouvez aussi écrire du code au milieu d’un paragraphe de texte en utilisant des accents graves : commencez par un accent grave, puis votre code, et finissez par un autre accent grave – ce qui se trouve entre les deux accents graves doit alors être identifié visuellement comme du code. Pour quitter la balise de code, appuyez sur la flèche droite du clavier (comme pour quitter un hyperlien, du gras ou de l’italique). Pour un code commençant par une lettre qui peut être accentuée, ajoutez un espace après l’accent d’ouverture.

La nouveauté, c’est qu’Hypothèses se dote à présent d’une nouvelle extension, WP-Syntax, dédiée à la coloration syntaxique du code informatique contenu dans un billet. Cette extension se base sur le logiciel libre Geshi, qui permet de coloriser la syntaxe de nombreux langages informatiques. L’extension conserve le formatage du code et permet un affichage de celui-ci avec ou sans numéros de lignes.

L’extension WP-Syntax est difficilement compatible avec le nouvel éditeur de textes de WordPress. Pour utiliser la coloration syntaxique, nous vous conseillons donc de continuer d’utiliser l’éditeur dit “classique” pour les billets le nécessitant.

Avec l’éditeur “classique”, vous pouvez signifier du code en le sélectionnant et en cliquant sur “Préformaté” (Format > Blocks > Pre), ou “Code” (Format > Code). Le format “Pre” prend mieux en charge plusieurs lignes de code, encadre tout le code sélectionné dans un conteneur et conserve les indentations et les retours (non) ligne. Le format “Code” peut être préféré lorsque quelques caractères de code sont insérés dans un paragraphe de texte.

Exemple de texte associé au format "Code"

Exemple de texte associé au format "Pre"

Comment utiliser la coloration syntaxique du code informatique ?

Une fois l’éditeur de texte de votre billet passé en mode texte, il s’agit d’écrire votre code informatique entre des balises

<pre lang="LANGUAGE" line="1"> et </pre>

LANGUAGE étant à remplacer par le langage informatique désiré.

Dans le cas du php nous écrirons :

<pre lang=”php” line=”1″> mon code PHP </pre>

dans le cas de R

<pre lang=”rsplus” line=”1″> mon code R </pre>

L’attribut line=”1″ est optionnel et permet d’avoir les numéros de lignes. Si vous ne souhaitez pas de numéros de lignes, on enlève cet attribut.

<pre lang=”php”> mon code PHP </pre>

Si on veut mettre en surbrillance la ligne 3 d’un code en Ruby, on écrira

<pre lang=”ruby” line=”1″ highlight=”3″> mon code RUBY </pre>

Image à la Une : Photo par rawpixel sous licence Unsplash

---

---