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;
}
And of course, you should go to http://ethanschoonover.com/solarized to get the port of Solarized dedicated to your environment.
It could be nice of including these 2 sets above on Github.
you should add the
::selection
selector :-)Hi,
There is a situation that I need to color the quotes ( “” )in a JavaScript code. Is there any way to color it differently? Currently if we use google prettyprint the color is same for “” as well as text inside…
See the Pen Google PrettyPrint by Puneet Sharma (@punz) on CodePen.