Extension:SyntaxHighlight/Styling

By default, SyntaxHighlight's code blocks are styled for "light theme" wikis, or wikis that use dark-colored text on a light-colored background. For dark themed wikis, which have light-colored text on a dark-colored background, the highlighting may be hard to read. Admin users can restyle the highlighting on their wikis to make the text more readable.

Sample dark theme highlighting

The following is CSS code for the popular Monokai syntax highlighting theme, adapted for use on Gamepedia wikis.

.mw-highlight .hll { background-color: #49483e }
.mw-highlight  { background: #272822; color: #f8f8f2 }
.mw-highlight .c { color: #75715e }
.mw-highlight .err { color: #960050; background-color: #1e0010 }
.mw-highlight .k { color: #66d9ef }
.mw-highlight .l { color: #ae81ff }
.mw-highlight .n { color: #f8f8f2 }
.mw-highlight .o { color: #f92672 }
.mw-highlight .p { color: #f8f8f2 }
.mw-highlight .ch { color: #75715e }
.mw-highlight .cm { color: #75715e }
.mw-highlight .cp { color: #75715e }
.mw-highlight .cpf { color: #75715e }
.mw-highlight .c1 { color: #75715e }
.mw-highlight .cs { color: #75715e }
.mw-highlight .gd { color: #f92672 }
.mw-highlight .ge { font-style: italic }
.mw-highlight .gi { color: #a6e22e }
.mw-highlight .gs { font-weight: bold }
.mw-highlight .gu { color: #75715e }
.mw-highlight .kc { color: #66d9ef }
.mw-highlight .kd { color: #66d9ef }
.mw-highlight .kn { color: #f92672 }
.mw-highlight .kp { color: #66d9ef }
.mw-highlight .kr { color: #66d9ef }
.mw-highlight .kt { color: #66d9ef }
.mw-highlight .ld { color: #e6db74 }
.mw-highlight .m { color: #ae81ff }
.mw-highlight .s { color: #e6db74 }
.mw-highlight .na { color: #a6e22e }
.mw-highlight .nb { color: #f8f8f2 }
.mw-highlight .nc { color: #a6e22e }
.mw-highlight .no { color: #66d9ef }
.mw-highlight .nd { color: #a6e22e }
.mw-highlight .ni { color: #f8f8f2 }
.mw-highlight .ne { color: #a6e22e }
.mw-highlight .nf { color: #a6e22e }
.mw-highlight .nl { color: #f8f8f2 }
.mw-highlight .nn { color: #f8f8f2 }
.mw-highlight .nx { color: #a6e22e }
.mw-highlight .py { color: #f8f8f2 }
.mw-highlight .nt { color: #f92672 }
.mw-highlight .nv { color: #f8f8f2 }
.mw-highlight .ow { color: #f92672 }
.mw-highlight .w { color: #f8f8f2 }
.mw-highlight .mb { color: #ae81ff }
.mw-highlight .mf { color: #ae81ff }
.mw-highlight .mh { color: #ae81ff }
.mw-highlight .mi { color: #ae81ff }
.mw-highlight .mo { color: #ae81ff }
.mw-highlight .sa { color: #e6db74 }
.mw-highlight .sb { color: #e6db74 }
.mw-highlight .sc { color: #e6db74 }
.mw-highlight .dl { color: #e6db74 }
.mw-highlight .sd { color: #e6db74 }
.mw-highlight .s2 { color: #e6db74 }
.mw-highlight .se { color: #ae81ff }
.mw-highlight .sh { color: #e6db74 }
.mw-highlight .si { color: #e6db74 }
.mw-highlight .sx { color: #e6db74 }
.mw-highlight .sr { color: #e6db74 }
.mw-highlight .s1 { color: #e6db74 }
.mw-highlight .ss { color: #e6db74 }
.mw-highlight .bp { color: #f8f8f2 }
.mw-highlight .fm { color: #a6e22e }
.mw-highlight .vc { color: #f8f8f2 }
.mw-highlight .vg { color: #f8f8f2 }
.mw-highlight .vi { color: #f8f8f2 }
.mw-highlight .vm { color: #f8f8f2 }
.mw-highlight .il { color: #ae81ff }

Custom highlighting themes

Creating a custom theme for SyntaxHighlight can be very difficult due to its large number of ambiguous class names. The code above may be used as a template for manually creating a theme, or tools such as jwarby's Pygments Theme Builder can be used to generate one.

Some popular premade themes can be downloaded from jwarby's Pygments Theme Library, but they must be adapted for use on MediaWiki by replacing .highlight with .mw-highlight.