From dcfee2d9d93722094a7571a4db34fee2b598d620 Mon Sep 17 00:00:00 2001
From: Justin Palmer <justin@github.com>
Date: Mon, 4 Mar 2013 12:00:08 -0800
Subject: [PATCH] markdown preview to less.  also seperate out pygments colors

---
 .../stylesheets/markdown-preview.css          | 438 ------------------
 .../stylesheets/markdown-preview.less         | 385 +++++++++++++++
 .../stylesheets/pygments.less                 | 201 ++++++++
 3 files changed, 586 insertions(+), 438 deletions(-)
 delete mode 100644 src/packages/markdown-preview/stylesheets/markdown-preview.css
 create mode 100644 src/packages/markdown-preview/stylesheets/markdown-preview.less
 create mode 100644 src/packages/markdown-preview/stylesheets/pygments.less

diff --git a/src/packages/markdown-preview/stylesheets/markdown-preview.css b/src/packages/markdown-preview/stylesheets/markdown-preview.css
deleted file mode 100644
index 1138dc1b7..000000000
--- a/src/packages/markdown-preview/stylesheets/markdown-preview.css
+++ /dev/null
@@ -1,438 +0,0 @@
-.markdown-preview {
-  font-family: "Helvetica Neue", Helvetica, sans-serif;
-  font-size: 14px;
-  line-height: 1.6;
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  top: 0px;
-  left: 0px;
-  background-color: #fff;
-  overflow: auto;
-  z-index: 3;
-  box-sizing: border-box;
-  padding: 20px;
-}
-
-.markdown-body {
-  min-width: 680px;
-}
-
-.markdown-body pre,
-.markdown-body code,
-.markdown-body tt {
-  font-size: 12px;
-  font-family: Consolas, "Liberation Mono", Courier, monospace;
-}
-
-.markdown-body a {
-  color: #4183c4;
-}
-
-.markdown-body ol > li {
-  list-style-type: decimal;
-}
-
-.markdown-body ul > li {
-  list-style-type: disc;
-}
-
-.markdown-spinner {
-  margin: auto;
-  background-image: url(images/octocat-spinner-128.gif);
-  background-repeat: no-repeat;
-  background-size: 64px;
-  background-position: top center;
-  padding-top: 70px;
-  text-align: center;
-}
-
-
-/* this code below was copied from https://github.com/assets/stylesheets/primer/components/markdown.css */
-/* we really need to get primer in here somehow. */
-.markdown-body {
-  font-size: 14px;
-  line-height: 1.6;
-  overflow: hidden; }
-  .markdown-body > *:first-child {
-    margin-top: 0 !important; }
-  .markdown-body > *:last-child {
-    margin-bottom: 0 !important; }
-  .markdown-body a.absent {
-    color: #c00; }
-  .markdown-body a.anchor {
-    display: block;
-    padding-left: 30px;
-    margin-left: -30px;
-    cursor: pointer;
-    position: absolute;
-    top: 0;
-    left: 0;
-    bottom: 0; }
-  .markdown-body h1, .markdown-body h2, .markdown-body h3, .markdown-body h4, .markdown-body h5, .markdown-body h6 {
-    margin: 20px 0 10px;
-    padding: 0;
-    font-weight: bold;
-    -webkit-font-smoothing: antialiased;
-    cursor: text;
-    position: relative; }
-    .markdown-body h1 .mini-icon-link, .markdown-body h2 .mini-icon-link, .markdown-body h3 .mini-icon-link, .markdown-body h4 .mini-icon-link, .markdown-body h5 .mini-icon-link, .markdown-body h6 .mini-icon-link {
-      display: none;
-      color: #000; }
-    .markdown-body h1:hover a.anchor, .markdown-body h2:hover a.anchor, .markdown-body h3:hover a.anchor, .markdown-body h4:hover a.anchor, .markdown-body h5:hover a.anchor, .markdown-body h6:hover a.anchor {
-      text-decoration: none;
-      line-height: 1;
-      padding-left: 0;
-      margin-left: -22px;
-      top: 15%; }
-      .markdown-body h1:hover a.anchor .mini-icon-link, .markdown-body h2:hover a.anchor .mini-icon-link, .markdown-body h3:hover a.anchor .mini-icon-link, .markdown-body h4:hover a.anchor .mini-icon-link, .markdown-body h5:hover a.anchor .mini-icon-link, .markdown-body h6:hover a.anchor .mini-icon-link {
-        display: inline-block; }
-    .markdown-body h1 tt, .markdown-body h1 code, .markdown-body h2 tt, .markdown-body h2 code, .markdown-body h3 tt, .markdown-body h3 code, .markdown-body h4 tt, .markdown-body h4 code, .markdown-body h5 tt, .markdown-body h5 code, .markdown-body h6 tt, .markdown-body h6 code {
-      font-size: inherit; }
-  .markdown-body h1 {
-    font-size: 28px;
-    color: #000; }
-  .markdown-body h2 {
-    font-size: 24px;
-    border-bottom: 1px solid #ccc;
-    color: #000; }
-  .markdown-body h3 {
-    font-size: 18px; }
-  .markdown-body h4 {
-    font-size: 16px; }
-  .markdown-body h5 {
-    font-size: 14px; }
-  .markdown-body h6 {
-    color: #777;
-    font-size: 14px; }
-  .markdown-body p,
-  .markdown-body blockquote,
-  .markdown-body ul, .markdown-body ol, .markdown-body dl,
-  .markdown-body table,
-  .markdown-body pre {
-    margin: 15px 0; }
-  .markdown-body hr {
-    background: transparent url("https://a248.e.akamai.net/assets.github.com/assets/primer/markdown/dirty-shade-0e7d81b119cc9beae17b0c98093d121fa0050a74.png") repeat-x 0 0;
-    border: 0 none;
-    color: #ccc;
-    height: 4px;
-    padding: 0; }
-  .markdown-body > h2:first-child, .markdown-body > h1:first-child, .markdown-body > h1:first-child + h2, .markdown-body > h3:first-child, .markdown-body > h4:first-child, .markdown-body > h5:first-child, .markdown-body > h6:first-child {
-    margin-top: 0;
-    padding-top: 0; }
-  .markdown-body a:first-child h1, .markdown-body a:first-child h2, .markdown-body a:first-child h3, .markdown-body a:first-child h4, .markdown-body a:first-child h5, .markdown-body a:first-child h6 {
-    margin-top: 0;
-    padding-top: 0; }
-  .markdown-body h1 + p,
-  .markdown-body h2 + p,
-  .markdown-body h3 + p,
-  .markdown-body h4 + p,
-  .markdown-body h5 + p,
-  .markdown-body h6 + p {
-    margin-top: 0; }
-  .markdown-body li p.first {
-    display: inline-block; }
-  .markdown-body ul, .markdown-body ol {
-    padding-left: 30px; }
-    .markdown-body ul.no-list, .markdown-body ol.no-list {
-      list-style-type: none;
-      padding: 0; }
-    .markdown-body ul li > :first-child,
-    .markdown-body ul li ul:first-of-type, .markdown-body ol li > :first-child,
-    .markdown-body ol li ul:first-of-type {
-      margin-top: 0px; }
-  .markdown-body ul ul,
-  .markdown-body ul ol,
-  .markdown-body ol ol,
-  .markdown-body ol ul {
-    margin-bottom: 0; }
-  .markdown-body dl {
-    padding: 0; }
-  .markdown-body dl dt {
-    font-size: 14px;
-    font-weight: bold;
-    font-style: italic;
-    padding: 0;
-    margin: 15px 0 5px; }
-    .markdown-body dl dt:first-child {
-      padding: 0; }
-    .markdown-body dl dt > :first-child {
-      margin-top: 0px; }
-    .markdown-body dl dt > :last-child {
-      margin-bottom: 0px; }
-  .markdown-body dl dd {
-    margin: 0 0 15px;
-    padding: 0 15px; }
-    .markdown-body dl dd > :first-child {
-      margin-top: 0px; }
-    .markdown-body dl dd > :last-child {
-      margin-bottom: 0px; }
-  .markdown-body blockquote {
-    border-left: 4px solid #DDD;
-    padding: 0 15px;
-    color: #777; }
-    .markdown-body blockquote > :first-child {
-      margin-top: 0px; }
-    .markdown-body blockquote > :last-child {
-      margin-bottom: 0px; }
-  .markdown-body table th {
-    font-weight: bold; }
-  .markdown-body table th, .markdown-body table td {
-    border: 1px solid #ccc;
-    padding: 6px 13px; }
-  .markdown-body table tr {
-    border-top: 1px solid #ccc;
-    background-color: #fff; }
-    .markdown-body table tr:nth-child(2n) {
-      background-color: #f8f8f8; }
-  .markdown-body img {
-    max-width: 100%;
-    -moz-box-sizing: border-box;
-    box-sizing: border-box; }
-  .markdown-body span.frame {
-    display: block;
-    overflow: hidden; }
-    .markdown-body span.frame > span {
-      border: 1px solid #ddd;
-      display: block;
-      float: left;
-      overflow: hidden;
-      margin: 13px 0 0;
-      padding: 7px;
-      width: auto; }
-    .markdown-body span.frame span img {
-      display: block;
-      float: left; }
-    .markdown-body span.frame span span {
-      clear: both;
-      color: #333;
-      display: block;
-      padding: 5px 0 0; }
-  .markdown-body span.align-center {
-    display: block;
-    overflow: hidden;
-    clear: both; }
-    .markdown-body span.align-center > span {
-      display: block;
-      overflow: hidden;
-      margin: 13px auto 0;
-      text-align: center; }
-    .markdown-body span.align-center span img {
-      margin: 0 auto;
-      text-align: center; }
-  .markdown-body span.align-right {
-    display: block;
-    overflow: hidden;
-    clear: both; }
-    .markdown-body span.align-right > span {
-      display: block;
-      overflow: hidden;
-      margin: 13px 0 0;
-      text-align: right; }
-    .markdown-body span.align-right span img {
-      margin: 0;
-      text-align: right; }
-  .markdown-body span.float-left {
-    display: block;
-    margin-right: 13px;
-    overflow: hidden;
-    float: left; }
-    .markdown-body span.float-left span {
-      margin: 13px 0 0; }
-  .markdown-body span.float-right {
-    display: block;
-    margin-left: 13px;
-    overflow: hidden;
-    float: right; }
-    .markdown-body span.float-right > span {
-      display: block;
-      overflow: hidden;
-      margin: 13px auto 0;
-      text-align: right; }
-  .markdown-body code, .markdown-body tt {
-    margin: 0 2px;
-    padding: 0px 5px;
-    border: 1px solid #eaeaea;
-    background-color: #f8f8f8;
-    border-radius: 3px; }
-  .markdown-body code {
-    white-space: nowrap; }
-  .markdown-body pre > code {
-    margin: 0;
-    padding: 0;
-    white-space: pre;
-    border: none;
-    background: transparent; }
-  .markdown-body .highlight pre, .markdown-body pre {
-    background-color: #f8f8f8;
-    border: 1px solid #ccc;
-    font-size: 13px;
-    line-height: 19px;
-    overflow: auto;
-    padding: 6px 10px;
-    border-radius: 3px; }
-  .markdown-body pre code, .markdown-body pre tt {
-    margin: 0;
-    padding: 0;
-    background-color: transparent;
-    border: none; }
-
-/* this code was copied from https://github.com/assets/stylesheets/primer/components/pygments.css */
-/* the .markdown-body class was then added to all rules */
-.markdown-body .highlight {
-  background: #ffffff; }
-  .markdown-body .highlight .c {
-    color: #999988;
-    font-style: italic; }
-  .markdown-body .highlight .err {
-    color: #a61717;
-    background-color: #e3d2d2; }
-  .markdown-body .highlight .k {
-    font-weight: bold; }
-  .markdown-body .highlight .o {
-    font-weight: bold; }
-  .markdown-body .highlight .cm {
-    color: #999988;
-    font-style: italic; }
-  .markdown-body .highlight .cp {
-    color: #999999;
-    font-weight: bold; }
-  .markdown-body .highlight .c1 {
-    color: #999988;
-    font-style: italic; }
-  .markdown-body .highlight .cs {
-    color: #999999;
-    font-weight: bold;
-    font-style: italic; }
-  .markdown-body .highlight .gd {
-    color: #000000;
-    background-color: #ffdddd; }
-  .markdown-body .highlight .gd .x {
-    color: #000000;
-    background-color: #ffaaaa; }
-  .markdown-body .highlight .ge {
-    font-style: italic; }
-  .markdown-body .highlight .gr {
-    color: #aa0000; }
-  .markdown-body .highlight .gh {
-    color: #999999; }
-  .markdown-body .highlight .gi {
-    color: #000000;
-    background-color: #ddffdd; }
-  .markdown-body .highlight .gi .x {
-    color: #000000;
-    background-color: #aaffaa; }
-  .markdown-body .highlight .go {
-    color: #888888; }
-  .markdown-body .highlight .gp {
-    color: #555555; }
-  .markdown-body .highlight .gs {
-    font-weight: bold; }
-  .markdown-body .highlight .gu {
-    color: #800080;
-    font-weight: bold; }
-  .markdown-body .highlight .gt {
-    color: #aa0000; }
-  .markdown-body .highlight .kc {
-    font-weight: bold; }
-  .markdown-body .highlight .kd {
-    font-weight: bold; }
-  .markdown-body .highlight .kn {
-    font-weight: bold; }
-  .markdown-body .highlight .kp {
-    font-weight: bold; }
-  .markdown-body .highlight .kr {
-    font-weight: bold; }
-  .markdown-body .highlight .kt {
-    color: #445588;
-    font-weight: bold; }
-  .markdown-body .highlight .m {
-    color: #009999; }
-  .markdown-body .highlight .s {
-    color: #d14; }
-  .markdown-body .highlight .na {
-    color: #008080; }
-  .markdown-body .highlight .nb {
-    color: #0086B3; }
-  .markdown-body .highlight .nc {
-    color: #445588;
-    font-weight: bold; }
-  .markdown-body .highlight .no {
-    color: #008080; }
-  .markdown-body .highlight .ni {
-    color: #800080; }
-  .markdown-body .highlight .ne {
-    color: #990000;
-    font-weight: bold; }
-  .markdown-body .highlight .nf {
-    color: #990000;
-    font-weight: bold; }
-  .markdown-body .highlight .nn {
-    color: #555555; }
-  .markdown-body .highlight .nt {
-    color: #000080; }
-  .markdown-body .highlight .nv {
-    color: #008080; }
-  .markdown-body .highlight .ow {
-    font-weight: bold; }
-  .markdown-body .highlight .w {
-    color: #bbbbbb; }
-  .markdown-body .highlight .mf {
-    color: #009999; }
-  .markdown-body .highlight .mh {
-    color: #009999; }
-  .markdown-body .highlight .mi {
-    color: #009999; }
-  .markdown-body .highlight .mo {
-    color: #009999; }
-  .markdown-body .highlight .sb {
-    color: #d14; }
-  .markdown-body .highlight .sc {
-    color: #d14; }
-  .markdown-body .highlight .sd {
-    color: #d14; }
-  .markdown-body .highlight .s2 {
-    color: #d14; }
-  .markdown-body .highlight .se {
-    color: #d14; }
-  .markdown-body .highlight .sh {
-    color: #d14; }
-  .markdown-body .highlight .si {
-    color: #d14; }
-  .markdown-body .highlight .sx {
-    color: #d14; }
-  .markdown-body .highlight .sr {
-    color: #009926; }
-  .markdown-body .highlight .s1 {
-    color: #d14; }
-  .markdown-body .highlight .ss {
-    color: #990073; }
-  .markdown-body .highlight .bp {
-    color: #999999; }
-  .markdown-body .highlight .vc {
-    color: #008080; }
-  .markdown-body .highlight .vg {
-    color: #008080; }
-  .markdown-body .highlight .vi {
-    color: #008080; }
-  .markdown-body .highlight .il {
-    color: #009999; }
-  .markdown-body .highlight .gc {
-    color: #999;
-    background-color: #EAF2F5; }
-
-.type-csharp .markdown-body .highlight .k {
-  color: #0000FF; }
-.type-csharp .markdown-body .highlight .kt {
-  color: #0000FF; }
-.type-csharp .markdown-body .highlight .nf {
-  color: #000000;
-  font-weight: normal; }
-.type-csharp .markdown-body .highlight .nc {
-  color: #2B91AF; }
-.type-csharp .markdown-body .highlight .nn {
-  color: #000000; }
-.type-csharp .markdown-body .highlight .s {
-  color: #A31515; }
-.type-csharp .markdown-body .highlight .sc {
-  color: #A31515; }
diff --git a/src/packages/markdown-preview/stylesheets/markdown-preview.less b/src/packages/markdown-preview/stylesheets/markdown-preview.less
new file mode 100644
index 000000000..db4a68195
--- /dev/null
+++ b/src/packages/markdown-preview/stylesheets/markdown-preview.less
@@ -0,0 +1,385 @@
+.markdown-preview {
+  font-family: "Helvetica Neue", Helvetica, sans-serif;
+  font-size: 14px;
+  line-height: 1.6;
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0px;
+  left: 0px;
+  background-color: #fff;
+  overflow: auto;
+  z-index: 3;
+  box-sizing: border-box;
+  padding: 20px;
+}
+
+// This is styling for generic markdownized text. Anything you put in a
+// container with .markdown-body on it should render generally well. It also
+// includes some GitHub Flavored Markdown specific styling (like @mentions)
+.markdown-body {
+
+  font-size: 14px;
+  line-height: 1.6;
+  overflow: hidden;
+
+  & > *:first-child {
+    margin-top: 0 !important;
+  }
+
+  & > *:last-child {
+    margin-bottom: 0 !important;
+  }
+
+  // Link Colors
+  a.absent {
+    color: #c00;
+  }
+
+  a.anchor {
+    display: block;
+    padding-left: 30px;
+    margin-left: -30px;
+    cursor: pointer;
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+  }
+
+  // Headings
+  h1, h2, h3, h4, h5, h6 {
+    margin: 20px 0 10px;
+    padding: 0;
+    font-weight: bold;
+    -webkit-font-smoothing: antialiased;
+    cursor: text;
+    position: relative;
+
+    .mini-icon-link {
+      display: none;
+      color: #000;
+    }
+
+    &:hover a.anchor {
+      text-decoration: none;
+      line-height: 1;
+      padding-left: 0;
+      margin-left: -22px;
+      top: 15%;
+
+      .mini-icon-link {
+        display: inline-block;
+      }
+    }
+    tt, code {
+      font-size: inherit;
+    }
+  }
+
+  h1 {
+    font-size: 28px;
+    color: #000;
+  }
+
+  h2 {
+    font-size: 24px;
+    border-bottom: 1px solid #ccc;
+    color: #000;
+  }
+
+  h3 {
+    font-size: 18px;
+  }
+
+  h4 {
+    font-size: 16px;
+  }
+
+  h5 {
+    font-size: 14px;
+  }
+
+  h6 {
+    color: #777;
+    font-size: 14px;
+  }
+
+  p,
+  blockquote,
+  ul, ol, dl,
+  table,
+  pre {
+    margin: 15px 0;
+  }
+
+  hr {
+    background: transparent;
+    border: 0 none;
+    color: #ccc;
+    height: 4px;
+    padding: 0;
+  }
+
+  & > h2:first-child,
+  & > h1:first-child,
+  & > h1:first-child + h2,
+  & > h3:first-child,
+  & > h4:first-child,
+  & > h5:first-child,
+  & > h6:first-child {
+    margin-top: 0;
+    padding-top: 0;
+  }
+
+  // fixes margin on shit like:
+  // <a name='the-heading'>
+  // <h1>The Heading</h1></a>
+  a:first-child {
+    h1, h2, h3, h4, h5, h6 {
+      margin-top: 0;
+      padding-top: 0;
+    }
+  }
+
+  h1 + p,
+  h2 + p,
+  h3 + p,
+  h4 + p,
+  h5 + p,
+  h6 + p {
+    margin-top: 0;
+  }
+
+  // ReST first graf in nested list
+  li p.first {
+    display: inline-block;
+  }
+
+  // Lists, Blockquotes & Such
+  ul, ol {
+    padding-left: 30px;
+
+    &.no-list {
+      list-style-type: none;
+      padding: 0;
+    }
+
+    li > :first-child,
+    li ul:first-of-type {
+      margin-top: 0px;
+    }
+  }
+
+  ul ul,
+  ul ol,
+  ol ol,
+  ol ul {
+    margin-bottom: 0;
+  }
+
+  dl {
+    padding: 0;
+  }
+
+  dl dt {
+    font-size: 14px;
+    font-weight: bold;
+    font-style: italic;
+    padding: 0;
+    margin: 15px 0 5px;
+
+    &:first-child {
+      padding: 0;
+    }
+    & > :first-child {
+      margin-top: 0px;
+    }
+
+    & > :last-child {
+      margin-bottom: 0px;
+    }
+  }
+
+  dl dd {
+    margin: 0 0 15px;
+    padding: 0 15px;
+    & > :first-child {
+      margin-top: 0px;
+    }
+
+    & > :last-child {
+      margin-bottom: 0px;
+    }
+  }
+
+  blockquote {
+    border-left: 4px solid #DDD;
+    padding: 0 15px;
+    color: #777;
+
+    & > :first-child {
+      margin-top: 0px;
+    }
+
+    & > :last-child {
+      margin-bottom: 0px;
+    }
+  }
+
+  // Tables
+  table {
+
+    th {
+      font-weight: bold;
+    }
+
+    th, td {
+      border: 1px solid #ccc;
+      padding: 6px 13px;
+    }
+
+    tr {
+      border-top: 1px solid #ccc;
+      background-color: #fff;
+
+      &:nth-child(2n) {
+        background-color: #f8f8f8;
+      }
+    }
+  }
+
+  // Images & Stuff
+  img {
+    max-width: 100%;
+    @include box-sizing();
+  }
+
+  // Gollum Image Tags
+
+  // Framed
+  span.frame {
+    display: block;
+    overflow: hidden;
+
+    & > span {
+      border: 1px solid #ddd;
+      display: block;
+      float: left;
+      overflow: hidden;
+      margin: 13px 0 0;
+      padding: 7px;
+      width: auto;
+    }
+
+    span img {
+      display: block;
+      float: left;
+    }
+
+    span span {
+      clear: both;
+      color: #333;
+      display: block;
+      padding: 5px 0 0;
+    }
+  }
+
+  span.align-center {
+    display: block;
+    overflow: hidden;
+    clear: both;
+
+    & > span {
+      display: block;
+      overflow: hidden;
+      margin: 13px auto 0;
+      text-align: center;
+    }
+
+    span img {
+      margin: 0 auto;
+      text-align: center;
+    }
+  }
+
+  span.align-right {
+    display: block;
+    overflow: hidden;
+    clear: both;
+
+    & > span {
+      display: block;
+      overflow: hidden;
+      margin: 13px 0 0;
+      text-align: right;
+    }
+
+    span img {
+      margin: 0;
+      text-align: right;
+    }
+  }
+
+  span.float-left {
+    display: block;
+    margin-right: 13px;
+    overflow: hidden;
+    float: left;
+
+    span {
+      margin: 13px 0 0;
+    }
+  }
+
+  span.float-right {
+    display: block;
+    margin-left: 13px;
+    overflow: hidden;
+    float: right;
+
+    & > span {
+      display: block;
+      overflow: hidden;
+      margin: 13px auto 0;
+      text-align: right;
+    }
+  }
+
+  // Inline code snippets
+  code, tt {
+    margin: 0 2px;
+    padding: 0px 5px;
+    border: 1px solid #eaeaea;
+    background-color: #f8f8f8;
+    border-radius:3px;
+  }
+
+  code { white-space: nowrap; }
+
+  // Code tags within code blocks (<pre>s)
+  pre > code {
+    margin: 0;
+    padding: 0;
+    white-space: pre;
+    border: none;
+    background: transparent;
+  }
+
+  .highlight pre, pre {
+    background-color: #f8f8f8;
+    border: 1px solid #ccc;
+    font-size: 13px;
+    line-height: 19px;
+    overflow: auto;
+    padding: 6px 10px;
+    border-radius:3px;
+  }
+
+  pre code, pre tt {
+    margin: 0;
+    padding: 0;
+    background-color: transparent;
+    border: none;
+  }
+}
diff --git a/src/packages/markdown-preview/stylesheets/pygments.less b/src/packages/markdown-preview/stylesheets/pygments.less
new file mode 100644
index 000000000..f3faab07a
--- /dev/null
+++ b/src/packages/markdown-preview/stylesheets/pygments.less
@@ -0,0 +1,201 @@
+.highlight  {
+  background: #ffffff;
+
+  // Comment
+  .c { color: #999988; font-style: italic }
+
+  // Error
+  .err { color: #a61717; background-color: #e3d2d2 }
+
+  // Keyword
+  .k { font-weight: bold }
+
+  // Operator
+  .o { font-weight: bold }
+
+  // Comment.Multiline
+  .cm { color: #999988; font-style: italic }
+
+  // Comment.Preproc
+  .cp { color: #999999; font-weight: bold }
+
+  // Comment.Single
+  .c1 { color: #999988; font-style: italic }
+
+  // Comment.Special
+  .cs { color: #999999; font-weight: bold; font-style: italic }
+
+  // Generic.Deleted
+  .gd { color: #000000; background-color: #ffdddd }
+
+  // Generic.Deleted.Specific
+  .gd .x { color: #000000; background-color: #ffaaaa }
+
+  // Generic.Emph
+  .ge { font-style: italic }
+
+  // Generic.Error
+  .gr { color: #aa0000 }
+
+  // Generic.Heading
+  .gh { color: #999999 }
+
+  // Generic.Inserted
+  .gi { color: #000000; background-color: #ddffdd }
+
+  // Generic.Inserted.Specific
+  .gi .x { color: #000000; background-color: #aaffaa }
+
+  // Generic.Output
+  .go { color: #888888 }
+
+  // Generic.Prompt
+  .gp { color: #555555 }
+
+  // Generic.Strong
+  .gs { font-weight: bold }
+
+  // Generic.Subheading
+  .gu { color: #800080; font-weight: bold; }
+
+  // Generic.Traceback
+  .gt { color: #aa0000 }
+
+  // Keyword.Constant
+  .kc { font-weight: bold }
+
+  // Keyword.Declaration
+  .kd { font-weight: bold }
+
+  // Keyword.Namespace
+  .kn { font-weight: bold }
+
+  // Keyword.Pseudo
+  .kp { font-weight: bold }
+
+  // Keyword.Reserved
+  .kr { font-weight: bold }
+
+  // Keyword.Type
+  .kt { color: #445588; font-weight: bold }
+
+  // Literal.Number
+  .m { color: #009999 }
+
+  // Literal.String
+  .s { color: #d14 }
+
+  // Name
+  .n { color: #333333 }
+
+  // Name.Attribute
+  .na { color: #008080 }
+
+  // Name.Builtin
+  .nb { color: #0086B3 }
+
+  // Name.Class
+  .nc { color: #445588; font-weight: bold }
+
+  // Name.Constant
+  .no { color: #008080 }
+
+  // Name.Entity
+  .ni { color: #800080 }
+
+  // Name.Exception
+  .ne { color: #990000; font-weight: bold }
+
+  // Name.Function
+  .nf { color: #990000; font-weight: bold }
+
+  // Name.Namespace
+  .nn { color: #555555 }
+
+  // Name.Tag
+  .nt { color: #000080 }
+
+  // Name.Variable
+  .nv { color: #008080 }
+
+  // Operator.Word
+  .ow { font-weight: bold }
+
+  // Text.Whitespace
+  .w { color: #bbbbbb }
+
+  // Literal.Number.Float
+  .mf { color: #009999 }
+
+  // Literal.Number.Hex
+  .mh { color: #009999 }
+
+  // Literal.Number.Integer
+  .mi { color: #009999 }
+
+  // Literal.Number.Oct
+  .mo { color: #009999 }
+
+  // Literal.String.Backtick
+  .sb { color: #d14 }
+
+  // Literal.String.Char
+  .sc { color: #d14 }
+
+  // Literal.String.Doc
+  .sd { color: #d14 }
+
+  // Literal.String.Double
+  .s2 { color: #d14 }
+
+  // Literal.String.Escape
+  .se { color: #d14 }
+
+  // Literal.String.Heredoc
+  .sh { color: #d14 }
+
+  // Literal.String.Interpol
+  .si { color: #d14 }
+
+  // Literal.String.Other
+  .sx { color: #d14 }
+
+  // Literal.String.Regex
+  .sr { color: #009926 }
+
+  // Literal.String.Single
+  .s1 { color: #d14 }
+
+  // Literal.String.Symbol
+  .ss { color: #990073 }
+
+  // Name.Builtin.Pseudo
+  .bp { color: #999999 }
+
+  // Name.Variable.Class
+  .vc { color: #008080 }
+
+  // Name.Variable.Global
+  .vg { color: #008080 }
+
+  // Name.Variable.Instance
+  .vi { color: #008080 }
+
+  // Literal.Number.Integer.Long
+  .il { color: #009999 }
+
+  .gc {
+    color: #999;
+    background-color: #EAF2F5;
+  }
+}
+
+.type-csharp .highlight {
+  .k { color: #0000FF }
+  .kt { color: #0000FF }
+  .nf { color: #000000; font-weight: normal }
+  .nc { color: #2B91AF }
+  .nn { color: #000000 }
+  .s { color: #A31515 }
+  .sc { color: #A31515 }
+}