As part of the new Jekyll site build, I wanted to make sure I had a decent set of syntax highlighting colours for pygments to make use of (the framework that provides code highlighting on here).

I’ve recently switched my code editor over to Atom.io, and I like the default theme (One Dark), so I’ve basically ripped that off as much as possible.

It’s only really been tested with PHP, SCSS, HTML and JavaScript – let me know if you tweak it for other languages and I’d be happy to add it :)

Here’s the .scss for it below:

  1 /**
  2  * Syntax highlighting styles
  3  */
  4 
  5 .highlighttable,
  6 .post-content > .highlight {
  7   background: #282C34;
  8   border-radius: 6px;
  9   font-size: 0.675em;
 10   -webkit-font-smoothing: subpixel-antialiased;
 11   width: 100%;
 12 }
 13 
 14 .highlight {
 15 
 16   .c     { color: #5B6370; font-style: italic } // Comment
 17   .err   { color: #960050; background-color: #1e0010; } // Error
 18   .k     { color: #C776DF; font-weight: bold; } // Keyword
 19   .o     { font-weight: bold } // Operator
 20   .cm    { color: #5B6370; font-style: italic } // Comment.Multiline
 21   .cp    { color: #5B6370; font-weight: bold } // Comment.Preproc
 22   .c1    { color: #5B6370; font-style: italic } // Comment.Single
 23   .cs    { color: #5B6370; font-weight: bold; font-style: italic } // Comment.Special
 24   .gd    { color: #000; background-color: #fdd } // Generic.Deleted
 25   .gd .x { color: #000; background-color: #faa } // Generic.Deleted.Specific
 26   .ge    { font-style: italic } // Generic.Emph
 27   .gr    { color: #a00 } // Generic.Error
 28   .gh    { color: #5B6370 } // Generic.Heading
 29   .gi    { color: #a6e22e; background-color: #dfd } // Generic.Inserted
 30   .gi .x { color: #a6e22e; background-color: #afa } // Generic.Inserted.Specific
 31   .go    { color: #888 } // Generic.Output
 32   .gp    { color: #555 } // Generic.Prompt
 33   .gs    { font-weight: bold } // Generic.Strong
 34   .gu    { color: #aaa } // Generic.Subheading
 35   .gt    { color: #a00 } // Generic.Traceback
 36   .kc    { font-weight: bold } // Keyword.Constant
 37   .kd    { color: #C776DF; font-weight: bold } // Keyword.Declaration
 38   .kp    { font-weight: bold } // Keyword.Pseudo
 39   .kr    { font-weight: bold } // Keyword.Reserved
 40   .kt    { color: #458; font-weight: bold } // Keyword.Type
 41   .m     { color: #4FB6C3 } // Literal.Number
 42   .s     { color: #A2BD40 } // Literal.String
 43   .na    { color: #E2964A } // Name.Attribute
 44   .nb    { color: #4FB6C3 } // Name.Builtin
 45   .nc    { color: #E2964A; font-weight: bold } // Name.Class
 46   .nd    { color: #4FB6BE; } // Name.Decorator
 47   .no    { color: #4FB6BE } // Name.Constant
 48   .ni    { color: #E2964A } // Name.Entity
 49   .ne    { color: #900; font-weight: bold } // Name.Exception
 50   .nf    { color: #52A5EB; font-weight: bold } // Name.Function
 51   .nn    { color: #555 } // Name.Namespace
 52   .nt    { color: #DE5442 } // Name.Tag
 53   .nv    { color: #DE5442 } // Name.Variable
 54   .ow    { font-weight: bold } // Operator.Word
 55   .w     { color: #bbb } // Text.Whitespace
 56   .mf    { color: #4FB6C3 } // Literal.Number.Float
 57   .mh    { color: #4FB6C3 } // Literal.Number.Hex
 58   .mi    { color: #4FB6C3 } // Literal.Number.Integer
 59   .mo    { color: #4FB6C3 } // Literal.Number.Oct
 60   .sb    { color: #A2BD40 } // Literal.String.Backtick
 61   .sc    { color: #A2BD40 } // Literal.String.Char
 62   .sd    { color: #5B6370 } // Literal.String.Doc
 63   .s2    { color: #A2BD40 } // Literal.String.Double
 64   .se    { color: #A2BD40 } // Literal.String.Escape
 65   .sh    { color: #A2BD40 } // Literal.String.Heredoc
 66   .si    { color: #A2BD40 } // Literal.String.Interpol
 67   .sx    { color: #A2BD40 } // Literal.String.Other
 68   .sr    { color: #009926 } // Literal.String.Regex
 69   .s1    { color: #A2BD40 } // Literal.String.Single
 70   .ss    { color: #990073 } // Literal.String.Symbol
 71   .bp    { color: #999 } // Name.Builtin.Pseudo
 72   .vc    { color: #008080 } // Name.Variable.Class
 73   .vg    { color: #008080 } // Name.Variable.Global
 74   .vi    { color: #008080 } // Name.Variable.Instance
 75   .il    { color: #4FB6C3 } // Literal.Number.Integer.Long
 76 }
 77 
 78 .post-content > .highlight {
 79   line-height: 1;
 80   overflow-x: scroll;
 81   padding: 10px;
 82 
 83   pre {
 84     margin: 0;
 85     white-space: pre;
 86   }
 87 
 88   .lineno{
 89     border-right: solid 1px #3C4049;
 90     padding-left: 10px;
 91     padding-right: 10px;
 92     text-align: right;
 93   }
 94 
 95   span {
 96     display: inline-block;
 97     padding: 0.3em 0;
 98   }
 99 }
100 
101 .highlighttable {
102 
103   .linenos {
104     border-right: solid 1px #3C4049;
105     padding-left:10px;
106     padding-right: 10px;
107     text-align: right;
108     width: 3em;
109   }
110 
111   .code .highlight {
112     padding-left: 10px;
113 
114     pre { white-space: pre; }
115   }
116 }