Inserting HTML - Different Font

[jamiemccardle]

It was noticed that the post containing the HTML (Code Insert) is not showing the code in monospace for some reason. Can that be fixed? It looks right when I go into the page to edit it, but when I just look at the post itself, it's using a regular font and doesn't look right.

When Editing:

After Posting:

[sullysnack]

@jamiemccardle 

Non-Khoros CSS rules were added which are overriding default behaviors for inserted code samples.

I think the 2nd screenshot above isn't quite right. On your production site I saw color formatting, but the sample code showed with non-fixed width font. Yes, I agree it does not look right.

The font family CSS rule for <span> tags inside of <pre> and <code> blocks has been overridden by SearchUnify searchbox.css :
https://ps282104p.searchunify.com/resources/search_clients_custom/b461da75-b179-11eb-8bd7-0242ac1200...

This rule in searchbox.css in particular:
*{font-family: "Open Sans",sans-serif;}

Actually I see the searchbox CSS rules are included on the page twice. Once via the searchunify.com reference, and again: all of the same rules from the remote .css file are included / repeated in an inline <style> block in the page head.

CSS rules for * should not define font-family. The wildcard * is applying a variable width font family to spans, even if the spans are inside pre and code blocks.

Either remove the wildcard * rule from both locations, or...

A quick fix you can try.... add this CSS rule to your skin _styles.scss block:

code[class*="language-"][class~="lia-code-sample"] span,
pre[class*="language-"][class~="lia-code-sample"] span {
  font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
}