Crayon Syntax Highlighter is my favorite Syntax highlighter WordPress Plugin. You may have noticed, I use it in almost each and every post for highlighting PHP or Java code.
As it’s very customizable and unique plugin with lots of options it’s very important to have correct options selected.
Let’s get started
We will first look at basic setting options and then we will look at options on how to stop loading CSS and JavaScript on blog front-end.
Step-1
Basic setting.
- Select checkbox for
Enqueue themes in the header - Select checkbox for
Enqueue fonts in the header
Step-2
Make sure you select below settings under Misc setting.
- Select Checkbox for Attempt to load Crayon’s CSS and JavaScript only when needed
- Select Checkbox for Disable enqueuing for page templates that may contain The Loop
- Uncheck option for Load Crayons only from the main WordPress query
Step-3
Crayon loads 4 files on your blog. 3 CSS files and 1 JS file.
From your blog’s header.
From your blog’s footer.
Step-4
Add below code to functions.php file to disable loading both CSS files from header.
// Crayon remove obsidian CSS and consolas Font loading
add_action ( 'wp_enqueue_scripts', 'crunchify_disable_crayon_js_css' );
function crunchify_disable_crayon_js_css() {
wp_deregister_style ( 'crayon-font-consolas' ); // Font CSS $handle
wp_deregister_style ( 'crayon-theme-obsidian' ); // Theme CSS $handle
}
Here crayon-font-consolas and crayon-theme-obsidian are style $handles. Which you could get it by following this tutorial.
Add below code to functions.php file to stop loading crayon.min.js into footer.
// Remove jQuery if not required. This will disable loading crayon.min.js too
function crunchify_remove_jquery() {
if (!is_admin()) {
wp_deregister_script('jquery'); // JS $handle
}
}
add_action('init', 'crunchify_remove_jquery');
Above code should remove 3 files out of 4. I’ve just kept crayon.min.css file in footer as I don’t want to load that big file in header section rather just load it in footer.
Step-5
By above steps, we will get rid-off 3 files out of 4. Now how we could remove crayon.min.css file?
Well, I couldn’t found standard way to remove it by WordPress hook, so I went ahead and removed below 3 lines from crayon_wp.class.php plugin file directly.
Step-6
But now what? We removed total 3 CSS files from loading then how we are going to load Crayon Syntax on site?
NOTE: I personally don’t want to load font CSS so, I just ignored putting font CSS into my style.css file. So we will just talk about 2 files here.
In order to achieve that, on Crunchify.com I’ve copied CSS content from obsidian.css and crayon.min.css files to theme’s style.css file.
So, I believe, you got an idea, right? We ONLY stop loading two files separately but we are loading those files content using our style.css file 🙂
Step-7
In additional to above changes I’ve placed below code to my theme’s style.css file. After removing jQuery now there is no way you could toggle line number or click on popup, etc clickable events. Below code will remove Line number permanently from Crayon code block.
.crayon-table {
margin-left: -27px !important;
}
This is one of the WordPress optimization we should do. In today’s world, Speed is everything and even little optimization may help achieve that goal.