{"id":17426,"date":"2012-07-09T07:03:08","date_gmt":"2012-07-09T14:03:08","guid":{"rendered":"http:\/\/css-tricks.com\/?page_id=17426"},"modified":"2012-07-09T07:03:08","modified_gmt":"2012-07-09T14:03:08","slug":"solarized-theme-for-codemirror-and-prettify","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/snippets\/css\/solarized-theme-for-codemirror-and-prettify\/","title":{"rendered":"Solarized Theme for CodeMirror and Prettify"},"content":{"rendered":"<p>Here&#8217;s for <a href=\"http:\/\/code.google.com\/p\/google-code-prettify\/\" rel=\"noopener\">Google Code Prettify<\/a> (<a href=\"http:\/\/subtech.g.hatena.ne.jp\/h2u\/20110408\/1302198319\" rel=\"noopener\">found at this source<\/a>). <\/p>\n<pre rel=\"CSS\" class=\"lang-css\"><code>.prettyprint {\r\n  color: #839496;\r\n  background-color: #002b36;\r\n}\r\n\r\n.prettyprint .pln {\r\n  color: inherit;\r\n}\r\n\r\n.prettyprint .str,\r\n.prettyprint .lit,\r\n.prettyprint .atv {\r\n  color: #2aa198;\r\n}\r\n\r\n.prettyprint .kwd {\r\n  color: #268bd2;\r\n}\r\n\r\n.prettyprint .com,\r\n.prettyprint .dec {\r\n  color: #586e75;\r\n  font-style: italic;\r\n}\r\n\r\n.prettyprint .typ {\r\n  color: #b58900;\r\n}\r\n\r\n.prettyprint .pun {\r\n  color: inherit;\r\n}\r\n\r\n.prettyprint .opn {\r\n  color: inherit;\r\n}\r\n\r\n.prettyprint .clo {\r\n  color: inherit;\r\n}\r\n\r\n.prettyprint .tag {\r\n  color: #268bd2;\r\n  font-weight: bold;\r\n}\r\n\r\n.prettyprint .atn {\r\n  color: inherit;\r\n}<\/code><\/pre>\n<p>And here&#8217;s for <a href=\"http:\/\/codemirror.net\/\" rel=\"noopener\">CodeMirror<\/a>. Rebecca Murphey <a href=\"https:\/\/gist.github.com\/3073731\" rel=\"noopener\">found it<\/a> but couldn&#8217;t remember original source.<\/p>\n<pre rel=\"CSS\" class=\"lang-css\"><code>html * {\r\n  color-profile: sRGB;\r\n  rendering-intent: auto;\r\n}\r\n.cm-s-solarized-light {\r\n  background-color: #fdf6e3;\r\n  color: #657b83;\r\n}\r\n.cm-s-solarized-light .emphasis {\r\n  font-weight: bold;\r\n}\r\n.cm-s-solarized-light .dotted {\r\n  border-bottom: 1px dotted #cb4b16;\r\n}\r\n.cm-s-solarized-light .CodeMirror-gutter {\r\n  background-color: #eee8d5;\r\n  border-right: 3px solid #eee8d5;\r\n}\r\n.cm-s-solarized-light .CodeMirror-gutter .CodeMirror-gutter-text {\r\n  color: #93a1a1;\r\n}\r\n.cm-s-solarized-light .CodeMirror-cursor {\r\n  border-left-color: #002b36 !important;\r\n}\r\n.cm-s-solarized-light .CodeMirror-matchingbracket {\r\n  color: #002b36;\r\n  background-color: #eee8d5;\r\n  box-shadow: 0 0 10px #eee8d5;\r\n  font-weight: bold;\r\n}\r\n.cm-s-solarized-light .CodeMirror-nonmatchingbracket {\r\n  color: #002b36;\r\n  background-color: #eee8d5;\r\n  box-shadow: 0 0 10px #eee8d5;\r\n  font-weight: bold;\r\n  color: #dc322f;\r\n  border-bottom: 1px dotted #cb4b16;\r\n}\r\n.cm-s-solarized-light span.cm-keyword {\r\n  color: #657b83;\r\n  font-weight: bold;\r\n}\r\n.cm-s-solarized-light span.cm-atom {\r\n  color: #2aa198;\r\n}\r\n.cm-s-solarized-light span.cm-number {\r\n  color: #586e75;\r\n}\r\n.cm-s-solarized-light span.cm-def {\r\n  color: #268bd2;\r\n}\r\n.cm-s-solarized-light span.cm-variable {\r\n  color: #cb4b16;\r\n}\r\n.cm-s-solarized-light span.cm-variable-2 {\r\n  color: #cb4b16;\r\n}\r\n.cm-s-solarized-light span.cm-variable-3 {\r\n  color: #cb4b16;\r\n}\r\n.cm-s-solarized-light span.cm-comment {\r\n  color: #93a1a1;\r\n}\r\n.cm-s-solarized-light span.cm-property {\r\n  color: #b58900;\r\n}\r\n.cm-s-solarized-light span.cm-operator {\r\n  color: #657b83;\r\n}\r\n.cm-s-solarized-light span.cm-string {\r\n  color: #6c71c4;\r\n}\r\n.cm-s-solarized-light span.cm-error {\r\n  font-weight: bold;\r\n  border-bottom: 1px dotted #cb4b16;\r\n}\r\n.cm-s-solarized-light span.cm-bracket {\r\n  color: #cb4b16;\r\n}\r\n.cm-s-solarized-light span.cm-tag {\r\n  color: #657b83;\r\n}\r\n.cm-s-solarized-light span.cm-attribute {\r\n  color: #586e75;\r\n  font-weight: bold;\r\n}\r\n.cm-s-solarized-light span.cm-meta {\r\n  color: #268bd2;\r\n}\r\n.cm-s-solarized-dark {\r\n  background-color: #002b36;\r\n  color: #839496;\r\n}\r\n.cm-s-solarized-dark .emphasis {\r\n  font-weight: bold;\r\n}\r\n.cm-s-solarized-dark .dotted {\r\n  border-bottom: 1px dotted #cb4b16;\r\n}\r\n.cm-s-solarized-dark .CodeMirror-gutter {\r\n  background-color: #073642;\r\n  border-right: 3px solid #073642;\r\n}\r\n.cm-s-solarized-dark .CodeMirror-gutter .CodeMirror-gutter-text {\r\n  color: #586e75;\r\n}\r\n.cm-s-solarized-dark .CodeMirror-cursor {\r\n  border-left-color: #fdf6e3 !important;\r\n}\r\n.cm-s-solarized-dark .CodeMirror-matchingbracket {\r\n  color: #fdf6e3;\r\n  background-color: #073642;\r\n  box-shadow: 0 0 10px #073642;\r\n  font-weight: bold;\r\n}\r\n.cm-s-solarized-dark .CodeMirror-nonmatchingbracket {\r\n  color: #fdf6e3;\r\n  background-color: #073642;\r\n  box-shadow: 0 0 10px #073642;\r\n  font-weight: bold;\r\n  color: #dc322f;\r\n  border-bottom: 1px dotted #cb4b16;\r\n}\r\n.cm-s-solarized-dark span.cm-keyword {\r\n  color: #839496;\r\n  font-weight: bold;\r\n}\r\n.cm-s-solarized-dark span.cm-atom {\r\n  color: #2aa198;\r\n}\r\n.cm-s-solarized-dark span.cm-number {\r\n  color: #93a1a1;\r\n}\r\n.cm-s-solarized-dark span.cm-def {\r\n  color: #268bd2;\r\n}\r\n.cm-s-solarized-dark span.cm-variable {\r\n  color: #cb4b16;\r\n}\r\n.cm-s-solarized-dark span.cm-variable-2 {\r\n  color: #cb4b16;\r\n}\r\n.cm-s-solarized-dark span.cm-variable-3 {\r\n  color: #cb4b16;\r\n}\r\n.cm-s-solarized-dark span.cm-comment {\r\n  color: #586e75;\r\n}\r\n.cm-s-solarized-dark span.cm-property {\r\n  color: #b58900;\r\n}\r\n.cm-s-solarized-dark span.cm-operator {\r\n  color: #839496;\r\n}\r\n.cm-s-solarized-dark span.cm-string {\r\n  color: #6c71c4;\r\n}\r\n.cm-s-solarized-dark span.cm-error {\r\n  font-weight: bold;\r\n  border-bottom: 1px dotted #cb4b16;\r\n}\r\n.cm-s-solarized-dark span.cm-bracket {\r\n  color: #cb4b16;\r\n}\r\n.cm-s-solarized-dark span.cm-tag {\r\n  color: #839496;\r\n}\r\n.cm-s-solarized-dark span.cm-attribute {\r\n  color: #93a1a1;\r\n  font-weight: bold;\r\n}\r\n.cm-s-solarized-dark span.cm-meta {\r\n  color: #268bd2;\r\n}<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>Here&#8217;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 [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":0,"parent":3222,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"page-snippet.php","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":""},"tags":[],"acf":[],"jetpack-related-posts":[{"id":312405,"url":"https:\/\/css-tricks.com\/almanac\/properties\/t\/text-decoration-thickness\/","url_meta":{"origin":17426,"position":0},"title":"text-decoration-thickness","date":"June 8, 2020","format":false,"excerpt":"The text-decoration-thickness property in CSS sets the stroke thickness of the decoration line that is used on text in an element. The text-decoration-line value needs to be either underline, line-through, or overline to reflect the thickness property. .text { text-decoration-line: underline; \u00a0 text-decoration-thickness: 2px; } Syntax text-decoration-thickness: auto | from-font\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":3801,"url":"https:\/\/css-tricks.com\/snippets\/css\/internationalization-language-css\/","url_meta":{"origin":17426,"position":1},"title":"Internationalization Language CSS","date":"September 4, 2009","format":false,"excerpt":"\/*Language-specific*\/ :lang(af){quotes:'\\201E' '\\201D' '\\201A' '\\2019';} :lang(ak){font-family:Lucida,\"DejaVu Sans\",inherit;} :lang(ar){font-family:Tahoma 12,Nazli,KacstOne,\"DejaVu Sans\",inherit;} :lang(bg){quotes:'\\201E' '\\201C' '\\201A' '\\2018';} :lang(bn){font-family:FreeSans,MuktiNarrow,Vrinda,inherit;font-size:1.1em;line-height:1.4em;} :lang(cs){quotes:'\\201E' '\\201C' '\\201A' '\\2018';} :lang(da){quotes:'\\00BB' '\\00AB' '\\203A' '\\2039';} :lang(de){quotes:'\\201E' '\\201C' '\\201A' '\\2018';} :lang(el){font-family:\"DejaVu Sans\",inherit;quotes:'\\00AB' '\\00BB' '\\2039' '\\203A';} :lang(en-GB){quotes:'\\2018' '\\2019' '\\201C' '\\201D';} :lang(es){quotes:'\\00AB' '\\00BB' '\\2039' '\\203A';} :lang(fa){font-family:Terafik,Traffic,Roya,Nazli,Nazanin,sans;font-size:1.5em;} :lang(fi){quotes:'\\201D' '\\201D' '\\2019' '\\2019';} :lang(fr){quotes:'\\ab\\2005' '\\2005\\bb' '\\2039\\2005' '\\2005\\203a';} :lang(hr){quotes:'\\00BB'\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":350656,"url":"https:\/\/css-tricks.com\/almanac\/properties\/o\/outline-color\/","url_meta":{"origin":17426,"position":2},"title":"outline-color","date":"September 1, 2021","format":false,"excerpt":"The outline-color CSS property specifies the color of an element's outline. What\u2019s an outline? An outline is a line that is drawn around elements \u2014 outside the border edge \u2014 that is used for accessibility or decoration purposes when that element is in focus. button { outline-color: #e435; } outline-color\u2026","rel":"","context":"In \"outline\"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/12\/css-tricks-logo-gradient-outline.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":198607,"url":"https:\/\/css-tricks.com\/almanac\/properties\/t\/text-decoration-color\/","url_meta":{"origin":17426,"position":3},"title":"text-decoration-color","date":"April 3, 2015","format":false,"excerpt":"The text-decoration-color property sets the color of the underline, overline, or line-through on text with the text-decoration property applied. It can also set the underline color on links. a { text-decoration-color: #E18728; } Values text-decoration-color can inherit or accept any CSS color value, including named colors, HEX colors, RGBa, and\u2026","rel":"","context":"With 5 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":14029,"url":"https:\/\/css-tricks.com\/almanac\/properties\/c\/color\/","url_meta":{"origin":17426,"position":4},"title":"color","date":"September 5, 2011","format":false,"excerpt":"The color property in CSS sets the color of text and text decorations. p { color: blue; } Values The color property can accept any CSS color value. Named colors: for example, \"aqua\". Hex colors: for example, #00FFFF or #0FF. RGB and RGBa colors: for example, rgb(0, 255, 255) and\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":335415,"url":"https:\/\/css-tricks.com\/almanac\/properties\/m\/mask-type\/","url_meta":{"origin":17426,"position":5},"title":"mask-type","date":"March 2, 2021","format":false,"excerpt":"The mask-type CSS property indicates whether the SVG <mask> element is treated as an alpha mask or a luminance mask. mask { mask-type: alpha; } When the mask layer is an image or a gradient, a mask-mode property can be set on the HTML element to specify the type of\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/02\/s_ADCFB9F0494AC50BE88B2195592C05580BDEAAC4ECC0BBBFE6BE461D40F61FF7_1611418224888_alpha-mask-1.jpg?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/17426"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=17426"}],"version-history":[{"count":1,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/17426\/revisions"}],"predecessor-version":[{"id":17427,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/17426\/revisions\/17427"}],"up":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/3222"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=17426"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=17426"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}