Tutorial Solarized Theme for CodeMirror and Prettify

by in , 0

Here's for Google Code Prettify (found at this source). 

.prettyprint {
  color: #839496;
  background-color: #002b36;
}

.prettyprint .pln {
  color: inherit;
}

.prettyprint .str,
.prettyprint .lit,
.prettyprint .atv {
  color: #2aa198;
}

.prettyprint .kwd {
  color: #268bd2;
}

.prettyprint .com,
.prettyprint .dec {
  color: #586e75;
  font-style: italic;
}

.prettyprint .typ {
  color: #b58900;
}

.prettyprint .pun {
  color: inherit;
}

.prettyprint .opn {
  color: inherit;
}

.prettyprint .clo {
  color: inherit;
}

.prettyprint .tag {
  color: #268bd2;
  font-weight: bold;
}

.prettyprint .atn {
  color: inherit;
}

And here's for CodeMirror. Rebecca Murphey found it but couldn't remember original source.

html * {
  color-profile: sRGB;
  rendering-intent: auto;
}
.cm-s-solarized-light {
  background-color: #fdf6e3;
  color: #657b83;
}
.cm-s-solarized-light .emphasis {
  font-weight: bold;
}
.cm-s-solarized-light .dotted {
  border-bottom: 1px dotted #cb4b16;
}
.cm-s-solarized-light .CodeMirror-gutter {
  background-color: #eee8d5;
  border-right: 3px solid #eee8d5;
}
.cm-s-solarized-light .CodeMirror-gutter .CodeMirror-gutter-text {
  color: #93a1a1;
}
.cm-s-solarized-light .CodeMirror-cursor {
  border-left-color: #002b36 !important;
}
.cm-s-solarized-light .CodeMirror-matchingbracket {
  color: #002b36;
  background-color: #eee8d5;
  box-shadow: 0 0 10px #eee8d5;
  font-weight: bold;
}
.cm-s-solarized-light .CodeMirror-nonmatchingbracket {
  color: #002b36;
  background-color: #eee8d5;
  box-shadow: 0 0 10px #eee8d5;
  font-weight: bold;
  color: #dc322f;
  border-bottom: 1px dotted #cb4b16;
}
.cm-s-solarized-light span.cm-keyword {
  color: #657b83;
  font-weight: bold;
}
.cm-s-solarized-light span.cm-atom {
  color: #2aa198;
}
.cm-s-solarized-light span.cm-number {
  color: #586e75;
}
.cm-s-solarized-light span.cm-def {
  color: #268bd2;
}
.cm-s-solarized-light span.cm-variable {
  color: #cb4b16;
}
.cm-s-solarized-light span.cm-variable-2 {
  color: #cb4b16;
}
.cm-s-solarized-light span.cm-variable-3 {
  color: #cb4b16;
}
.cm-s-solarized-light span.cm-comment {
  color: #93a1a1;
}
.cm-s-solarized-light span.cm-property {
  color: #b58900;
}
.cm-s-solarized-light span.cm-operator {
  color: #657b83;
}
.cm-s-solarized-light span.cm-string {
  color: #6c71c4;
}
.cm-s-solarized-light span.cm-error {
  font-weight: bold;
  border-bottom: 1px dotted #cb4b16;
}
.cm-s-solarized-light span.cm-bracket {
  color: #cb4b16;
}
.cm-s-solarized-light span.cm-tag {
  color: #657b83;
}
.cm-s-solarized-light span.cm-attribute {
  color: #586e75;
  font-weight: bold;
}
.cm-s-solarized-light span.cm-meta {
  color: #268bd2;
}
.cm-s-solarized-dark {
  background-color: #002b36;
  color: #839496;
}
.cm-s-solarized-dark .emphasis {
  font-weight: bold;
}
.cm-s-solarized-dark .dotted {
  border-bottom: 1px dotted #cb4b16;
}
.cm-s-solarized-dark .CodeMirror-gutter {
  background-color: #073642;
  border-right: 3px solid #073642;
}
.cm-s-solarized-dark .CodeMirror-gutter .CodeMirror-gutter-text {
  color: #586e75;
}
.cm-s-solarized-dark .CodeMirror-cursor {
  border-left-color: #fdf6e3 !important;
}
.cm-s-solarized-dark .CodeMirror-matchingbracket {
  color: #fdf6e3;
  background-color: #073642;
  box-shadow: 0 0 10px #073642;
  font-weight: bold;
}
.cm-s-solarized-dark .CodeMirror-nonmatchingbracket {
  color: #fdf6e3;
  background-color: #073642;
  box-shadow: 0 0 10px #073642;
  font-weight: bold;
  color: #dc322f;
  border-bottom: 1px dotted #cb4b16;
}
.cm-s-solarized-dark span.cm-keyword {
  color: #839496;
  font-weight: bold;
}
.cm-s-solarized-dark span.cm-atom {
  color: #2aa198;
}
.cm-s-solarized-dark span.cm-number {
  color: #93a1a1;
}
.cm-s-solarized-dark span.cm-def {
  color: #268bd2;
}
.cm-s-solarized-dark span.cm-variable {
  color: #cb4b16;
}
.cm-s-solarized-dark span.cm-variable-2 {
  color: #cb4b16;
}
.cm-s-solarized-dark span.cm-variable-3 {
  color: #cb4b16;
}
.cm-s-solarized-dark span.cm-comment {
  color: #586e75;
}
.cm-s-solarized-dark span.cm-property {
  color: #b58900;
}
.cm-s-solarized-dark span.cm-operator {
  color: #839496;
}
.cm-s-solarized-dark span.cm-string {
  color: #6c71c4;
}
.cm-s-solarized-dark span.cm-error {
  font-weight: bold;
  border-bottom: 1px dotted #cb4b16;
}
.cm-s-solarized-dark span.cm-bracket {
  color: #cb4b16;
}
.cm-s-solarized-dark span.cm-tag {
  color: #839496;
}
.cm-s-solarized-dark span.cm-attribute {
  color: #93a1a1;
  font-weight: bold;
}
.cm-s-solarized-dark span.cm-meta {
  color: #268bd2;
}

Leave a Reply