25

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

4
  • 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! Mar 6 '13 at 18:13
  • 2
    Basically, hearing something official from SE staff on this would be awesome.
    – Kaz Wolfe
    Jan 15 '17 at 23:40
  • Ditto. If I interpret the existing answers correctly, they allow me to highlight the code for myself. But when I'm chatting and posting code I want everyone else to easily distinguish code from everything else, regardless if they bothered to install some script or another prosthesis. This issue should definitely be fixed on the server side. Apr 11 at 10:46
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

7
  • Could you also add chat.se/transcript/* and highlight <pre> as well? 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... Feb 11 '13 at 5:43
  • @LoremIpsum: Done. 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. Feb 11 '13 at 8:09
  • @GeorgeEdison Thanks, but the <pre> blocks are not highlighted though... Feb 11 '13 at 15:39
  • @LoremIpsum: Hmm... I'll fix that shortly. Sorry about that oversight. Feb 11 '13 at 22:43
  • @LoremIpsum: Sorry for the long delay - I have now updated the script. 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 .