How to increase the font size of code in Oxygen’s code editor

From the “Why didn’t I do this sooner?” series..

Whoever has decided to come up with 13px font size for the code areas in Oxygen must be in their 20s with excellent eyesight.

I am more like this though:

We can bump up the font size of the code text to 18px (or whatever you want it to be) by overriding Oxygen’s CSS using the oxygen_enqueue_ui_scripts action hook.

Before:

After:

Step 1

Install and activate My Custom Functionality plugin.

Connect to your hosting account using a FTP client or hosting panel’s file manager and navigate to the site’s

/wp-content/plugins/my-custom-functionality-master/assets/css

directory.

Create a file named say, oxy-editor-custom.css in there having the following code:

/* Bump up the font-size of code in Oxygen's code areas from the default 13px to 18px */
.oxygen-sidebar-code-editor-wrap .CodeMirror {
    font-size: 18px !important;
}

Edit plugin.php and add the following inside the custom_enqueue_files() function:

add_action( 'oxygen_enqueue_ui_scripts', 'custom_oxy_editor_css' );
/**
 * Loads CSS in Oxygen editor.
 */
function custom_oxy_editor_css() {

	if ( defined( 'SHOW_CT_BUILDER' ) ) {
		wp_enqueue_style( 'oxy-editor-custom', plugin_dir_url( __FILE__ ) . 'assets/css/oxy-editor-custom.css' );
	}

}

That’s it!

Reference:

https://wpdevdesign.com/oxygen-developers-guide/