Crayon Syntax Highlighter WordPress Plugin – How to Stop Loading CSS and JS files

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 JS 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

On Crunchify.com I’ve copied CSS content from obsidian.css and consolas.css files to theme’s style.css file. So after removing both CSS files we may not loose Crayon styles.

Step-5

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' );   // CSS $handle
	wp_deregister_style ( 'crayon-theme-obsidian' );   // 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-6

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.

The post Crayon Syntax Highlighter WordPress Plugin – How to Stop Loading CSS and JS files appeared first on Crunchify.
Author: Arpit Shah