Public
Respected Contributor

Inserting HTML - Different Font

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:

image (523).png

 

After Posting:

image (524).png

 

1 Reply 1
Valued Contributor

@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;
}

 

 

Welcome to the Technology board!

Curious about our platform? Looking to connect on social technology? You've come to the right place!

Are you a Khoros customer? For direct assistance from our Support team, please visit the Support Forum.