Gamepedia Help Wiki
Advertisement

SyntaxHighlight's code blocks come with preset syntax highlighting colors. On Hydra (light theme) wikis, the highlighter uses the default Pygments highlighting color scheme, while on Hydradark (dark theme) wikis, it uses the Monokai color scheme. Depending on the overall color scheme of a wiki skin, some wikis may wish to restyle the syntax highlighter.

Sample highlighting theme

The following is CSS code for the Monokai syntax highlighting theme (adapted for use on Gamepedia wikis), which is the default highlighting color scheme on dark themed 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.

Themes from either of the two above tools must be adapted for use on MediaWiki by replacing .highlight with .mw-highlight.

Advertisement