48

In a code fragment like the following ...

    class Foo
    {
      internal Foo()
      {
        for (int i = 0; i < 42; ++i);
      }
    }

... its various keywords and so on are color-coded when they're displayed in my browsers.

When I do "View source", I don't see anything special in the HTML that would implement this color-coding.

How and/or where is this syntax-specific color-highlighting implemented, then? For example is it built-in to the browsers, or is it implemented by site-specific JavaScript editing the DOM within the browsers?

I find this a difficult question to Google for.

3
  • The formatting is done after the fact via javascript; if you do an "inspect element" (with a browser like Chrome), you'll see that a lot of span tags have been added Commented Oct 30, 2009 at 2:49
  • @DanielLeCheminant so, there's not way of getting the same results with just CSS, right?
    – carloswm85
    Commented Sep 30, 2021 at 0:54
  • @carloswm85 Correct: No way. CSS has almost no features to distinguish between different parts of a text in a single HTML element. (There’s only ::first-line and ::first-letter.) So to be able to address & style different text sections, like a programming language keyword like function, or a special symbol like {, there need to be HTML tags around each thing the CSS rules should be able to target separately from its neighboring content. Commented Mar 6, 2022 at 20:16

3 Answers 3

49

Stack Overflow uses Google's prettify JS library for doing syntax highlighting. It executes on the client side after the HTML has been delivered by the server. That's why you don't see it in the raw HTML source. If you have a browser plugin such as FireBug, you'll be able to inspect the DOM after prettify has done its magic.

Update 2020-09-14: Stack Overflow switched from Google's prettify to highlight.js.

1
  • Firebug is no more. RIP (it was absorb into Firefox Browser). By the way, it would be great to add a really short explanation on how to use highlight.js
    – carloswm85
    Commented Sep 30, 2021 at 0:52
10

There is an excellent FAQ What is syntax highlighting and how does it work? over on meta.SE.

It’s pretty extensive. For your convenience, i’ll quote the part most related to your question:


How does it work?

When creating or editing posts, syntax highlighting is assigned to the preview based on question's tags as soon as you stop typing for 5 seconds.

Stack Exchange does not have its own syntax highlighting engine. It uses highlight.js, and may not necessarily be using the latest release of that library. Therefore, any bugs and feature requests regarding syntax highlighting cannot be handled by Stack Exchange.

Why isn't my code being highlighted correctly?

[ Continue reading the original post … ]

3
  • 10
    sorry, downvoted because this answer is far too long, just explain what it is and link to it Commented Feb 24, 2019 at 0:48
  • Might want to move this answer to: meta.stackexchange.com/questions/981/… Commented Feb 24, 2019 at 0:50
  • @AlexanderMills, it was pretty long, i guess you’re right. Thanks for the suggestion. Commented Mar 6, 2022 at 21:23
4

Stack Overflow uses a Javascript library. There are quite a few out there, the most popular being SyntaxHighlighterDead link. My personal favorite is Chili, though.

3
  • 2
    tried to get highlight.js working because it has many styles to choose from. was able to get prism.js to work.
    – noobninja
    Commented Dec 26, 2015 at 2:19
  • 1
    the link to chili is broken :( Commented Feb 24, 2019 at 0:46
  • highlight.js seems to work quite easily - best solution I found
    – Jono
    Commented Aug 22, 2020 at 17:59

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.