Force ignore Prettify within Redactor Editor?

Question

I am currently looking for a way to implement prettify into my website to allow for code snippets to be posted within the content of pages.

The Problem: I am using Redactor WYSIWYG and this is causing some problems within the editor (prettify styles the code block within the editor, adding the styled html to the HTML view as well as the submission of the content to the database)

Is there any way to force redactor to ignore the prettify styling when editing content, and only have the styling applied to the final submitted content (when displayed on a page).

Display Example: Prettify on front end only (no styling submitted with the content). enter image description here

Editor Example: I don't want the editor to be prettified. enter image description here

Problem Example: This is why I don't want the editor to apply prettify. enter image description here

The problem with this is, when you come back to edit the article it applies the prettify styling within the content, and then that styling displays as plain text (as part of the content of the code snippet).

Is there any way to force ignore prettify within Redactor or a work around to my problem?

Prettify source: https://github.com/google/code-prettify

Redactor: http://imperavi.com/redactor/

Is there possibly another syntax highlighter similar that allows me to disable the formatting within certain elements by chance, or better alternatives to Prettify? — Meta

Meta Meta · Accepted Answer · 2015-06-05T01:34:31

For anyone else interested in using Prettify in conjunction with Redactor on their website, I resolved my issue with the following javascript:

$(document).ready(function() {
            if (!$('#redactor').length){
                //Redactor Editor Not Found
                var x = document.createElement('script');
                    x.src = 'js/prettify/run_prettify.js?autoload=true';
                    document.getElementsByTagName("head")[0].appendChild(x);
            }
        });

On load, the script will look for anything containining id="redactor" and if it is not found, it then loads the prettify script, otherwise if redactor is found (meaning you have an editor on the page), it is never loaded.

This keeps redactor from inheriting prettify styling within the editor and submitting it within your content.

Force ignore Prettify within Redactor Editor?

1 Answers