Better syntax highlighting

Author: ryrych

_config.yml

@@ -19,4 +19,5 @@ github_username:  "vim-ctrlspace/vim-ctrlspace"
 excerpt_separator: "<!-- more -->"
 
 # Build settings
-markdown: kramdown
+markdown: redcarpet
+highlighter: pygments

_sass/_syntax-highlighting.scss

@@ -0,0 +1,114 @@
+// theme from: https://github.com/richleland/pygments-css
+// .highlight box styles taken from https://github.com/suan/vim-instant-markdown
+
+.highlight pre {
+  background-color: rgb(247, 247, 247);
+  border-radius: 3px;
+  font-size: 68%; // 13.6px - github size
+  line-height: 1.45;
+  overflow-x: auto;
+  overflow-y: auto;
+  padding: 16px;
+  word-wrap: normal;
+}
+
+.highlight pre code {
+  background-color: transparent;
+  border: 0px;
+  display: inline;
+  line-height: inherit;
+  margin: 0px;
+  max-width: initial;
+  overflow: initial;
+  padding: 0px;
+  word-wrap: normal;
+}
+
+.highlight pre > code {
+  background: transparent;
+  border: 0px;
+  font-size: 100%;
+  margin: 0px;
+  padding: 0px;
+  white-space: pre;
+  word-break: normal;
+}
+
+code {
+  background-color: rgba(0, 0, 0, 0.0392157);
+  border-radius: 3px;
+  font-size: 85%;
+  margin: 0px;
+  padding: 0.2em 0px;
+}
+
+.highlight code, .highlight pre{color:#fdce93;background-color:#3f3f3f}
+.highlight .hll{background-color:#222}
+.highlight .c{color:#7f9f7f}
+.highlight .err{color:#e37170;background-color:#3d3535}
+.highlight .g{color:#7f9f7f}
+.highlight .k{color:#f0dfaf}
+.highlight .l{color:#ccc}
+.highlight .n{color:#dcdccc}
+.highlight .o{color:#f0efd0}
+.highlight .x{color:#ccc}
+.highlight .p{color:#41706f}
+.highlight .cm{color:#7f9f7f}
+.highlight .cp{color:#7f9f7f}
+.highlight .c1{color:#7f9f7f}
+.highlight .cs{color:#cd0000;font-weight:bold}
+.highlight .gd{color:#cd0000}
+.highlight .ge{color:#ccc;font-style:italic}
+.highlight .gr{color:red}
+.highlight .gh{color:#dcdccc;font-weight:bold}
+.highlight .gi{color:#00cd00}
+.highlight .go{color:gray}
+.highlight .gp{color:#dcdccc;font-weight:bold}
+.highlight .gs{color:#ccc;font-weight:bold}
+.highlight .gu{color:purple;font-weight:bold}
+.highlight .gt{color:#0040D0}
+.highlight .kc{color:#dca3a3}
+.highlight .kd{color:#ffff86}
+.highlight .kn{color:#dfaf8f;font-weight:bold}
+.highlight .kp{color:#cdcf99}
+.highlight .kr{color:#cdcd00}
+.highlight .kt{color:#00cd00}
+.highlight .ld{color:#cc9393}
+.highlight .m{color:#8cd0d3}
+.highlight .s{color:#cc9393}
+.highlight .na{color:#9ac39f}
+.highlight .nb{color:#efef8f}
+.highlight .nc{color:#efef8f}
+.highlight .no{color:#ccc}
+.highlight .nd{color:#ccc}
+.highlight .ni{color:#c28182}
+.highlight .ne{color:#c3bf9f;font-weight:bold}
+.highlight .nf{color:#efef8f}
+.highlight .nl{color:#ccc}
+.highlight .nn{color:#8fbede}
+.highlight .nx{color:#ccc}
+.highlight .py{color:#ccc}
+.highlight .nt{color:#9ac39f}
+.highlight .nv{color:#dcdccc}
+.highlight .ow{color:#f0efd0}
+.highlight .w{color:#ccc}
+.highlight .mf{color:#8cd0d3}
+.highlight .mh{color:#8cd0d3}
+.highlight .mi{color:#8cd0d3}
+.highlight .mo{color:#8cd0d3}
+.highlight .sb{color:#cc9393}
+.highlight .sc{color:#cc9393}
+.highlight .sd{color:#cc9393}
+.highlight .s2{color:#cc9393}
+.highlight .se{color:#cc9393}
+.highlight .sh{color:#cc9393}
+.highlight .si{color:#cc9393}
+.highlight .sx{color:#cc9393}
+.highlight .sr{color:#cc9393}
+.highlight .s1{color:#cc9393}
+.highlight .ss{color:#cc9393}
+.highlight .bp{color:#efef8f}
+.highlight .vc{color:#efef8f}
+.highlight .vg{color:#dcdccc}
+.highlight .vi{color:#ffffc7}
+.highlight .il{color:#8cd0d3}

_sass/_syntax.scss

@@ -49,5 +49,5 @@ $on-laptop:        800px;
 @import
         "base",
         "layout",
-        "syntax-highlighting"
+        "syntax"
 ;