One Dark Pygments Theme
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 }