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.