WordPress – PrismJS – Éditeur Visuel – Indenter facilement votre code

Wordpress - PrismJS - Éditeur Visuel - Indenter votre code

Sur mon site WordPress, j’ai fais le choix d’utiliser mon propre plugin de coloration syntaxique, celui-ci est basé sur PrismJS. Je refuse, en effet, dorénavant, d’utiliser des extensions tierces, afin de ne pas me retrouver dans quelque temps avec un plugin non fonctionnel, avec des failles de sécurités, etc ou toutes autres raisons, qui pourraient m’obliger à mettre à jour l’ensemble de mes articles et donc de perdre énormément de temps.

Afin de simplifier l’ajout de code dans mes articles j’ai fait le choix d’utiliser des shortcode, par exemple, si je souhaite ajouter du code yaml, j’ai juste à mettre mon code entre les balises [[prisms language= »yaml »] mon code yaml [/prismjs]]

Historiquement, pour conserver l’indentation de mon code je basculais sur le mode d’édition texte (html), je copiais mon code, et je sauvegardais mon article. Cette technique fonctionnait correctement, mais dès lors que je sauvegardais de nouveau mon article en mode éditeur, je perdais systématiquement mon indentation.

  • Est-ce un problème avec PrismJS ? Non
  • Un problème WordPress du genre wptexturize ? Non
  • Un problème de choix de police de type non « monospaced » ? Non
  • Un problème lié à l’éditeur Tiny MCE : OUI !!!

Changer la configuration par défaut de Tiny MCE :

Wordpress - PrismJS - Éditeur Visuel - Indenter votre code

Test dans l’option « Conserver les balises de paragraphe » désactivée :


- name: Add Opera Repository
apt_repository:
repo: "deb https://deb.opera.com/opera-stable/ stable non-free"
state: present
- name: Add the Opera APT key
apt_key:
url: https://deb.opera.com/archive.key
state: present
- name: Install opera
apt:
name: {{item}}
state: latest
with_items:
- opera-stable

Test dans l’option « Conserver les balises de paragraphe » activée :


- name: Add Opera Repository
  apt_repository:
    repo: "deb https://deb.opera.com/opera-stable/ stable non-free"
    state: present
- name: Add the Opera APT key
  apt_key:
    url: https://deb.opera.com/archive.key
    state: present
- name: Install opera
  apt:
    name: {{item}}
    state: latest
  with_items:
    - opera-stable

Ce problème m’a gâché une de mes soirées (j’ai dû y passer plus de 3 heures …), car je n’arrivais pas à identifier l’origine du dysfonctionnement, et j’ avais du mal à retranscrire mon problème à mon ami Google.

Ce problème était d’autant plus embêtant que j’avais planifié de faire pas mal d’articles sur Ansible (qui est par définition psychorigide sur l’indentation), du coup mes playbook n’auraient pas été utilisables dans l’état par mes visiteurs ….

Sources :

Crédit photo : Utilisation du logo officiel de prismJS issue du site officiel :

https://prismjs.com/

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.