Skip to content

Themes

Jump to bottom
Mottie edited this page Feb 23, 2014 · 8 revisions

Pygments Syntax Highlighting Styles

Github uses Pygments (Python-based syntax highlighter) to provide syntax highlighting for all of its code.

CSS Definitions

The basic rendered css structure of a style looks like this:

/* Native theme */
.highlight, .highlight pre:not(.diff-line-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 */

Please note that the following was modified from most of the generated/available pygments themes:

  • The first line was modified. The line original only had .highlight, but was updated to work better on GitHub with the following css selectors:

    .highlight, .highlight pre:not(.diff-line-pre), .highlight table { ... }

  • All definitiions include an !important flag, so that the Stylish theme overrides the default GitHub syntax highlighting style.

What to do once you have your theme:

  • If you end up with a pygments CSS file, compress it using an online resource like CleanCSS (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, 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 and include it with the userstyle.

Making your own

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

Pygments styles (CSS)

  • Start with a base CSS style and modify the colors yourself.

    • You can test it using this repository's "index.html" file.

    • Just add a style to the page using this 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 title, and adds it to the select box automatically.

  • Search for pygments css files. Here are some sources I found:

  • 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:not(.diff-line-pre), .highlight table selectors

  • 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:

  • 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

    • If get a 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.", 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 another example: If your file name is derpyDerp.py, then the class name can be class DerpyderpStyle(Style): (the second capitalization doesn't matter), and when calling the pygmentize script, use derpyDerp (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:

  • Create your own/modify an existing style online

  • Once you have a Vim theme you want, you'll need to convert it:

    • You'll first need Python and Pygments installed.

    • Convert a basic Vim file to pygments using vim2pygments (python script) 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, it will 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 "CSS Definitions" above

Textmate themes

  • Premade styles can be obtained from:

  • Create your own/modify an existing style online

  • Once you have a thTheme you want, you'll need to convert it:

    • tmTheme (Textmate) to pygments conversion using thTheme2pygment (python script) 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 "CSS Definitions" above

GitHub Dark Wiki - © 2013-2020 StylishThemes Team

-- Customizing

-- Testing

  • Emoji (All GitHub Emoji)

-- Outdated Pages

Clone this wiki locally