WordPress – PrismJS – Visual Editor – Fix code indentation and extra space

Wordpress - PrismJS - Visual Editor - Fix code indentation and extra space

On my WordPress website, I use my own prismJS plugin in order to have a powerful syntax highlighter. I refuse to use a third party plugin, because I won’t rewrite my article in a few years because the plugin is not maintened, have security issue or other things.

To simplify code inclusion, I use shortcuts, for example, if I want to insert yaml code, I use the shortcut [prisms language=”yaml”]

In order to maintain the indentation of my code, I always switch to html editor, copy my code, and update the post. It works correctly, but if I save the post again on the visual editor I lost the indentation (tab and extra space).

  • Is a prismJS issue? no
  • A WordPress issue like wptexturize function? no
  • A font problem, the font is not a monospaced font? no
  • It’s due of a functionality of Tiny MCE: YES!!!

Change the default configuration of TinyMCE :

Wordpress - PrismJS - Visual Editor - Fix code indentation and extra space

Wordpress - PrismJS - Visual Editor - Fix code indentation and extra space

TinyMCE without the option “Keep paragraph tags” :


- 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

TinyMCE with the option “Keep paragraph tags” enabled :


- 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

This hidden option makes me crazy, I wasted more than 8 hours to investigate why I lost my indentation, I even thought about reconsidering the use of my own plugin PrismJS for a third party plugins… But I finally find a way to solve this issue.

03/04/2018 :

20:15 : This issue makes me crazy (dammit, I’ve planed to write a lot of articles about Ansible playbook, if I can’t keep my indentation, my visitor can’t copy/paste and test my proposed Ansible playbooks, I need to find a solution, please god help me, dammit the only god that I can count, it’s ME…

8.15 pm – 10.30 pm : I make a lot of tests, I add some WordPress function find in Internet, I try a monospaced font, etc….

10.30 pm – 11.15 pm : I am finally watching a TV show (but it’s continue to taken it into my head…)

11.15 pm – 11.45 pm: I continue my search on my smartphone (from my bed).

11.45 pm: Eureka, I hope I’ve find a fix to this issue, I wake up and I tested, and its working !!!

11.45pm : I wrote a draft of this article

The wonderful story about a fucking Geek

Sources :

Photo Credit : Use logo of prismJS from the official website : 

https://prismjs.com/

florian

Hi, I'm Florian and I'm 32 years old. I have discover IT at 17, and i had my first internet connection at 23. So i'm not going to say that i was very precocious in this domain... PS : I 'm French, so please, be lenient with my english ;)

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.