Syntax highlight based entirely on editor colors

spec/app/editor-spec.coffee

@@ -1765,7 +1765,7 @@ describe "Editor", ->
         editor.edit(emptyEditSession)
         expect(editor.gutter.lineNumbers.find('.line-number').length).toBe 1
 
-    fdescribe "when the editor is mini", ->
+    describe "when the editor is mini", ->
       it "hides the gutter", ->
         miniEditor = new Editor(mini: true)
         miniEditor.attachToDom()

src/packages/markdown-preview/lib/markdown-preview-view.coffee

@@ -65,12 +65,18 @@ class MarkdownPreviewView extends ScrollView
   setLoading: ->
     @html($$$ -> @div class: 'markdown-spinner', 'Loading Markdown...')
 
+
   tokenizeCodeBlocks: (html) =>
     html = $(html)
     preList = $(html.filter("pre"))
+    editorBackgroundColor = $('.editor').css("background-color")
+    rawEditorTextColor = $('.editor .gfm .raw').css("color")
 
     for codeBlock in preList.toArray()
+      $(codeBlock).css("background-color", editorBackgroundColor)
       codeBlock = $(codeBlock.firstChild)
+      # set the default raw color of unhiglighted pre tags
+      codeBlock.css("color", rawEditorTextColor)
 
       # go to next block unless this one has a class
       continue unless className = codeBlock.attr('class')
@@ -85,11 +91,16 @@ class MarkdownPreviewView extends ScrollView
       continue unless grammar = syntax.selectGrammar("foo.#{extension}", text)
       continue if grammar is syntax.nullGrammar
 
+      text = codeBlock.text()
       tokens = grammar.tokenizeLines(text)
       grouping = ""
       for token in tokens
-        grouping += Editor.buildHtmlLine(token, text)
+        blockElem = $(Editor.buildHtmlLine(token, text))
+        grouping += blockElem.addClass("editor")[0].outerHTML
+
       codeBlock.replaceWith(grouping)
+      # undo default coloring
+      codeBlock.css("color", "")
 
     html
 

src/packages/markdown-preview/stylesheets/markdown-preview.less

@@ -23,6 +23,7 @@
 // includes some GitHub Flavored Markdown specific styling (like @mentions)
 .markdown-preview {
   pre,
+  pre div.editor,
   code,
   tt {
     font-size: 12px;