WordPress: Crayon Syntax Highlighter and minifying

I’m using Crayon Syntax Highlighter to show pieces of code on my blog. I’m also using W3 Total Cache for caching and minifying. I’ve noticed an error in the Firebug console when loading my blog:

ReferenceError: CrayonSyntaxSettings is not defined
	...eady:function(a,b){f(".fancybox-overlay").stop(!0,!0);this.overlay||f.extend(thi...

After searching on the web, I found out it seems to be related to minifying of scripts on the page. One solution seemed to be to not use the minifying functionality of W3TC but instead use the Better WordPress Minify plugin.

So I’ve disabled minifying in W3TC (in the General Settings page of W3TC), installed Better WordPress Minify and activated it. Then I emptied all caches and checked again in Firebug but unfortunately saw the following errors:

SyntaxError: syntax error
	<!DOCTYPE html>

ReferenceError: $ is not defined
	...jquery-scroll-up/arrow_up.png'});</script><script type='text/javascript' src="ht...

ReferenceError: jQueryCrayon is not defined
	clearInterval(find_qt_crayon);}},100);};CrayonQuickTags();})(jQueryCrayon);

So I’ve traded 1 error messages for 3… Additionally, I’ve also seen that double-clicking on a piece of code doesn’t show the plain text view anymore.

The only solution I found was to go back to W3TC minifying (I uninstalled Better WordPress Minify) and ignore the error message in Firebug…

Update: I’ve now also tried disabling minifying in W3 Total Cache and using WP Minify instead. Minifying HTML and CSS with this plugin completely broke my layout. And minifying JavaScript also broke Crayon Syntax Highlighter as well as upPrev. So I’ve uninstalled WP Minify and disabled JavaScript minifying in W3 Total Cache.

2 thoughts on “WordPress: Crayon Syntax Highlighter and minifying

  1. Hey, I’m experiencing the same issue with Crayon and W3TC minify. Did you ever find a solution to this? It looks like Crayon injects inline javascript via wordpress’s localize script function, and minify skips over that when consolidating script references. The problem i’m having is that this changes the order in which JS symbols are defined, which causes JS exceptions in the minified code…

    1. I came to the same conclusion. Tried a few other plugins to minify JavaScript but none of them could handle it. So now I only minify HTML and CSS.

Leave a Reply

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