code mirror css matches markdown css closely

Barrie Hadfield · Barrie Hadfield · commit f4996c7b55dd · 2017-02-06T12:12:38.000Z
diff --git a/source/index.html.md.erb b/source/index.html.md.erb
@@ -17,10 +17,26 @@ end
   var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
     mode: "text/x-ruby",
     matchBrackets: true,
-    indentUnit: 2
+    indentUnit: 2,
+    theme: 'github'
   });
 </script>
 
+<br>
+
+```ruby
+class TestApp < React::Component::Base
+  param :name
+  before_mount { @timer = every(1) { force_update! } }
+  render(DIV) do
+    h1 {"The current time is #{Time.now}"}
+    h2 { "here hello #{params.name}" }.on(:click) do
+     alert "you clicked"
+    end
+  end
+end
+```
+
 
 ## Pure Ruby
 Hyperloop lets you build beautiful interactive user interfaces using the same Ruby language running your server side code. Hyperloop replaces JS code, JSX, HTML, templating languages, and complex frameworks with one simple system.
diff --git a/source/layout.erb b/source/layout.erb
@@ -31,6 +31,8 @@
     <%= stylesheet_link_tag 'bootstrap.min.css' %>
     <%= stylesheet_link_tag 'override.css' %>
     <!-- <%= stylesheet_link_tag 'code.css' %> -->
+    <%= stylesheet_link_tag 'github.css' %>
+    <%= stylesheet_link_tag 'highlighting.css' %>
     <%= stylesheet_link_tag 'codemirror.css' %>
 
     <%= feed_tag :atom, "#{blog.options.prefix.to_s}/feed.xml", title: "Atom Feed" %>
diff --git a/source/stylesheets/codemirror.css b/source/stylesheets/codemirror.css
@@ -238,7 +238,7 @@ div.CodeMirror span.CodeMirror-nonmatchingbracket {color: #f22;}
   -moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0;
   border-width: 0;
   background: transparent;
-  font-family: inherit;
+  font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace;
   font-size: inherit;
   margin: 0;
   white-space: pre;
diff --git a/source/stylesheets/github.css b/source/stylesheets/github.css
@@ -0,0 +1,66 @@
+.cm-s-github {
+	font-size: 0.95em;
+	line-height: 1.4em;
+	font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace;
+	letter-spacing: 0.0px;
+	word-spacing: 0px;
+	background: #F8F8FF;
+	color: #000000;
+}
+.cm-s-github .CodeMirror-lines {
+	padding: 8px 0;
+}
+.cm-s-github .CodeMirror-gutters {
+	box-shadow: 1px 0 2px 0 rgba(0, 0, 0, 0.5);
+	-webkit-box-shadow: 1px 0 2px 0 rgba(0, 0, 0, 0.5);
+	background-color: #F8F8FF;
+	padding-right: 10px;
+	z-index: 3;
+	border: none;
+}
+.cm-s-github div.CodeMirror-cursor {
+	border-left: 3px solid #000000;
+}
+.cm-s-github .CodeMirror-activeline-background {
+	background: #00000012;
+}
+.cm-s-github .CodeMirror-selected {
+	background: #BCD5FA;
+}
+.cm-s-github .cm-comment {
+	font-style: italic;
+	color: #999988;
+}
+.cm-s-github .cm-number {
+	color: null;
+}
+.cm-s-github .cm-atom {
+	color: #445588;
+}
+.cm-s-github .cm-string {
+	color: #DD1144;
+}
+.cm-s-github .cm-variable-2 {
+	color: #121289;
+}
+.cm-s-github .cm-variable {
+	color: #445588;
+}
+.cm-s-github .cm-property {
+	color: #990000;
+  font-weight: bold;
+}
+.cm-s-github .cm-keyword {
+	color: null;
+  font-weight: bold;
+}
+.cm-s-github .cm-tag {
+	color: #445588;
+}
+
+.cm-s-github .cm-operator {
+	color: null;
+}
+.cm-s-github .CodeMirror-linenumber {
+	color: italic;
+}
diff --git a/source/stylesheets/highlighting.css.erb b/source/stylesheets/highlighting.css.erb
@@ -0,0 +1 @@
+<%= Rouge::Themes::Github.render(:scope => '.highlight') %>

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1 @@`
	`1`	`+<%= Rouge::Themes::Github.render(:scope => '.highlight') %>`