WordPress FIX HTML parsing issue – for Developers

It’s really annoying and waste loads of hours trying to fix how can one show example of php code, while still use visual editor for quick snapshots or fancy tools of tinyMCE and able to show color coding examples using google prettify.

Finally I have managed to find ways around it, to fix it and I wanted to share with everyone.

Installing Plugins

We will install following plugins.
  • TinyMCE Advanced     – by Andrew Ozz
  • Preserved HTML Editor Markup   – by Marcus E. Pope, marcuspope
  • Prettify Code Syntax    – by  Jesús Carrera

Fixing Plugins and Code

 Let’s start fixing our wordpress code, which is very quick and easy.

Open the theme’s function.php page “Appearance > Editor > function.php” and add the following lines on top of the file right after php code. 
remove_filter (‘the_content’, ‘wpautop’);
remove_filter(‘the_content’, ‘wptexturize’);
remove_filter("the_content", "convert_chars");
Now let’s fix prettify code syntax plugin. go to Plugins > Prettify Code Syntax > Edit.
we will edit the first page “prettify-code-syntax/prettify-code-syntax.php” code. 
...
public function content_filter($content) {
     $prettify_code = false;
...
Add ‘return $content;’ between them, like following
...
public function content_filter($content) {
    return $content;
    $prettify_code = false;
...

That’s it we are done. Now you can start writing text and php code examples in visual editor, like I did with this post :)

Leave a Reply

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