Solarized Syntax Highlight for Articles



Solarized Syntax Highlight for Articles is a CSS support for the syntax highlighting feature on articles.

It gives editors the option to use the Solarized color scheme into their code boxes; chosing between its light and dark original themes.

It also fixes the code highlighting on articles in cases where the  extension fails to load and/or apply (like in the desktop preview, while editing articles).

It is currently limited to the HTML and the CSS languages.

Installation
Copy the one of the codes below:

 
 * 1) WikiaArticle pre,.ArticlePreview .WikiaArticle pre {padding: 12px;max-width: 100%;line-height: 1em;color: #839496;border: 1px solid #93a1a1}.mw-geshi > div:before {top: 6px;right: 12px;height: 0;display: block;position: relative;text-align: right;font-weight: 700;font-size: 11px;opacity: 0;color: #657b83;transition: opacity 0.6s}.mw-geshi > div:hover:before {opacity: 1;transition: opacity 0.6s}.mw-geshi .css:before {content: "CSS"}.mw-geshi .html5:before {content: "HTML"}#WikiaArticle .mw-geshi pre,.ArticlePreview .mw-geshi pre {color: #839496;background-color:#fdf6e3}.mw-geshi .html5 .de1 .sc0 {color:#d33682}.mw-geshi .html5 .de1 .sc2 {color:#859900}.mw-geshi .html5 .de1 .sy0 {color:#93a1a1}.mw-geshi .html5 .de1 .kw2 {color:#268bd2}.mw-geshi .html5 .de1 .kw3 {color:#6c71c4}.mw-geshi .html5 .de1 .st0 {color:#2aa198}.mw-geshi .html5 .de1 .sc1 {color:#b58900}.mw-geshi .html5 .de1 .sc-1 {color:#808080; font-style:italic}.mw-geshi .css .de1 .re1 {color: #6c71c4}.mw-geshi .css .de1 .re2 {color: #268bd2}.mw-geshi .css .de1 .kw2 {color: #2aa198}.mw-geshi .css .de1 .kw1 {color: #859900}.mw-geshi .css .de1 .st0 {color: #cb4b16}.mw-geshi .css .de1 .sy0 {color: #93a1a1}.mw-geshi .css .de1 .br0 {color: #93a1a1}.mw-geshi .css .de1 .coMULTI{color:#586e75;font-style:italic}.mw-geshi .css .de1 .co2 {color:#dc322f;font-style:italic}.mw-geshi .css .de1 .co1 {color:#b58900;font-weight:bold}.mw-geshi .css .de1 .re0 {color:#d33682;text-shadow:0 0 #d33682}.mw-geshi .css .de1 .nu0 {color:#d33682;text-shadow:0 0 #d33682}.mw-geshi .css .de1 .re3 {color:#d33682;text-shadow:0 0 #d33682}.mw-geshi *::selection {color: inherit;text-shadow: inherit;background-color: #eee8d5fe;}

 
 * 1) WikiaArticle pre,.ArticlePreview .WikiaArticle pre {padding: 12px;max-width: 100%;line-height: 1em;color: #839496;border: 1px solid #93a1a1}.mw-geshi > div:before {top: 6px;right: 12px;height: 0;display: block;position: relative;text-align: right;font-weight: 700;font-size: 11px;opacity: 0;color: #657b83;transition: opacity 0.6s}.mw-geshi > div:hover:before {opacity: 1;transition: opacity 0.6s}.mw-geshi .css:before {content: "CSS"}.mw-geshi .html5:before {content: "HTML"}#WikiaArticle .mw-geshi pre,.ArticlePreview .mw-geshi pre {color: #839496;background-color:#002b36}.mw-geshi .html5 .de1 .sc0 {color:#d33682}.mw-geshi .html5 .de1 .sc2 {color:#859900}.mw-geshi .html5 .de1 .sy0 {color:#93a1a1}.mw-geshi .html5 .de1 .kw2 {color:#268bd2}.mw-geshi .html5 .de1 .kw3 {color:#6c71c4}.mw-geshi .html5 .de1 .st0 {color:#2aa198}.mw-geshi .html5 .de1 .sc1 {color:#b58900}.mw-geshi .html5 .de1 .sc-1 {color:#808080; font-style:italic}.mw-geshi .css .de1 .re1 {color: #6c71c4}.mw-geshi .css .de1 .re2 {color: #268bd2}.mw-geshi .css .de1 .kw2 {color: #2aa198}.mw-geshi .css .de1 .kw1 {color: #859900}.mw-geshi .css .de1 .st0 {color: #cb4b16}.mw-geshi .css .de1 .sy0 {color: #93a1a1}.mw-geshi .css .de1 .br0 {color: #93a1a1}.mw-geshi .css .de1 .coMULTI{color:#586e75;font-style:italic}.mw-geshi .css .de1 .co2 {color:#dc322f;font-style:italic}.mw-geshi .css .de1 .co1 {color:#b58900;font-weight:bold}.mw-geshi .css .de1 .re0 {color:#d33682;text-shadow:0 0 #d33682}.mw-geshi .css .de1 .nu0 {color:#d33682;text-shadow:0 0 #d33682}.mw-geshi .css .de1 .re3 {color:#d33682;text-shadow:0 0 #d33682}.mw-geshi *::selection {color: inherit;text-shadow: inherit;background-color: #1a414bfe;}

And paste it to:
 * Your personal style sheet for a personal local or global use.
 * Your wiki local style sheet (common.css or wikia.css) for a wiki-wide use.

Usage
After this, instead of using the regular  tag, editors may use the   tag to activate the syntax highlighter.

Type:
 * for a HTML code box; and
 * for a CSS code box.

Replace than the 3 dots (...) with the desired code.