From 82fdb2a8bc08b1672115d550c25a76cd921afa75 Mon Sep 17 00:00:00 2001
From: Tom Moor <tom.moor@gmail.com>
Date: Sat, 21 Oct 2017 20:30:28 -0700
Subject: [PATCH 1/3] Improve code highlighting

---
 frontend/components/Editor/components/Code.js |   8 +-
 frontend/index.js                             |   3 +-
 frontend/styles/hljs-github-gist.css          |  71 -----------
 frontend/styles/prism-tomorrow.css            | 120 ------------------
 frontend/styles/prism.css                     | 118 +++++++++++++++++
 5 files changed, 124 insertions(+), 196 deletions(-)
 delete mode 100644 frontend/styles/hljs-github-gist.css
 delete mode 100644 frontend/styles/prism-tomorrow.css
 create mode 100644 frontend/styles/prism.css

diff --git a/frontend/components/Editor/components/Code.js b/frontend/components/Editor/components/Code.js
index d6e2d5385..f370392d0 100644
--- a/frontend/components/Editor/components/Code.js
+++ b/frontend/components/Editor/components/Code.js
@@ -6,11 +6,13 @@ import { color } from 'styles/constants';
 import type { Props } from '../types';
 
 export default function Code({ children, node, readOnly, attributes }: Props) {
+  const language = node.data.get('language') || 'javascript';
+
   return (
     <Container>
       {readOnly && <CopyButton text={node.text} />}
-      <Pre>
-        <code {...attributes}>
+      <Pre className={`language-${language}`}>
+        <code {...attributes} className={`language-${language}`}>
           {children}
         </code>
       </Pre>
@@ -20,7 +22,7 @@ export default function Code({ children, node, readOnly, attributes }: Props) {
 
 const Pre = styled.pre`
   padding: .5em 1em;
-  background: ${color.smoke};
+  background: ${color.smokeLight};
   border-radius: 4px;
   border: 1px solid ${color.smokeDark};
 
diff --git a/frontend/index.js b/frontend/index.js
index 12e49fe7d..3c5d593ae 100644
--- a/frontend/index.js
+++ b/frontend/index.js
@@ -19,8 +19,7 @@ import 'normalize.css/normalize.css';
 import 'styles/base.css';
 import 'styles/fonts.css';
 import 'styles/transitions.css';
-import 'styles/prism-tomorrow.css';
-import 'styles/hljs-github-gist.css';
+import 'styles/prism.css';
 
 import Home from 'scenes/Home';
 import Dashboard from 'scenes/Dashboard';
diff --git a/frontend/styles/hljs-github-gist.css b/frontend/styles/hljs-github-gist.css
deleted file mode 100644
index 488daf1b8..000000000
--- a/frontend/styles/hljs-github-gist.css
+++ /dev/null
@@ -1,71 +0,0 @@
-/**
-  * GitHub Gist Theme
-  * Author : Louis Barranqueiro - https://github.com/LouisBarranqueiro
-  */
-
-.hljs {
-  display: block;
-  background: white;
-  padding: 0.5em;
-  color: #333333;
-  overflow-x: auto;
-}
-
-.hljs-comment,
-.hljs-meta {
-  color: #969896;
-}
-
-.hljs-string,
-.hljs-variable,
-.hljs-template-variable,
-.hljs-strong,
-.hljs-emphasis,
-.hljs-quote {
-  color: #df5000;
-}
-
-.hljs-keyword,
-.hljs-selector-tag,
-.hljs-type {
-  color: #a71d5d;
-}
-
-.hljs-literal,
-.hljs-symbol,
-.hljs-bullet,
-.hljs-attribute {
-  color: #0086b3;
-}
-
-.hljs-section,
-.hljs-name {
-  color: #63a35c;
-}
-
-.hljs-tag {
-  color: #333333;
-}
-
-.hljs-title,
-.hljs-attr,
-.hljs-selector-id,
-.hljs-selector-class,
-.hljs-selector-attr,
-.hljs-selector-pseudo {
-  color: #795da3;
-}
-
-.hljs-addition {
-  color: #55a532;
-  background-color: #eaffea;
-}
-
-.hljs-deletion {
-  color: #bd2c00;
-  background-color: #ffecec;
-}
-
-.hljs-link {
-  text-decoration: underline;
-}
diff --git a/frontend/styles/prism-tomorrow.css b/frontend/styles/prism-tomorrow.css
deleted file mode 100644
index 5a67be559..000000000
--- a/frontend/styles/prism-tomorrow.css
+++ /dev/null
@@ -1,120 +0,0 @@
-/**
- * prism.js tomorrow night eighties for JavaScript, CoffeeScript, CSS and HTML
- * Based on https://github.com/chriskempson/tomorrow-theme
- * @author Rose Pritchard
- */
-
-code[class*='language-'],
-pre[class*='language-'] {
-  color: #ccc;
-  background: none;
-  font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
-  text-align: left;
-  white-space: pre;
-  word-spacing: normal;
-  word-break: normal;
-  word-wrap: normal;
-  line-height: 1.5;
-
-  -moz-tab-size: 4;
-  -o-tab-size: 4;
-  tab-size: 4;
-
-  -webkit-hyphens: none;
-  -moz-hyphens: none;
-  -ms-hyphens: none;
-  hyphens: none;
-}
-
-/* Code blocks */
-pre[class*='language-'] {
-  padding: 1em;
-  margin: 0.5em 0;
-  overflow: auto;
-}
-
-:not(pre) > code[class*='language-'],
-pre[class*='language-'] {
-  background: #2d2d2d;
-}
-
-/* Inline code */
-:not(pre) > code[class*='language-'] {
-  padding: 0.1em;
-  border-radius: 0.3em;
-  white-space: normal;
-}
-
-.token.comment,
-.token.block-comment,
-.token.prolog,
-.token.doctype,
-.token.cdata {
-  color: #999;
-}
-
-.token.punctuation {
-  color: #ccc;
-}
-
-.token.tag,
-.token.attr-name,
-.token.namespace,
-.token.deleted {
-  color: #e2777a;
-}
-
-.token.function-name {
-  color: #6196cc;
-}
-
-.token.boolean,
-.token.number,
-.token.function {
-  color: #f08d49;
-}
-
-.token.property,
-.token.class-name,
-.token.constant,
-.token.symbol {
-  color: #f8c555;
-}
-
-.token.selector,
-.token.important,
-.token.atrule,
-.token.keyword,
-.token.builtin {
-  color: #cc99cd;
-}
-
-.token.string,
-.token.char,
-.token.attr-value,
-.token.regex,
-.token.variable {
-  color: #7ec699;
-}
-
-.token.operator,
-.token.entity,
-.token.url {
-  color: #67cdcc;
-}
-
-.token.important,
-.token.bold {
-  font-weight: bold;
-}
-.token.italic {
-  font-style: italic;
-}
-
-.token.entity {
-  cursor: help;
-}
-
-.token.inserted {
-  color: green;
-}
diff --git a/frontend/styles/prism.css b/frontend/styles/prism.css
new file mode 100644
index 000000000..3655ef339
--- /dev/null
+++ b/frontend/styles/prism.css
@@ -0,0 +1,118 @@
+/**
+ * GHColors theme by Avi Aryan (http://aviaryan.in)
+ * Inspired by Github syntax coloring
+ */
+
+code[class*="language-"],
+pre[class*="language-"] {
+    color: #393A34;
+    font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
+    direction: ltr;
+    text-align: left;
+    white-space: pre;
+    word-spacing: normal;
+    word-break: normal;
+    font-size: 13px;
+    line-height: 1.4em;
+
+    -moz-tab-size: 4;
+    -o-tab-size: 4;
+    tab-size: 4;
+
+    -webkit-hyphens: none;
+    -moz-hyphens: none;
+    -ms-hyphens: none;
+    hyphens: none;
+}
+
+pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection,
+code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection {
+    background: #b3d4fc;
+}
+
+pre[class*="language-"]::selection, pre[class*="language-"] ::selection,
+code[class*="language-"]::selection, code[class*="language-"] ::selection {
+    background: #b3d4fc;
+}
+
+/* Code blocks */
+pre[class*="language-"] {
+    padding: 1em;
+    margin: .5em 0;
+    overflow: auto;
+    border: 1px solid #dddddd;
+}
+
+:not(pre) > code[class*="language-"],
+pre[class*="language-"] {
+}
+
+/* Inline code */
+:not(pre) > code[class*="language-"] {
+    padding: .2em;
+    padding-top: 1px; padding-bottom: 1px;
+    background: #f8f8f8;
+    border: 1px solid #dddddd;
+}
+
+.token.comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
+    color: #999988; font-style: italic;
+}
+
+.token.namespace {
+    opacity: .7;
+}
+
+.token.string,
+.token.attr-value {
+    color: #e3116c;
+}
+.token.punctuation,
+.token.operator {
+    color: #393A34; /* no highlight */
+}
+
+.token.entity,
+.token.url,
+.token.symbol,
+.token.number,
+.token.boolean,
+.token.variable,
+.token.constant,
+.token.property,
+.token.regex,
+.token.inserted {
+    color: #36acaa;
+}
+
+.token.atrule,
+.token.keyword,
+.token.attr-name,
+.language-autohotkey .token.selector {
+    color: #00a4db;
+}
+
+.token.function,
+.token.deleted,
+.language-autohotkey .token.tag {
+    color: #9a050f;
+}
+
+.token.tag,
+.token.selector,
+.language-autohotkey .token.keyword {
+    color: #00009f;
+}
+
+.token.important,
+.token.function,
+.token.bold {
+    font-weight: bold;
+}
+
+.token.italic {
+    font-style: italic;
+}

From 0129493ca168b261183ea703fe1b5f0fc99fec67 Mon Sep 17 00:00:00 2001
From: Tom Moor <tom.moor@gmail.com>
Date: Mon, 23 Oct 2017 07:35:45 -0700
Subject: [PATCH 2/3] Change theme

---
 frontend/styles/prism.css | 195 ++++++++++++++++++++++++--------------
 1 file changed, 125 insertions(+), 70 deletions(-)

diff --git a/frontend/styles/prism.css b/frontend/styles/prism.css
index 3655ef339..c7e3f21ff 100644
--- a/frontend/styles/prism.css
+++ b/frontend/styles/prism.css
@@ -1,118 +1,173 @@
-/**
- * GHColors theme by Avi Aryan (http://aviaryan.in)
- * Inspired by Github syntax coloring
- */
+/*
 
+Name:       Base16 Atelier Sulphurpool Light
+Author:     Bram de Haan (http://atelierbram.github.io/syntax-highlighting/atelier-schemes/sulphurpool)
+
+Prism template by Bram de Haan (http://atelierbram.github.io/syntax-highlighting/prism/)
+Original Base16 color scheme by Chris Kempson (https://github.com/chriskempson/base16)
+
+*/
 code[class*="language-"],
 pre[class*="language-"] {
-    color: #393A34;
-    font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
-    direction: ltr;
-    text-align: left;
-    white-space: pre;
-    word-spacing: normal;
-    word-break: normal;
-    font-size: 13px;
-    line-height: 1.4em;
-
-    -moz-tab-size: 4;
-    -o-tab-size: 4;
-    tab-size: 4;
-
-    -webkit-hyphens: none;
-    -moz-hyphens: none;
-    -ms-hyphens: none;
-    hyphens: none;
+  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
+  font-size: 13px;
+  line-height: 1.375;
+  direction: ltr;
+  font-weight: 600;
+  text-align: left;
+  white-space: pre;
+  word-spacing: normal;
+  word-break: normal;
+  -moz-tab-size: 4;
+  -o-tab-size: 4;
+  tab-size: 4;
+  -webkit-hyphens: none;
+  -moz-hyphens: none;
+  -ms-hyphens: none;
+  hyphens: none;
+  background: #f5f7ff;
+  color: #5e6687;
 }
 
 pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection,
 code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection {
-    background: #b3d4fc;
+  text-shadow: none;
+  background: #dfe2f1;
 }
 
 pre[class*="language-"]::selection, pre[class*="language-"] ::selection,
 code[class*="language-"]::selection, code[class*="language-"] ::selection {
-    background: #b3d4fc;
+  text-shadow: none;
+  background: #dfe2f1;
 }
 
 /* Code blocks */
 pre[class*="language-"] {
-    padding: 1em;
-    margin: .5em 0;
-    overflow: auto;
-    border: 1px solid #dddddd;
-}
-
-:not(pre) > code[class*="language-"],
-pre[class*="language-"] {
+  padding: 1em;
+  margin: .5em 0;
+  overflow: auto;
 }
 
 /* Inline code */
 :not(pre) > code[class*="language-"] {
-    padding: .2em;
-    padding-top: 1px; padding-bottom: 1px;
-    background: #f8f8f8;
-    border: 1px solid #dddddd;
+  padding: .1em;
+  border-radius: .3em;
 }
 
 .token.comment,
 .token.prolog,
 .token.doctype,
 .token.cdata {
-    color: #999988; font-style: italic;
+  color: #898ea4;
+}
+
+.token.punctuation {
+  color: #5e6687;
 }
 
 .token.namespace {
-    opacity: .7;
+  opacity: .7;
 }
 
-.token.string,
-.token.attr-value {
-    color: #e3116c;
+.token.operator,
+.token.boolean,
+.token.number {
+  color: #c76b29;
 }
-.token.punctuation,
-.token.operator {
-    color: #393A34; /* no highlight */
+
+.token.property {
+  color: #c08b30;
+}
+
+.token.tag {
+  color: #3d8fd1;
+}
+
+.token.string {
+  color: #22a2c9;
+}
+
+.token.selector {
+  color: #6679cc;
+}
+
+.token.attr-name {
+  color: #c76b29;
 }
 
 .token.entity,
 .token.url,
-.token.symbol,
-.token.number,
-.token.boolean,
-.token.variable,
-.token.constant,
-.token.property,
-.token.regex,
-.token.inserted {
-    color: #36acaa;
+.language-css .token.string,
+.style .token.string {
+  color: #22a2c9;
 }
 
-.token.atrule,
+.token.attr-value,
 .token.keyword,
-.token.attr-name,
-.language-autohotkey .token.selector {
-    color: #00a4db;
+.token.control,
+.token.directive,
+.token.unit {
+  color: #ac9739;
 }
 
-.token.function,
-.token.deleted,
-.language-autohotkey .token.tag {
-    color: #9a050f;
+.token.statement,
+.token.regex,
+.token.atrule {
+  color: #22a2c9;
 }
 
-.token.tag,
-.token.selector,
-.language-autohotkey .token.keyword {
-    color: #00009f;
+.token.placeholder,
+.token.variable {
+  color: #3d8fd1;
 }
 
-.token.important,
-.token.function,
-.token.bold {
-    font-weight: bold;
+.token.deleted {
+  text-decoration: line-through;
+}
+
+.token.inserted {
+  border-bottom: 1px dotted #202746;
+  text-decoration: none;
 }
 
 .token.italic {
-    font-style: italic;
+  font-style: italic;
+}
+
+.token.important,
+.token.bold {
+  font-weight: bold;
+}
+
+.token.important {
+  color: #c94922;
+}
+
+.token.entity {
+  cursor: help;
+}
+
+pre > code.highlight {
+  outline: 0.4em solid #c94922;
+  outline-offset: .4em;
+}
+
+/* overrides color-values for the Line Numbers plugin
+ * http://prismjs.com/plugins/line-numbers/
+ */
+.line-numbers .line-numbers-rows {
+  border-right-color: #dfe2f1;
+}
+
+.line-numbers-rows > span:before {
+  color: #979db4;
+}
+
+/* overrides color-values for the Line Highlight plugin
+ * http://prismjs.com/plugins/line-highlight/
+ */
+.line-highlight {
+  background: rgba(107, 115, 148, 0.2);
+  background: -webkit-linear-gradient(left, rgba(107, 115, 148, 0.2) 70%, rgba(107, 115, 148, 0));
+  background: linear-gradient(to right, rgba(107, 115, 148, 0.2) 70%, rgba(107, 115, 148, 0));
 }

From 4dfe826ed73d7ce5545a86ccc694012aaede0219 Mon Sep 17 00:00:00 2001
From: Tom Moor <tom.moor@gmail.com>
Date: Tue, 24 Oct 2017 07:56:36 -0700
Subject: [PATCH 3/3] Fixed font weight, super githubby style

---
 frontend/styles/prism.css | 54 ++++++++-------------------------------
 1 file changed, 11 insertions(+), 43 deletions(-)

diff --git a/frontend/styles/prism.css b/frontend/styles/prism.css
index c7e3f21ff..6a7ff2455 100644
--- a/frontend/styles/prism.css
+++ b/frontend/styles/prism.css
@@ -1,19 +1,16 @@
 /*
 
-Name:       Base16 Atelier Sulphurpool Light
-Author:     Bram de Haan (http://atelierbram.github.io/syntax-highlighting/atelier-schemes/sulphurpool)
-
-Prism template by Bram de Haan (http://atelierbram.github.io/syntax-highlighting/prism/)
+Based on Prism template by Bram de Haan (http://atelierbram.github.io/syntax-highlighting/prism/)
 Original Base16 color scheme by Chris Kempson (https://github.com/chriskempson/base16)
 
 */
 code[class*="language-"],
 pre[class*="language-"] {
+  -webkit-font-smoothing: initial;
   font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
   font-size: 13px;
   line-height: 1.375;
   direction: ltr;
-  font-weight: 600;
   text-align: left;
   white-space: pre;
   word-spacing: normal;
@@ -25,20 +22,7 @@ pre[class*="language-"] {
   -moz-hyphens: none;
   -ms-hyphens: none;
   hyphens: none;
-  background: #f5f7ff;
-  color: #5e6687;
-}
-
-pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection,
-code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection {
-  text-shadow: none;
-  background: #dfe2f1;
-}
-
-pre[class*="language-"]::selection, pre[class*="language-"] ::selection,
-code[class*="language-"]::selection, code[class*="language-"] ::selection {
-  text-shadow: none;
-  background: #dfe2f1;
+  color: #24292e;
 }
 
 /* Code blocks */
@@ -58,7 +42,7 @@ pre[class*="language-"] {
 .token.prolog,
 .token.doctype,
 .token.cdata {
-  color: #898ea4;
+  color: #6a737d;
 }
 
 .token.punctuation {
@@ -72,7 +56,7 @@ pre[class*="language-"] {
 .token.operator,
 .token.boolean,
 .token.number {
-  color: #c76b29;
+  color: #d73a49;
 }
 
 .token.property {
@@ -84,7 +68,7 @@ pre[class*="language-"] {
 }
 
 .token.string {
-  color: #22a2c9;
+  color: #032f62;
 }
 
 .token.selector {
@@ -107,7 +91,11 @@ pre[class*="language-"] {
 .token.control,
 .token.directive,
 .token.unit {
-  color: #ac9739;
+  color: #d73a49;
+}
+
+.token.function {
+  color: #6f42c1;
 }
 
 .token.statement,
@@ -151,23 +139,3 @@ pre > code.highlight {
   outline: 0.4em solid #c94922;
   outline-offset: .4em;
 }
-
-/* overrides color-values for the Line Numbers plugin
- * http://prismjs.com/plugins/line-numbers/
- */
-.line-numbers .line-numbers-rows {
-  border-right-color: #dfe2f1;
-}
-
-.line-numbers-rows > span:before {
-  color: #979db4;
-}
-
-/* overrides color-values for the Line Highlight plugin
- * http://prismjs.com/plugins/line-highlight/
- */
-.line-highlight {
-  background: rgba(107, 115, 148, 0.2);
-  background: -webkit-linear-gradient(left, rgba(107, 115, 148, 0.2) 70%, rgba(107, 115, 148, 0));
-  background: linear-gradient(to right, rgba(107, 115, 148, 0.2) 70%, rgba(107, 115, 148, 0));
-}