Problem

The font-family is built-in as “monospace”. We need more better fonts which is more beautiful or can be applied “ClearType”.

Reason

WP-Syntax is using GeSHi as the engine of syntax highlighting. GeSHi insert the sytle to <pre> tag directly instead of using a CSS style file. So it overwrote all the style defined externally.

Solution 1

WP-Syntax provided an action hook to customize GeSHi initialization settings.  We can added below code snippet to functions.php in the theme currently using.

/* Begin WP-Syntax */
add_action('wp_syntax_init_geshi', 'my_custom_geshi_styles');

function my_custom_geshi_styles(&$geshi) {
    $geshi->set_overall_style('font-family: Consolas, Monaco, \'Courier New\', Courier, monospace;');
}
/* End WP-Syntax*/

Solution 2

Use the “!important” rule to override the built-in style of GeSHi.

1. Copy the wp-syntax.css from the plugin folder to the theme folder. WP-Syntax will use the CSS file in theme folder instead of default one in the plugin folder.

2. Add the font-family property to “.wp_syntax pre” selector like below

font-family: Consolas, Monaco, "Courier New", Courier, monospace !important;

Solution 3

Modify the geshi.php directly. Locate and change below line directly

var $overall_style = 'font-family:monospace;';