Themes

GitHub no longer uses Pygments Syntax Highlighting.

** This wiki is page NOT up-to-date and no longer maintained! **

Sections: Intro | Finding a style | Creating or Tweaking a Style | Testing a style | Submitting a style

Pygments Syntax Highlighting Styles

Intro

Github uses Pygments (Python-based syntax highlighter) to provide syntax highlighting for all of its code.
The Stylish addon, along with the userstyles.org site, allows adding extra custom coding like syntax highlighting themes.
We are working on a userscript that will also allow this, and automate updating; but it may take some time to complete.
GitHub styling requires a basic Pygments syntax highlighting block of CSS shown in the Creating or Tweaking a Style section below.

Finding a Style

The following sites, repositories and/or scripts will help with finding and/or creating your own custom style:

Pygments styles (CSS)

Search the internet for a pygments CSS files. Here are some sources I found:
- Pygments CSS
- Pygments VIM styles
- Pygments for WordPress
- Tomorrow pygments
- Tutti-frutti (bright theme)
Generate a random style using Sweyla's Color Theme Generator
- Click on either of the "Generate" buttons to change the current theme
- Once satisfied, download the theme using the "CSS (Pygments)" link at the bottom
- Save the file, then open it in an editor.
- Replace all .codeblock with .highlight.
- Remove all span, and the lines containing .selection, .caret and support_function (they aren't used by GitHub) as far as I know.
- Add an !important flag after each definition.
- Modify the first line (with the background color definition) to include .highlight pre, .highlight table selectors
- See the Creating or Tweaking a Style section for more details.
SASS pygments theme base
- Generate an example using Pygmentize (Python script), and Sass (Ruby)
- Make sure that both the $code-base-selector and $code-base-selector-block are set to ".highlight" (not all highlight classes are applied to divs)
- I haven't actually used this method, so you're on your own from here.

Pygments styles (Python scripts)

I think I've found most of these scripts and have included them. Basically it's a python script that requires Pygments to convert it from a python script into a CSS file. Here are a few examples:
You will need Python and Pygments installed on your computer.
The following Pygments command is used to convert a .py file into a useable .css file; replace "mytheme" with the name of your theme:
```
pygmentize -S mytheme -f html -a .highlight > mytheme.css
```
- Make sure that the -S is a capital S!
- If you get this syntax error "SyntaxError: invalid syntax", make sure that the file name does NOT start with a number.
- If you get an error "Could not find style class 'mytheme' in style module.", then try the following:
  - Open the file and make sure that the mytheme in class MythemeStyle(Style): matches the file name mytheme.py
  - The first letter of MythemeStyle must be capitalized.
  - The style name (mytheme in the above example) can not start with a number!
  - Here is an example of a theme file named derpyDerp.py. The class name can be set as class DerpyderpStyle(Style): (the second capitalization doesn't matter here), and when calling the pygmentize script, use derpyDerp (this must exactly match the file name).
  - Lastly, I had a lot of issues with this error until I copied the style directly into the pygments styles directory.
```
../Python33/Lib/site-packages/pygments-1.6-py3.3.egg/pygments/styles
```
  Your path may vary, but I installed Pygments using pip.

Vim themes

Premade styles can be obtained from:
- Vivify
- Vim.org
  - ColorSamplePack.zip (177 styles)
  - Mimicpak.zip (17 styles)
- DeviantArt
- GitHub (not sure if all of these examples will convert)
Create your own/modify an existing style online
- Vivify
Once you have a Vim theme you want, you'll need to convert it:
- You'll first need Python and Pygments installed.
- Then download vim2pygments (python script).
- Convert a basic Vim file to pygments using vim2pygments as follows; change mytheme to match your file name:
```
python vim2pygments.py mytheme.vim > mytheme.py
```
  - Note that vim files should mostly contain lines that start with hi (see this example).
  - If the vim file is actual code, meaning most lines don't start with hi, it will likely not convert (e.g. this file cannot be converted)
- Copy the mytheme.py file into your pygments style directory (see the notes under "Pygments styles (Python scripts)" above)
- Convert the python style into a CSS file using
```
pygmentize -S mytheme -f html -a .highlight > mytheme.css
```
- Once you have this CSS file, follow the instructions under Creating or Tweaking a Style.

Textmate themes

Premade styles can be obtained from:
- ththeme editor (218 themes)
- User submitted themes
Create your own/modify an existing style online
- ththeme editor
Once you have a thTheme you want, you'll need to convert it:
- Download thTheme2pygment (python script)
- tmTheme (Textmate) to pygments conversion using thTheme2pygment as follows:
```
python tmTheme2pygment.py mytheme.tmTheme ~/Desktop/mytheme.css
```
- I haven't actually used this script yet, so I can't share any more specifics about it.
- Once you have this CSS file, follow the instructions under under Creating or Tweaking a Style.

Creating or Tweaking a Style

CSS Definitions

This is an example of the Native Pygments style as found on the internet (ref; another slightly different version)

.highlight .hll { background-color: #404040 }
.highlight  { background: #202020; color: #d0d0d0 }
.highlight .c { color: #999999; font-style: italic } /* Comment */
.highlight .err { color: #a61717; background-color: #e3d2d2 } /* Error */
.highlight .g { color: #d0d0d0 } /* Generic */
.highlight .k { color: #6ab825; font-weight: bold } /* Keyword */
.highlight .l { color: #d0d0d0 } /* Literal */
.highlight .n { color: #d0d0d0 } /* Name */
.highlight .o { color: #d0d0d0 } /* Operator */
.highlight .x { color: #d0d0d0 } /* Other */
.highlight .p { color: #d0d0d0 } /* Punctuation */
.highlight .cm { color: #999999; font-style: italic } /* Comment.Multiline */
.highlight .cp { color: #cd2828; font-weight: bold } /* Comment.Preproc */
.highlight .c1 { color: #999999; font-style: italic } /* Comment.Single */
.highlight .cs { color: #e50808; font-weight: bold; background-color: #520000 } /* Comment.Special */
.highlight .gd { color: #d22323 } /* Generic.Deleted */
.highlight .ge { color: #d0d0d0; font-style: italic } /* Generic.Emph */
.highlight .gr { color: #d22323 } /* Generic.Error */
.highlight .gh { color: #ffffff; font-weight: bold } /* Generic.Heading */
.highlight .gi { color: #589819 } /* Generic.Inserted */
.highlight .go { color: #cccccc } /* Generic.Output */
.highlight .gp { color: #aaaaaa } /* Generic.Prompt */
.highlight .gs { color: #d0d0d0; font-weight: bold } /* Generic.Strong */
.highlight .gu { color: #ffffff; text-decoration: underline } /* Generic.Subheading */
.highlight .gt { color: #d22323 } /* Generic.Traceback */
.highlight .kc { color: #6ab825; font-weight: bold } /* Keyword.Constant */
.highlight .kd { color: #6ab825; font-weight: bold } /* Keyword.Declaration */
.highlight .kn { color: #6ab825; font-weight: bold } /* Keyword.Namespace */
.highlight .kp { color: #6ab825 } /* Keyword.Pseudo */
.highlight .kr { color: #6ab825; font-weight: bold } /* Keyword.Reserved */
.highlight .kt { color: #6ab825; font-weight: bold } /* Keyword.Type */
.highlight .ld { color: #d0d0d0 } /* Literal.Date */
.highlight .m { color: #3677a9 } /* Literal.Number */
.highlight .s { color: #ed9d13 } /* Literal.String */
.highlight .na { color: #bbbbbb } /* Name.Attribute */
.highlight .nb { color: #24909d } /* Name.Builtin */
.highlight .nc { color: #447fcf; text-decoration: underline } /* Name.Class */
.highlight .no { color: #40ffff } /* Name.Constant */
.highlight .nd { color: #ffa500 } /* Name.Decorator */
.highlight .ni { color: #d0d0d0 } /* Name.Entity */
.highlight .ne { color: #bbbbbb } /* Name.Exception */
.highlight .nf { color: #447fcf } /* Name.Function */
.highlight .nl { color: #d0d0d0 } /* Name.Label */
.highlight .nn { color: #447fcf; text-decoration: underline } /* Name.Namespace */
.highlight .nx { color: #d0d0d0 } /* Name.Other */
.highlight .py { color: #d0d0d0 } /* Name.Property */
.highlight .nt { color: #6ab825; font-weight: bold } /* Name.Tag */
.highlight .nv { color: #40ffff } /* Name.Variable */
.highlight .ow { color: #6ab825; font-weight: bold } /* Operator.Word */
.highlight .w { color: #666666 } /* Text.Whitespace */
.highlight .mf { color: #3677a9 } /* Literal.Number.Float */
.highlight .mh { color: #3677a9 } /* Literal.Number.Hex */
.highlight .mi { color: #3677a9 } /* Literal.Number.Integer */
.highlight .mo { color: #3677a9 } /* Literal.Number.Oct */
.highlight .sb { color: #ed9d13 } /* Literal.String.Backtick */
.highlight .sc { color: #ed9d13 } /* Literal.String.Char */
.highlight .sd { color: #ed9d13 } /* Literal.String.Doc */
.highlight .s2 { color: #ed9d13 } /* Literal.String.Double */
.highlight .se { color: #ed9d13 } /* Literal.String.Escape */
.highlight .sh { color: #ed9d13 } /* Literal.String.Heredoc */
.highlight .si { color: #ed9d13 } /* Literal.String.Interpol */
.highlight .sx { color: #ffa500 } /* Literal.String.Other */
.highlight .sr { color: #ed9d13 } /* Literal.String.Regex */
.highlight .s1 { color: #ed9d13 } /* Literal.String.Single */
.highlight .ss { color: #ed9d13 } /* Literal.String.Symbol */
.highlight .bp { color: #24909d } /* Name.Builtin.Pseudo */
.highlight .vc { color: #40ffff } /* Name.Variable.Class */
.highlight .vg { color: #40ffff } /* Name.Variable.Global */
.highlight .vi { color: #40ffff } /* Name.Variable.Instance */
.highlight .il { color: #3677a9 } /* Literal.Number.Integer.Long */

To modify this file to make it usable as a Stylish syntax highlighting theme, the following changes need to be made:

Make sure that each line starts with .highlight, some styles may start with a different class name. GitHub requires .highlight

The second line

.highlight  { background: #202020; color: #d0d0d0 }

needs to include additional selectors specific for GitHub. The line will end up looking like this:

.highlight, .highlight pre, .highlight table { background: #202020; color: #d0d0d0 }

After every definition, an !important flag needs to be added so that Stylish CSS overrides the default settings.
Some styles that are generated or found online include the same background color, as that defined in the .highlight definition, on almost every line. These were removed.
I took some liberties with this style and removed some of the bold, underline and italics definitions - maybe I shouldn't have.

The following is an example of a completed, uncompressed Pygments CSS file ready for GitHub:

/* Native theme */
.highlight, .highlight pre, .highlight table { background: #202020 !important; color: #d0d0d0 !important; }
.highlight .hll { background-color: #404040 !important; }
.highlight .c { color: #999999 !important; } /* Comment */
.highlight .err { color: #a61717 !important; background-color: #e3d2d2 !important; } /* Error */
.highlight .g { color: #d0d0d0 !important; } /* Generic */
.highlight .k { color: #6ab825 !important; } /* Keyword */
.highlight .l { color: #d0d0d0 !important; } /* Literal */
.highlight .n { color: #d0d0d0 !important; } /* Name */
.highlight .o { color: #d0d0d0 !important; } /* Operator */
.highlight .x { color: #d0d0d0 !important; } /* Other */
.highlight .p { color: #d0d0d0 !important; } /* Punctuation */
.highlight .cm { color: #999999 !important; } /* Comment.Multiline */
.highlight .cp { color: #cd2828 !important; } /* Comment.Preproc */
.highlight .c1 { color: #999999 !important; } /* Comment.Single */
.highlight .cs { color: #e50808 !important; background-color: #520000 !important; } /* Comment.Special */
.highlight .gd { color: #d22323 !important; } /* Generic.Deleted */
.highlight .ge { color: #d0d0d0 !important; } /* Generic.Emph */
.highlight .gr { color: #d22323 !important; } /* Generic.Error */
.highlight .gh { color: #ffffff !important; } /* Generic.Heading */
.highlight .gi { color: #589819 !important; } /* Generic.Inserted */
.highlight .go { color: #cccccc !important; } /* Generic.Output */
.highlight .gp { color: #aaaaaa !important; } /* Generic.Prompt */
.highlight .gs { color: #d0d0d0 !important; } /* Generic.Strong */
.highlight .gu { color: #ffffff !important; } /* Generic.Subheading */
.highlight .gt { color: #d22323 !important; } /* Generic.Traceback */
.highlight .kc { color: #6ab825 !important; } /* Keyword.Constant */
.highlight .kd { color: #6ab825 !important; } /* Keyword.Declaration */
.highlight .kn { color: #6ab825 !important; } /* Keyword.Namespace */
.highlight .kp { color: #6ab825 !important; } /* Keyword.Pseudo */
.highlight .kr { color: #6ab825 !important; } /* Keyword.Reserved */
.highlight .kt { color: #6ab825 !important; } /* Keyword.Type */
.highlight .ld { color: #d0d0d0 !important; } /* Literal.Date */
.highlight .m { color: #3677a9 !important; } /* Literal.Number */
.highlight .s { color: #ed9d13 !important; } /* Literal.String */
.highlight .na { color: #bbbbbb !important; } /* Name.Attribute */
.highlight .nb { color: #24909d !important; } /* Name.Builtin */
.highlight .nc { color: #447fcf !important; } /* Name.Class */
.highlight .no { color: #40ffff !important; } /* Name.Constant */
.highlight .nd { color: #ffa500 !important; } /* Name.Decorator */
.highlight .ni { color: #d0d0d0 !important; } /* Name.Entity */
.highlight .ne { color: #bbbbbb !important; } /* Name.Exception */
.highlight .nf { color: #447fcf !important; } /* Name.Function */
.highlight .nl { color: #d0d0d0 !important; } /* Name.Label */
.highlight .nn { color: #447fcf !important; } /* Name.Namespace */
.highlight .nx { color: #d0d0d0 !important; } /* Name.Other */
.highlight .py { color: #d0d0d0 !important; } /* Name.Property */
.highlight .nt { color: #6ab825 !important; } /* Name.Tag */
.highlight .nv { color: #40ffff !important; } /* Name.Variable */
.highlight .ow { color: #6ab825 !important; } /* Operator.Word */
.highlight .w { color: #666666 !important; } /* Text.Whitespace */
.highlight .mf { color: #3677a9 !important; } /* Literal.Number.Float */
.highlight .mh { color: #3677a9 !important; } /* Literal.Number.Hex */
.highlight .mi { color: #3677a9 !important; } /* Literal.Number.Integer */
.highlight .mo { color: #3677a9 !important; } /* Literal.Number.Oct */
.highlight .sb { color: #ed9d13 !important; } /* Literal.String.Backtick */
.highlight .sc { color: #ed9d13 !important; } /* Literal.String.Char */
.highlight .sd { color: #ed9d13 !important; } /* Literal.String.Doc */
.highlight .s2 { color: #ed9d13 !important; } /* Literal.String.Double */
.highlight .se { color: #ed9d13 !important; } /* Literal.String.Escape */
.highlight .sh { color: #ed9d13 !important; } /* Literal.String.Heredoc */
.highlight .si { color: #ed9d13 !important; } /* Literal.String.Interpol */
.highlight .sx { color: #ffa500 !important; } /* Literal.String.Other */
.highlight .sr { color: #ed9d13 !important; } /* Literal.String.Regex */
.highlight .s1 { color: #ed9d13 !important; } /* Literal.String.Single */
.highlight .ss { color: #ed9d13 !important; } /* Literal.String.Symbol */
.highlight .bp { color: #24909d !important; } /* Name.Builtin.Pseudo */
.highlight .vc { color: #40ffff !important; } /* Name.Variable.Class */
.highlight .vg { color: #40ffff !important; } /* Name.Variable.Global */
.highlight .vi { color: #40ffff !important; } /* Name.Variable.Instance */
.highlight .il { color: #3677a9 !important; } /* Literal.Number.Integer.Long */

##Testing a Style

Follow these directions to test out your style once you have completed Creating or Tweaking a Style.

Download or fork the GitHub-Dark repository.
Move or copy your style into the GitHub-Dark themes directory - name the file whatever you want.
Open the index.html file, located in the root GitHub-Dark directory, in your preferred editor and in your browser.

Add a link to your style to the head of the page using the following format:

<!-- replace "foo" (twice) with the name of your style -->
<link rel="stylesheet" title="foo" href="themes/foo.css">

The javascript extracts out the style name from the link title, and adds it to the select box automatically.
Save, then reload the index.html in your browser.
Find your theme in the select and check out your handy work! Click on any of the blocks to enlarge the code; this will not work in older browsers.

##Submitting a Style

When you are done tweaking your CSS file, compress it using an online resource like CleanCSS; use high compression.
Fork this repository and send us a pull request with your file.
If you get stuck anywhere in the process of converting the theme into a CSS file, then send me the file (gmail account; user wowmotty), and if things aren't too crazy, or if userstyles doesn't hate us for having a ton of styles to select from, then I'll convert, tweak and include it with the userstyle.

-- Customizing

-- Testing

Emoji (All GitHub Emoji)

-- Outdated Pages

Themes (Pygments)
Update (Admin Stuff)

Provide feedback

Saved searches

Use saved searches to filter your results more quickly