23
\$\begingroup\$

We all like code, let's face it. And with Code Review's upcoming graduation "colors" I'm sure that many would like for the large amount of code that is posted daily in questions and answers to look top-notch.

Whether Stack Exchange would be able to get CR our own code formatting is a bit up in the air at the moment, but it certainly can't hurt to put some ideas out there. So, here is what I propose:

  1. Upvote your favorite formatting, and/or Downvote those you dislike. I will post a few basic examples, and below you will find some simple instructions on coming up with your own!

  2. Come up with your own theme, and let the community vote on yours too!

Here's how:


I have set up a pretty easy way to come create your own theme, with even very rudimentary knowledge of CSS and HTML.

First, go to this small repository and download to your computer. You will then need to just make copies of two files, and then make changes as desired.

  1. In cardshifter.github.io/prettify-test just copy either of the HTML files (depending if you prefer to start with the white or black template) into the same folder.

  2. In cardshifter.github.io/prettify-test/color-themes-for-google-code-prettify-gh-pages/css/themes make a copy of the corresponding CSS template (white or black) in that /css/themes folder. Give it a unique name. (don't name using spaces; instead use hyphens or underscores)

  3. Go back to cardshifter.github.io/prettify-test and edit the following line in your new HTML file:

      <link rel="stylesheet" href="color-themes-for-google-code-prettify-gh-pages/css/themes/your-css-file-name.css">
    

    Just replace your-css-file-name.css with the actual file name you made in step 2.

  4. Open your HTML file in a web browser, and open your CSS file in a text editor. The color values for the different CSS classes are largely hexadecimal. You can use this tool to help you changing the colors. Upon refreshing your web browser after saving changes to CSS file, you will see your new colors.

  5. Write an answer with your CSS code, as well as a screenshot or two of what it looks like. I have set up demo code in the HTML templates to make it easy, but you're welcome to try some of your own code.

Just be mindful, due to having to escape HTML tags, < in your code needs replaced with &lt;, and > with &gt; within the <pre class="prettyprint">CODE HERE</pre> sections.


Who will come up with the most popular design? Remains to be seen!

\$\endgroup\$
  • 1
    \$\begingroup\$ IMHO this should be done per language - see how C#'s formatting doesn't do functions? It would be terrible to roll something that out for all languages. \$\endgroup\$ – Pimgd Jan 28 '15 at 10:22
  • \$\begingroup\$ Hey @Pimgd Actually, Prettify supports all languages, I just used common ones to display most of the main language elements as examples. If you download the repo linked you'll see a bunch more examples in other languages, and you can also make your own. \$\endgroup\$ – Phrancis Jan 28 '15 at 15:26
  • \$\begingroup\$ @Pimgd I will add more example screenshots in other languages tonight to help clarify. \$\endgroup\$ – Phrancis Jan 28 '15 at 19:26
  • \$\begingroup\$ Well, the number one tag is neither C# nor JavaScript. \$\endgroup\$ – Donald.McLean Jan 28 '15 at 19:44
  • \$\begingroup\$ I have examples for Java & Python and a few others I will post. \$\endgroup\$ – Phrancis Jan 28 '15 at 19:49
  • 1
    \$\begingroup\$ @Donald.McLean only because I somewhat slowed down on Q-asking and let Java take the lead (currently +6 over C#)... gotta fix that. \$\endgroup\$ – Mathieu Guindon Jan 28 '15 at 19:59
  • \$\begingroup\$ There's a fundamental problem with the idea of having a universal color (and font) scheme. Colors are (or can be) set on the user end with a user.css file and/or browser themes, so that - just for instance - I see everything that's not an image as my preferred white text on black background. If someone else prefers say lime green on pink, that's just as easy, and makes colorization on the SE end just as irrelevant. \$\endgroup\$ – jamesqf Jan 29 '15 at 19:01
  • \$\begingroup\$ @jamesqf That's no different than the current setup though, in fact that's exactly the current setup, just with other colors. Experienced contributors can always set up their own colors as they wish, but for new users I think it would be good if we had something that looked more professional, like SO does. \$\endgroup\$ – Phrancis Jan 29 '15 at 19:32
  • \$\begingroup\$ @Phrancis: Maybe so, but of course - having set my preferred color scheme long ago - I never even noticed that it had such a colorization scheme. Mind you, I find most colorization more distracting than helpful... \$\endgroup\$ – jamesqf Jan 30 '15 at 4:59
21
\$\begingroup\$

"Visual Studio" style - White theme

This is the default theme of the prettify-test-white.html file from the repo referenced in the question. Here are a few screenshots:

enter image description here

enter image description here

enter image description here

enter image description here

enter image description here

enter image description here

/* Typical white theme */
.prettyprint {
  background: white;
  font-family: Consolas, Monaco, "Courier New", monospace;
  font-size: 9pt;
  line-height: 1.3;
  border: 1px solid #000000;
  padding: 10px;
}

code {
  background: white;
  font-family: Consolas, Monaco, "Courier New", monospace;
  font-size: 9pt;
}
/* Plain text */
.pln {
  color: black;
}

@media screen, print, projection {
/* String content */
  .str {
    color: #B53333;
  }
/* Keyword */
  .kwd {
    color: #2952CC;
  }
/* Comment */
  .com {
    color: #47B224;
  }
/* Type name */
  .typ {
    color: #00B8B8;
  }
/* Literal value */
  .lit {
    color: black;
  }
/* Punctuation */
  .pun {
    color: black;
  }
/* Lisp open bracket */
  .opn {
    color: #333333;
  }
/* Lisp close bracket */
  .clo {
    color: #333333;
  }
/* Mark-up tag name */
  .tag {
    color: #B53333;
  }
/* Mark-up attribute name */
  .atn {
    color: #E81919;
  }
/* Markup attribute value */
  .atv {
    color: #3366FF;
  }
/* Declaration */
  .dec {
    color: #333333;
  }
/* Variable name */
  .var {
    color: #999999;
  }
/* Function name */
  .fun {
    color: black;
  }
}

/* Specify class="linenums" on a <pre> to get line numbering */
ol.linenums {
  margin-top: 0;
  margin-bottom: 0;
  color: #B2B2B2;
}

/* IE indents via margin-left */
ul.linenums li {
/* use for special formatting using linenums */
}

/* Alternate shading for lines */
ul.linenums li:nth-child(odd) {
/* use for different formatting for every other linenum */
}
\$\endgroup\$
  • \$\begingroup\$ I dislike gray for variable names, but I don't see it applied here. Is this a problem with the parser? \$\endgroup\$ – David Harkness Jan 30 '15 at 16:25
  • \$\begingroup\$ The setup I'm using is different from the exact setup SE uses, I think they have modified it pretty heavily as theirs seem to parse much better. I'm sure it will require a bit of tweaking when we get there. It doesn't look like my setup parses things very well, that's one of the problems I have with Prettify, but we don't have any other options. \$\endgroup\$ – Phrancis Jan 30 '15 at 17:25
  • \$\begingroup\$ When integrating this into CR, will we get the colors above but with the better parser built into SE? \$\endgroup\$ – David Harkness Jan 30 '15 at 17:42
  • 1
    \$\begingroup\$ Very likely so. We will obviously have to do a bit of testing with SE devs when we get to that point but in theory it should parse more accurately. \$\endgroup\$ – Phrancis Jan 30 '15 at 21:49
  • 1
    \$\begingroup\$ I think that the blue is too light :/ But otherwise, I like it! \$\endgroup\$ – Ismael Miguel Feb 1 '15 at 7:08
6
\$\begingroup\$

IDEA theme

Suggested by @Donald.McLean - This white background theme has a bit darker colors, as well as some bold and italicized elements. Here are screenshots:

enter image description here

enter image description here

enter image description here

enter image description here

enter image description here

enter image description here

enter image description here

/* IDEA theme */
.prettyprint {
  background: white;
  font-family: Consolas, Monaco, "Courier New", monospace;
  font-size: 9pt;
  line-height: 1.3;
  border: 1px solid #000000;
  padding: 10px;
}

code {
  background: white;
  font-family: Consolas, Monaco, "Courier New", monospace;
  font-size: 9pt;
}
/* Plain text */
.pln {
  color: black;
}

@media screen, print, projection {
/* String content */
  .str {
    color: #009900;
    font-weight: bold;
  }
/* Keyword */
  .kwd {
    color: #003399;
    font-weight: bold;
  }
/* Comment */
  .com {
    color: #A3A3A3;
    font-style: italic;
  }
/* Type name */
  .typ {
    color: black;
  }
/* Literal value */
  .lit {
    color: #0000FF;
  }
/* Punctuation */
  .pun {
    color: black;
  }
/* Lisp open bracket */
  .opn {
    color: #333333;
  }
/* Lisp close bracket */
  .clo {
    color: #333333;
  }
/* Mark-up tag name */
  .tag {
    color: #003399;
    font-weight: bold;
    background-color: #E3E3E3;
  }
/* Mark-up attribute name */
  .atn {
    color: #0000FF;
    font-weight: bold;
    background-color: #E3E3E3;
  }
/* Markup attribute value */
  .atv {
    color: #009900;
    font-weight: bold;
    background-color: #E3E3E3;
  }
/* Declaration */
  .dec {
    color: #333333;
  }
/* Variable name */
  .var {
    color: #8A008A;
    font-style: italic;
  }
/* Function name */
  .fun {
    color: black;
  }
}

/* Specify class="linenums" on a <pre> to get line numbering */
ol.linenums {
  margin-top: 0;
  margin-bottom: 0;
  color: #B2B2B2;
}

/* IE indents via margin-left */
ul.linenums li {
/* use for special formatting using linenums */
}

/* Alternate shading for lines */
ul.linenums li:nth-child(odd) {
/* use for different formatting for every other linenum */
}
\$\endgroup\$
  • \$\begingroup\$ I don't like this just because of the string style. In many styles, comments are green, not strings. \$\endgroup\$ – ArtOfCode Jan 29 '15 at 15:27
  • \$\begingroup\$ The HTML,CSS and JS example is almost unreadable :/ It's a pain to look and try to make a distinction between what is HTML and JS. Honestly, I would go for red/orange for the literal value's color. Grey/gray comments look great on this one! \$\endgroup\$ – Ismael Miguel Feb 1 '15 at 15:37
6
\$\begingroup\$

Xcode Default

enter image description here

enter image description here

enter image description here

enter image description here

enter image description here

enter image description here

enter image description here

enter image description here

enter image description here

enter image description here

(and I'm open to recommendations for tweaks to the last two... Lisp brackets and the mark-up stuff...)

Here's the source by the way, in case anyone wanted to make some minor tweaks:

/* Typical white theme */
.prettyprint {
  background: white;
  font-family: Menlo, Consolas, Monaco, "Courier New", monospace;
  font-size: 8pt;
  line-height: 1.3;
  border: 1px solid #000000;
  padding: 10px;
}

code {
  background: white;
  font-family: Menlo, Consolas, Monaco, "Courier New", monospace;
  font-size: 9pt;
}

/* Plain text */
.pln {
  color: black;
}

@media screen, print, projection {
/* String content */
  .str {
      color: #C41A16;
  }
/* Keyword */
  .kwd {
      color: #AA0D91;
  }
/* Comment */
  .com {
      color: #007400;
  }
/* Type name */
  .typ {
      color: #5C2699;
  }
/* Literal value */
  .lit {
      color: #1C00CF;
  }
/* Punctuation */
  .pun {
    color: black;
  }
/* Lisp open bracket */
  .opn {
    color: #333333;
  }
/* Lisp close bracket */
  .clo {
    color: #333333;
  }
/* Mark-up tag name */
  .tag {
    color: #B53333;
  }
/* Mark-up attribute name */
  .atn {
    color: #E81919;
  }
/* Markup attribute value */
  .atv {
    color: #3366FF;
  }
/* Declaration */
  .dec {
      color: #643820;
  }
/* Variable name */
  .var {
      color: #3F6E74;
  }
/* Function name */
  .fun {
      color: #26474B;
  }
}

/* Specify class="linenums" on a <pre> to get line numbering */
ol.linenums {
  margin-top: 0;
  margin-bottom: 0;
  color: #929292;
}

/* IE indents via margin-left */
ul.linenums li {
/* use for special formatting using linenums */
}

/* Alternate shading for lines */
ul.linenums li:nth-child(odd) {
/* use for different formatting for every other linenum */
}
\$\endgroup\$
  • \$\begingroup\$ I'm divided. Lisp, SQL and Java look not-so-good, but the others look amazing! But still my upvote. Also, the blue for the HTML properties is too light in my opinion. \$\endgroup\$ – Ismael Miguel Feb 1 '15 at 7:28
  • \$\begingroup\$ I can say with confidence that SQL, Objective-C, and Swift will definitely all look different then the screenshots I put here because StackExchange's parser is better than the one I used. I don't write Lisp at all, so I don't know if it will look the same or not... any recommendations on improving Lisp? And I can easily change the blue color for HTML properties if you have any recommendations. I don't really write HTML. @IsmaelMiguel \$\endgroup\$ – nhgrif Feb 1 '15 at 14:44
  • \$\begingroup\$ I don't program in Lisp either, but I feel how 'hurt' people would be with the colors it has now. For example, I would expect defun, cond and = to have some highlight, just like print has. In SQL, I was expecting all the 'commands' to have highlight too. The blue on the SQL variables and on the numbers would look beter on the 'commans', while the purple on the columns would look better in variables. This is highly subjective and I suggest a 2nd version with these changes. The blue in HTML could be the same blue as I refered before. \$\endgroup\$ – Ismael Miguel Feb 1 '15 at 15:34
  • \$\begingroup\$ @IsmaelMiguel Those are all good ideas, for sure. Just please keep in mind the setup used to parse the different types of code is not the same as SE uses. In other words, SE's setup appears to be modified to be better at it, so the examples posted (in all answers here) are just for the sake of example, and not necessarily how it would look once implemented. We just don't have access to that particular setup to test it. \$\endgroup\$ – Phrancis Feb 1 '15 at 19:40
  • \$\begingroup\$ @Phrancis I was just saying my opinion. But this setup still got my approval, even though it has some minor improvements to be made. Ones that are possibles, others that are impossible with the testing parser. If a suggestion was made with the improvements I said (the ones that are possible), I would +1 the heck out of it! \$\endgroup\$ – Ismael Miguel Feb 1 '15 at 19:50
  • \$\begingroup\$ The SQL highlighting would be different. We don't have access (afaik) to the parser that StackExchange uses \$\endgroup\$ – nhgrif Feb 2 '15 at 11:49
3
\$\begingroup\$

"Hosch250" theme (for lack of a better name):

enter image description here

Image of code blocks (line stripes didn't show up, for some reason):

enter image description here

\$\endgroup\$
0
\$\begingroup\$

"Visual Studio" style - Black theme

This is the default theme of the prettify-test-black.html file from the repo referenced in the question. Here are a few screenshots:

enter image description here

enter image description here

enter image description here

enter image description here

enter image description here

enter image description here

/* Typical black theme */
.prettyprint {
  background-color: black;
  font-family: Consolas, Monaco, "Courier New", monospace;
  font-size: 9pt;
  line-height: 1.3;
  border: 1px solid #000000;
  padding: 10px;
}

code {
  background: black;
  font-family: Consolas, Monaco, "Courier New", monospace;
  font-size:9pt;
}
/* Plain text */
.pln {
  color: white;
}

@media screen, print, projection {
/* String content */
  .str {
    color: #FF9933;
  }
/* Keyword */
  .kwd {
    color: #66A3FF;
  }
/* Comment */
  .com {
    color: #47B224;
  }
/* Type name */
  .typ {
    color: #52CCCC;
  }
/* Literal value */
  .lit {
    color: white;
  }
/* Punctuation */
  .pun {
    color: white;
  }
/* Lisp open bracket */
  .opn {
    color: #333333;
  }
/* Lisp close bracket */
  .clo {
    color: #333333;
  }
/* Mark-up tag name */
  .tag {
    color: #66A3FF;
  }
/* Mark-up attribute name */
  .atn {
    color: #99EBFF;
  }
/* Markup attribute value */
  .atv {
    color: #999999;
  }
/* Declaration */
  .dec {
    color: white;
  }
/* Variable name */
  .var {
    color: #999999;
  }
/* Function name */
  .fun {
    color: white;
  }
}

/* Specify class=linenums on a pre to get line numbering */
ol.linenums {
  margin-top: 0;
  margin-bottom: 0;
  color: #666666;
}

/* IE indents via margin-left */
ul.linenums li {
/* use for special formatting using linenums */
}

/* Alternate shading for lines */
ul.linenums li:nth-child(odd) {
/* use for different formatting for every other linenum */
}
\$\endgroup\$
  • 6
    \$\begingroup\$ Down with black. This causes serious eye strain when the user is looking at a light/white background for the rest of the document. \$\endgroup\$ – cimmanon Jan 28 '15 at 18:20
  • \$\begingroup\$ It is a bit aggressive against light background, indeed \$\endgroup\$ – Phrancis Jan 28 '15 at 19:26
  • \$\begingroup\$ @cimmanon: But is quite nice when the user has a black background for the rest of the page. \$\endgroup\$ – jamesqf Jan 29 '15 at 19:04
  • 1
    \$\begingroup\$ @jamesqf I run a screen inverter, so everything is already light-on-dark. Switching just the code blocks means forces everyone to resort to CSS hacks to make the site legible. \$\endgroup\$ – David Harkness Jan 30 '15 at 16:33
  • \$\begingroup\$ @David Harkness: Dunno about hacks. I set my colors in a user CSS and, as I mentioned above, didn't even realize that some other communities here were using colorization. \$\endgroup\$ – jamesqf Jan 30 '15 at 23:46
  • 1
    \$\begingroup\$ My eyes., my eyes.... \$\endgroup\$ – Reinstate Monica Feb 7 '15 at 16:52
-2
\$\begingroup\$

Prettify style: Obsidian

This is an adaptation of the Sons of Obsidian Prettify style provided by them.

enter image description here

enter image description here

enter image description here

enter image description here

enter image description here

enter image description here

/* Obsidian */
.prettyprint {
  background-color: black;
  font-family: Consolas, Monaco, "Courier New", monospace;
  font-size: 9pt;
  line-height: 1.3;
  border: 0px solid #888;
  padding: 10px;
}

code {
  background: black;
  font-family: Consolas, Monaco, "Courier New", monospace;
  font-size:9pt;
}
/* Plain text */
.pln {
  color: #F1F2F3;
}

@media screen, print, projection {
/* String content */
  .str {
    color: #EC7600;
  }
/* Keyword */
  .kwd {
    color: #93C763;
  }
/* Comment */
  .com {
    color: #66747B;
  }
/* Type name */
  .typ {
    color: #678CB1;
  }
/* Literal value */
  .lit {
    color: #FACD22;
  }
/* Punctuation */
  .pun {
    color: #F1F2F3;
  }
/* Lisp open bracket */
  .opn {
    color: #333333;
  }
/* Lisp close bracket */
  .clo {
    color: #333333;
  }
/* Mark-up tag name */
  .tag {
    color: #8AC763;
  }
/* Mark-up attribute name */
  .atn {
    color: #E0E2E4;
  }
/* Markup attribute value */
  .atv {
    color: #EC7600;
  }
/* Declaration */
  .dec {
    color: purple;
  }
/* Variable name */
  .var {
    color: white;
  }
/* Function name */
  .fun {
    color: white;
  }
}

/* Specify class=linenums on a pre to get line numbering */
ol.linenums {
  margin-top: 0;
  margin-bottom: 0;
}

/* IE indents via margin-left */
ul.linenums li {
    color: #555;
    list-style-type: decimal;
}

/* Alternate shading for lines */
ul.linenums li:nth-child(odd) {
    background: #111;
}
\$\endgroup\$
  • \$\begingroup\$ This would be great if it wasn't pre-inverted. I like the contrast between type names and keywords that all the other styles lack. But since I run a screen inverter already, it makes the site unusable since it mixes light-on-dark and dark-on-light (painful to read). \$\endgroup\$ – David Harkness Jan 30 '15 at 16:32

You must log in to answer this question.

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