How to get Google Prettify to render more like Visual Studio

Question

I'm using Googles excellent Code Prettify and I'm quite happy with it.

But: Does anybody happen to have a alternate CSS stylesheet so it'll render a bit more like Visual Studios default coloring? Green comments, red text/strings, etc.

Casefy

This seems more appropriate for superuser.com, no? – Clarita

Hmm, I don't know: I was hoping somebody have had the same "problem" and modified the CSS accordingly. So it takes a tiny bit of programming.... – Casefy

Answer 1

It took me a while but I replicated exactly my Visual Studio's color configuration. Enjoy.

.com       { color: #008000; }
.str, .tag { color: #A31515; }
.kwd, .atv { color: #0000FF; }
.typ       { color: #2B91AF; }
.lit, .atn { color: #FF0000; }
.pun, .pln { color: #000000; }
.dec       { color: #800080; }

Comments are green, strings/tags reddish, keywords blue, types bluish, numbers red, punctuation black, declarations purple.

Twobit

Works as advertized - absolutely brilliant! Thanks! :) – Casefy

If you are using the google hosted js, you may need to add !important to every css rule. – Gonick

Added a dark mode version. 10.5 years after your answer it seems about time... – Evanne

Answer 2

I don't use Visual Studio so I don't know the color scheme but Prettify is easy enough to modify.

1. Download the full version (not the small version, as the CSS has been minified)
2. Open the prettify.css file in the src directory. There are 10 or so "elements" you can change the color of.
3. Grab the hex values of each color out of Visual Studio (if available; if not, you could use a color picker app to obtain the hex values).
4. Replace the color attribute for each element in the CSS file.

I'd throw it together myself really quick if I knew the colors but hopefully this helps!

Merlon

Answer 3

For those who are interested. This is the color scheme for the Dark Color Theme. Made with the VS 2019 colors.

.darkmode {
    .com {
        color: #57A64A;
    }

    .str, .tag {
        color: #D69D85;
    }

    .kwd, .atv {
        color: #569CD6;
    }

    .typ {
        color: #4EC9B0;
    }

    .lit, .atn {
        color: #B5CEA8;
    }

    .pun, .pln {
        color: #DCDCDC;
    }

    .dec {
        color: #C284C2;
    }
}

Evanne