Syntax highlighting color setting for <code> tag in HTML

Question

In a code snippet like this...

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

... Various keywords etc. are colored when they are displayed in my browser.

When I click "View Source" I don't see any special HTML code to achieve this coloring.

So how is this color highlighting of specific syntax implemented? For example, is it built into the browser, or is it implemented through website-specific JavaScript that edits the DOM in the browser?

I found this to be a difficult question to answer via a Google search.

Answer 1

There is a very good FAQ on meta.SE What is syntax highlighting and how does it work? .

It is very detailed. For convenience, I'll quote the parts most relevant to your question:

---

How does it work?

When creating or editing a post, syntax highlighting is assigned to the preview 5 seconds after you stop typing, based on the question's tag.

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

Why is my code not highlighted correctly?

[ Continue reading original post... ]

Answer 2

Stack Overflow uses Google’s prettify JS library for syntax highlighting. It is executed after the HTML is transmitted from the server to the client. That's why you don't see it in the original HTML source code. If you have a browser plugin like FireBug installed, you can inspect the DOM after prettify completes.

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