How to resize the SyntaxHighlighter font size to look good?

The CSS rule for the font size can be seen here (for the Highlighter version 3.0, which it looks like you are using).

https://github.com/Automattic/syntaxhighlighter/blob/master/syntaxhighlighter3/styles/shCore.css#L50

The !important makes this trickier, but creating a more specific CSS rule to change the font size, and also using !important, should do it.

You could also look at changing the font size of an enclosing element, so that the 1em font size of the highlighted code will change relative to that. Might be tricky to do across the entire site, though.

Can you please help me with this? Please write the code for my site and send me. I am not good at CSS.

It will be awesome if you send me a small css code which will fix this easily.

I hope for a quick response. Thank you.

Try a code snippet such as the following:

div.syntaxhighlighter {
    font-size: 80% !important;
}

Wow Alex! You Are Awesome. You Made My Day. Thank you so much for your help.

I used to solve this by adding to the site global css:

.code-blk {
	font-size: 10pt !important;
}

Doesn’t seem to do it anymore, I’m guessing the plugin was updated.
So there is no way to do it globally, you have to do it for each occurrence?

Thanks,
Jonas

I tried this code in the site global css but it did not work:
div.syntaxhighlighter {
font-size: 80% !important;
font-family: “Courier New” !important;
}

Hi,

I am going nuts.
How do you include a snippet while using elementor?
I tries the HTML widget without luck.

Any help appreciated!
Thanks
Bas

• This reply was modified 4 years, 4 months ago by quokka013.