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:
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;
}
Welcome to the Technology board!
Curious about our platform? Looking to connect on social technology? You've come to the right place!