Change code highlighting
- Works well with line numbers from pygments
- Uses a different theme
Fixes #19
diff --git a/static/css/pygments.css b/static/css/pygments.css
index 7c3680e..7cf93c4 100644
--- a/static/css/pygments.css
+++ b/static/css/pygments.css
@@ -1,61 +1,92 @@
-.hll { background-color: #ffffcc }
-.c { color: #408080; font-style: italic } /* Comment */
-.err { color: #FF0000 } /* Error */
-.k { color: #008000; font-weight: bold } /* Keyword */
-.o { color: #666666 } /* Operator */
-.cm { color: #408080; font-style: italic } /* Comment.Multiline */
-.cp { color: #BC7A00 } /* Comment.Preproc */
-.c1 { color: #408080; font-style: italic } /* Comment.Single */
-.cs { color: #408080; font-style: italic } /* Comment.Special */
-.gd { color: #A00000 } /* Generic.Deleted */
-.ge { font-style: italic } /* Generic.Emph */
-.gr { color: #FF0000 } /* Generic.Error */
-.gh { color: #000080; font-weight: bold } /* Generic.Heading */
-.gi { color: #00A000 } /* Generic.Inserted */
-.go { color: #888888 } /* Generic.Output */
-.gp { color: #000080; font-weight: bold } /* Generic.Prompt */
-.gs { font-weight: bold } /* Generic.Strong */
-.gu { color: #800080; font-weight: bold } /* Generic.Subheading */
-.gt { color: #0044DD } /* Generic.Traceback */
-.kc { color: #008000; font-weight: bold } /* Keyword.Constant */
-.kd { color: #008000; font-weight: bold } /* Keyword.Declaration */
-.kn { color: #008000; font-weight: bold } /* Keyword.Namespace */
-.kp { color: #008000 } /* Keyword.Pseudo */
-.kr { color: #008000; font-weight: bold } /* Keyword.Reserved */
-.kt { color: #B00040 } /* Keyword.Type */
-.m { color: #666666 } /* Literal.Number */
-.s { color: #BA2121 } /* Literal.String */
-.na { color: #7D9029 } /* Name.Attribute */
-.nb { color: #008000 } /* Name.Builtin */
-.nc { color: #0000FF; font-weight: bold } /* Name.Class */
-.no { color: #880000 } /* Name.Constant */
-.nd { color: #AA22FF } /* Name.Decorator */
-.ni { color: #999999; font-weight: bold } /* Name.Entity */
-.ne { color: #D2413A; font-weight: bold } /* Name.Exception */
-.nf { color: #0000FF } /* Name.Function */
-.nl { color: #A0A000 } /* Name.Label */
-.nn { color: #0000FF; font-weight: bold } /* Name.Namespace */
-.nt { color: #008000; font-weight: bold } /* Name.Tag */
-.nv { color: #19177C } /* Name.Variable */
-.ow { color: #AA22FF; font-weight: bold } /* Operator.Word */
-.w { color: #bbbbbb } /* Text.Whitespace */
-.mf { color: #666666 } /* Literal.Number.Float */
-.mh { color: #666666 } /* Literal.Number.Hex */
-.mi { color: #666666 } /* Literal.Number.Integer */
-.mo { color: #666666 } /* Literal.Number.Oct */
-.sb { color: #BA2121 } /* Literal.String.Backtick */
-.sc { color: #BA2121 } /* Literal.String.Char */
-.sd { color: #BA2121; font-style: italic } /* Literal.String.Doc */
-.s2 { color: #BA2121 } /* Literal.String.Double */
-.se { color: #BB6622; font-weight: bold } /* Literal.String.Escape */
-.sh { color: #BA2121 } /* Literal.String.Heredoc */
-.si { color: #BB6688; font-weight: bold } /* Literal.String.Interpol */
-.sx { color: #008000 } /* Literal.String.Other */
-.sr { color: #BB6688 } /* Literal.String.Regex */
-.s1 { color: #BA2121 } /* Literal.String.Single */
-.ss { color: #19177C } /* Literal.String.Symbol */
-.bp { color: #008000 } /* Name.Builtin.Pseudo */
-.vc { color: #19177C } /* Name.Variable.Class */
-.vg { color: #19177C } /* Name.Variable.Global */
-.vi { color: #19177C } /* Name.Variable.Instance */
-.il { color: #666666 } /* Literal.Number.Integer.Long */
+/* See available classes at https://bitbucket.org/birkenfeld/pygments-main/src/default/pygments/token.py */
+
+.hll { background-color: #f8f8f8; border: 1px solid #ccc; margin: 0px -1px; border-radius: 3px; }
+.w { color: #bbbbbb; }
+/* .esc (Escape) */
+.err { color: #a61717; background-color: #e3d2d2; }
+/* .x (Other) */
+
+/* Keyword */
+.k { font-weight: bold; }
+.kc { font-weight: bold; }
+.kd { font-weight: bold; }
+.kn { font-weight: bold; }
+.kp { font-weight: bold; }
+.kr { font-weight: bold; }
+.kt { color: #445588; font-weight: bold; }
+
+/* Name */
+.n { color: #333333; }
+.na { color: teal; }
+.nb { color: #0086b3; }
+.bp { color: #1d3e81 }
+.nc { color: #445588; font-weight: bold; }
+.no { color: teal; }
+.nd { color: #3c5d5d; font-weight: bold }
+.ni { color: purple; }
+.ne { color: #990000; font-weight: bold; }
+.nf { color: #990000; font-weight: bold; }
+/* .py (Name.Property) */
+.nl { color: #990000; font-weight: bold }
+.nn { color: #555555; }
+/* .nx (Name.Other) */
+.nt { color: navy; }
+.nv { color: teal; }
+.vc { color: teal; }
+.vg { color: teal; }
+.vi { color: teal; }
+
+/* Literal */
+/* .l (Literal) */
+/* .ld (Literal.Date) */
+
+/* String */
+.s { color: #dd1144; }
+.sb { color: #dd1144; }
+.sc { color: #dd1144; }
+.sd { color: #dd1144; }
+.s2 { color: #dd1144; }
+.se { color: #dd1144; }
+.sh { color: #dd1144; }
+.si { color: #dd1144; }
+.sx { color: #dd1144; }
+.sr { color: #009926; }
+.s1 { color: #dd1144; }
+.ss { color: #990073; }
+
+/* Number */
+.m { color: #009999; }
+/* .mb (Number.Bin) */
+.mf { color: #009999; }
+.mh { color: #009999; }
+.mi { color: #009999; }
+.il { color: #009999; }
+.mo { color: #009999; }
+
+/* Operator */
+.o { font-weight: bold; }
+.ow { font-weight: bold; }
+
+/* .p (Punctuation) */
+
+/* Comment */
+.c { color: #999988; font-style: italic; }
+.cm { color: #999988; font-style: italic; }
+.cp { color: #999999; font-weight: bold; font-style: italic; }
+.c1 { color: #999988; font-style: italic; }
+.cs { color: #999999; font-weight: bold; font-style: italic; }
+
+/* Generic */
+/* .g (Generic) */
+.gd { color: #000000; background-color: #ffdddd; }
+.gd .x { color: #000000; background-color: #ffaaaa; }
+.ge { font-style: italic; }
+.gr { color: #aa0000; }
+.gh { color: #999999; }
+.gi { color: #000000; background-color: #ddffdd; }
+.gi .x { color: #000000; background-color: #aaffaa; }
+.go { color: #888888; }
+.gp { color: #555555; }
+.gs { font-weight: bold; }
+.gu { color: #800080; font-weight: bold; }
+.gt { color: #aa0000; }
diff --git a/static/css/style.less b/static/css/style.less
index 15c4e47..6b874dd 100644
--- a/static/css/style.less
+++ b/static/css/style.less
@@ -1,9 +1,13 @@
-@red: #ff0000;
@black: #000000;
@white: #ffffff;
@light-grey: #eeeeee;
@med-grey: #5f5f5f;
@dark-grey: #202020;
+
+@code-border: #c7c7c7;
+@code-background: #f6f6f6;
+@code-linebg: #dddddd;
+
@blue: #0e94ec;
@accent: @blue;
@@ -139,25 +143,60 @@
text-decoration: underline;
}
- code {
- margin: 2px;
- padding: 0;
- color: @black;
+ @codeformat: {
+ color: black;
font-size: 14px;
font-family: @mono;
+ };
+
+ code {
+ @codeformat();
+ padding: 0px 2px;
background: @light-grey;
}
pre {
- margin: 22px 2px 22px 2px;
- padding: 6px;
- color: @black;
- border-left: 3px solid @accent;
- font-size: 14px;
- font-family: @mono;
- background: @light-grey;
+ @codeformat();
line-height: 1.125em;
+ margin-bottom: 0px;
+ margin-top: 0px;
+ padding-top: 5px;
+ padding-bottom: 10px;
+ }
+
+ div.highlight pre {
+ padding-left: 10px;
overflow-x: auto;
+ border: 1px solid @code-border;
+ border-left: 3px solid @accent;
+ background: @code-background;
+ }
+
+ /* Line numbers are enabled*/
+ table.highlighttable {
+ table-layout: fixed;
+ width: 100%;
+ border: 1px solid @code-border;
+ border-collapse: collapse;
+
+ pre {
+ border: none;
+ }
+
+ td.linenos {
+ width: 30px;
+ overflow: hidden;
+ text-align: right;
+ border-left: 3px solid @accent;
+ border-right: 1px solid @code-border;
+ background: @code-linebg;
+ vertical-align:top;
+
+ div.linenodiv pre {
+ padding-right: 4px;
+ float: right;
+ }
+ }
}
blockquote {