syntaxhighlighter icon indicating copy to clipboard operation
syntaxhighlighter copied to clipboard

Allow SyntaxHighlighter to reuse the theme's font family and size

Open jsnajdr opened this issue 4 years ago • 2 comments

On my blog, SyntaxHighlighter block renders like this:

Screenshot 2021-03-04 at 10 14 45

Notice the size and font mismatch between the post text, especially the inline <code> tags, and the syntax highlighted block. That's because the theme defines font-family: monospace for <code>, and it resolves to Courier. While SyntaxHighlighter's own hardcoded styles set a custom font-family, which resolves to Monaco in my case.

I'd like to tell SyntaxHighlighter to only do syntax highlighting and nothing else. For non-related styles, just blend into the blog's theme defaults.

Also, almost all SyntaxHighlighter styles are specified with !important which makes them harder to override.

jsnajdr avatar Mar 04 '21 09:03 jsnajdr

I agree. It would be great if the plugin adhered to the theme's style whenever/wherever possible. Or if there were an easy way to override the default plugin style. I would just like to add a 1em margin and some padding around the thing but it is being stubborn!

mjhorvath avatar Apr 28 '21 08:04 mjhorvath

Maybe there should be a new "minimalist" style that only makes the bare minimum number of changes to a blog's CSS? That way we preserve the plugin's current behavior for people who might need/want it.

mjhorvath avatar Apr 29 '21 21:04 mjhorvath