Resources Loaded in Crayon

I’ve made Crayon with modularity in mind to allow reuse of any components if needed. Here are the Javascript components:

  • js/util.js
  • js/crayon.js
  • js/jquery.popup.js
  • js/fancybox/jquery.fancybox.init.pack.js
  • js/fancybox/fancybox_init.js
  • util/tag-editor/crayon_te.js

util.js has several JavaScript methods that are shared across the admin settings, tag editor, theme editor (coming soon) and of course the front end which displays the Crayons.

crayon.js is the main script which defines the toolbar button events and other settings, like toggling etc.

jquery.popup.js is adapted jquery plugin I use to open a code popup. As of the latest beta commit, disabling the popup now removes this resource.

jquery.fancybox.init.pack.js is a custom version of Fancybox I modified to allow passing in my own fancybox instance without disrupting other fancybox plugins that may be running – otherwise errors occur.

fancybox_init.js serves only the purpose of kickstarting Fancybox with my custom objects, and I agree this is somewhat wasteful of a single request. Although it’ll take less time to transfer than a larger file, I imagine there’s a fixed cost in the latency required to make the request. Mostly for the reason of reducing the number of modules needed, I’ve removed it in the latest beta commit and placed it in util.js.

crayon_te.js is the tag editor. This appears in the front end only if you check “Display the Tag Editor in any TinyMCE instances on the frontend (e.g. bbPress)” – which is off since 1.15 on fresh installs. Having “Attempt to load Crayon’s CSS and JavaScript only when needed” still needs TinyMCE to be disabled on the front end as I’ve now mentioned here.

For CSS:

  • css/crayon_style.css
  • css/global_style.css
  • js/fancybox/jquery.fancybox.css
  • themes/classic/classic.css
  • fonts/monaco.css

crayon_style.css is a the foundation style.
global_style.css are styles shared across the admin and front end (such as the tag editor, which can appear anywhere TinyMCE appears).
jquery.fancybox.css is once again for Fancybox and only loads if the Tag Editor is enabled on the front end.
classic.css is the classic theme. monaco.css is the default font. Since there can be any combination of the last two, mixing them is not practical.

By far the best technique to reduce the number of requests is to use WP Total Cache, which I have ensured Crayon is compatible with since 1.16. This will reduce the JS and CSS to a single file for the entire site. This allows the developer (me) to create modular and reusable components while allowing the client (you) and end users to experience better efficiency. Hope that helps!

  • Dobrosław Żybort

    Is it possible to use Crayon in static pages? Or with other languages than PHP? I would like to use it with Go lang.

    Best regards

    • http://aramk.com/ Aram Kocharyan

      Go lang is supported in languages, and it can be used in static pages as well.

  • kn007

    How can i using the w3tc to reduce the requests?how to setting minify settings?

    • kn007

      ok,i know .it is cache problem

      • http://aramk.com/ Aram Kocharyan

        You may need to clear your W3TC cache from time to time – I’m not sure. But I always clear the cache after making changes to plugins and such.

        • kn007

          thank you

    • http://aramk.com/ Aram Kocharyan

      It’s in Performance > Minify > JS and CSS after enabling W3TC.

  • Pingback: Crayon Syntax Highlighter

  • http://vpsbible.com/ the_guv

    I’m having problems minifying Crayon css files using W3TC, probably due to the complexity of my site. I’ve been trying to deregister the stylesheets in my functions.php (then to add them manually as @imports for W3TC to process), using this code:-

    add_action( ‘wp_print_styles’, ‘my_deregister_styles’, 100 );
    function my_deregister_styles() {
    wp_deregister_style( ‘crayon’ );
    wp_deregister_style( ‘crayon_style’ );
    wp_deregister_style( ‘crayon_global_style’ );
    wp_deregister_style( ‘crayon-font-’ );
    }

    Unfortunately none of those handles – crayon|crayon_style|etc – are working. Enqueue is proving stubborn!

    If you can advise I’d be grateful, thank you.