diff --git a/spec/editor-component-spec.coffee b/spec/editor-component-spec.coffee
index 8a7d22421..c9ccab8bd 100644
--- a/spec/editor-component-spec.coffee
+++ b/spec/editor-component-spec.coffee
@@ -106,6 +106,8 @@ describe "EditorComponent", ->
         expect(component.lineNodeForScreenRow(0).textContent).toBe "#{invisibles.space}a line with tabs#{invisibles.tab} and spaces#{invisibles.space}#{invisibles.eol}"
 
       it "displays newlines as their own token outside of the other tokens scope", ->
+        editor.setText "var"
+        expect(component.lineNodeForScreenRow(0).innerHTML).toBe "<span class=\"source js\"><span class=\"storage modifier js\">var</span></span><span class=\"invisible-character\">#{invisibles.eol}</span>"
 
       it "allows invisible glyphs to be customized via the editor.invisibles config", ->
 
diff --git a/src/lines-component.coffee b/src/lines-component.coffee
index 27a3c0660..8de0963ee 100644
--- a/src/lines-component.coffee
+++ b/src/lines-component.coffee
@@ -146,8 +146,9 @@ LinesComponent = React.createClass
       innerHTML += @updateScopeStack(scopeStack, token.scopes)
       hasIndentGuide = not mini and showIndentGuide and token.hasLeadingWhitespace or (token.hasTrailingWhitespace and lineIsWhitespaceOnly)
       innerHTML += token.getValueAsHtml({invisibles, hasIndentGuide})
+
     innerHTML += @popScope(scopeStack) while scopeStack.length > 0
-    innerHTML += invisibles.eol if invisibles.eol?
+    innerHTML += "<span class='invisible-character'>#{invisibles.eol}</span>"
     innerHTML
 
   updateScopeStack: (scopeStack, desiredScopes) ->