24

In chatting, I've taken to using bold to format code. This is because it does not stand out very well if the only thing that changes is a fixed-width font. For instance:

Demonstrate bold is better than fixed-width with no background change

But it seems that if CSS were applied to use a fixed width font and change the background color, that would be a better solution. I'm not sure of the entire implications, but here's a test:

With CSS applied for background

  • Code appears more bold if it is bolded (**`code`**), and text-shadow: 1px 0 #000 is applied to it: i.stack.imgur.com/zvVBG.png – uınbɐɥs Feb 10 '13 at 23:27
  • 1
    yes please this would be really helpful! – Jack Douglas Mar 6 '13 at 18:13
  • 1
    Basically, hearing something official from SE staff on this would be awesome. – Kaz Wolfe Jan 15 '17 at 23:40
8

I have written a UserScript that automatically highlights code in chat messages. Example:

More information and download links can be found here:

Highlight Code in Chat - Highlights <code> elements contained in chat messages

  • Could you also add chat.se/transcript/* and highlight <pre> as well? – Lorem Ipsum Feb 11 '13 at 3:22
  • Cool. Having a user script is nice as a prototype to test the idea, but a lot of people use chat without extensions. Something like this that affects the commonly perceived display isn't really a "power user" chat feature, but rather seems it should be built in... – HostileFork Feb 11 '13 at 5:43
  • @LoremIpsum: Done. – uɐɯsO uɐɥʇɐN Feb 11 '13 at 8:08
  • @HostileFork: Yes, but the impression I get from the OP is that those who need the feature are the ones who would be able to easily install the UserScript. – uɐɯsO uɐɥʇɐN Feb 11 '13 at 8:09
  • @GeorgeEdison Thanks, but the <pre> blocks are not highlighted though... – Lorem Ipsum Feb 11 '13 at 15:39
  • @LoremIpsum: Hmm... I'll fix that shortly. Sorry about that oversight. – uɐɯsO uɐɥʇɐN Feb 11 '13 at 22:43
  • @LoremIpsum: Sorry for the long delay - I have now updated the script. – uɐɯsO uɐɥʇɐN May 3 '13 at 19:12
3
+50

You can get a similar effect with a user style:

@-moz-document domain("chat.stackexchange.com") {
    div.message pre, div.message code {
        background-color: lightgrey;
        padding: 0.2em;
    }
}

Tweak the colour, opacity, and padding to your liking.

Prerequisite: Stylish browser add-on

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .