diff --git a/src/decorations.coffee b/src/decorations.coffee
index 87aefce06..0778f6e92 100644
--- a/src/decorations.coffee
+++ b/src/decorations.coffee
@@ -26,6 +26,15 @@ class Decorations
       @decorationsCache[decorationType] = filteredDecorations
     @decorationsCache[decorationType]
 
+  decorationsByMarkerIdForType: (decorationType) ->
+    filteredDecorations = {}
+    for id, decorations of @decorationsByMarkerId
+      for decoration in decorations
+        if decoration.isType(decorationType)
+          filteredDecorations[id] ?= []
+          filteredDecorations[id].push decoration
+    filteredDecorations
+
   indexDecorationsByScreenRow: (decorationsByMarkerId) ->
     decorationsByScreenRow = {}
     for id, decorations of decorationsByMarkerId
diff --git a/src/editor-component.coffee b/src/editor-component.coffee
index d9e956b36..09bbcda3e 100644
--- a/src/editor-component.coffee
+++ b/src/editor-component.coffee
@@ -93,7 +93,8 @@ EditorComponent = React.createClass
           lineHeightInPixels, defaultCharWidth
         }
         LinesComponent {
-          ref: 'lines', editor, lineHeightInPixels, defaultCharWidth,
+          ref: 'lines',
+          editor, lineHeightInPixels, defaultCharWidth, decorations,
           showIndentGuide, renderedRowRange, @pendingChanges, scrollTop, scrollLeft, @scrollingVertically,
           selectionScreenRanges, scrollHeight, scrollWidth, mouseWheelScreenRow, invisibles,
           visible, scrollViewHeight
diff --git a/src/editor.coffee b/src/editor.coffee
index 99fb8861c..c9b0aa657 100644
--- a/src/editor.coffee
+++ b/src/editor.coffee
@@ -1260,6 +1260,7 @@ class Editor extends Model
         if selection.intersectsBufferRange(selectionBufferRange)
           return selection
     else
+      @addDecorationForMarker(marker, type: 'highlight', class: 'selection')
       @emit 'selection-added', selection
       selection
 
diff --git a/src/highlight-component.coffee b/src/highlight-component.coffee
index acd75021c..d6e755a6d 100644
--- a/src/highlight-component.coffee
+++ b/src/highlight-component.coffee
@@ -6,13 +6,13 @@ HighlightComponent = React.createClass
   displayName: 'HighlightComponent'
 
   render: ->
-    {editor, screenRange, lineHeightInPixels} = @props
-    {start, end} = screenRange
+    {editor, decoration, lineHeightInPixels} = @props
+    {start, end} = decoration.getScreenRange()
     rowCount = end.row - start.row + 1
     startPixelPosition = editor.pixelPositionForScreenPosition(start)
     endPixelPosition = editor.pixelPositionForScreenPosition(end)
 
-    div className: 'selection',
+    div className: "highlight #{decoration.class or ''}",
       if rowCount is 1
         @renderSingleLineRegions(startPixelPosition, endPixelPosition)
       else
diff --git a/src/highlights-component.coffee b/src/highlights-component.coffee
index 99895b2b3..b4218bb6a 100644
--- a/src/highlights-component.coffee
+++ b/src/highlights-component.coffee
@@ -8,18 +8,18 @@ HighlightsComponent = React.createClass
   displayName: 'HighlightsComponent'
 
   render: ->
-    div className: 'highlights', @renderSelections()
+    div className: 'highlights', @renderHighlights()
 
-  renderSelections: ->
-    {editor, selectionScreenRanges, lineHeightInPixels} = @props
+  renderHighlights: ->
+    {editor, decorations, lineHeightInPixels} = @props
+    decorationsbyMarkerId = decorations.decorationsByMarkerIdForType('highlight')
 
-    selectionComponents = []
-    for selectionId, screenRange of selectionScreenRanges
-      selectionComponents.push(HighlightComponent({key: selectionId, screenRange, editor, lineHeightInPixels}))
-    selectionComponents
-
-  componentWillMount: ->
-    @selectionRanges = {}
+    highlightComponents = []
+    for markerId, decorations of decorationsbyMarkerId
+      if decorations?
+        for decoration in decorations
+          highlightComponents.push(HighlightComponent({key: markerId + decoration.class, decoration, editor, lineHeightInPixels}))
+    highlightComponents
 
   shouldComponentUpdate: (newProps) ->
-    not isEqualForProperties(newProps, @props, 'selectionScreenRanges', 'lineHeightInPixels', 'defaultCharWidth')
+    not isEqualForProperties(newProps, @props, 'decorations', 'lineHeightInPixels', 'defaultCharWidth')
diff --git a/src/lines-component.coffee b/src/lines-component.coffee
index f2ca50cb5..3562ee1b9 100644
--- a/src/lines-component.coffee
+++ b/src/lines-component.coffee
@@ -15,14 +15,14 @@ LinesComponent = React.createClass
 
   render: ->
     if @isMounted()
-      {editor, selectionScreenRanges, scrollTop, scrollLeft, scrollHeight, scrollWidth, lineHeightInPixels, defaultCharWidth, scrollViewHeight} = @props
+      {editor, decorations, scrollTop, scrollLeft, scrollHeight, scrollWidth, lineHeightInPixels, defaultCharWidth, scrollViewHeight} = @props
       style =
         height: Math.max(scrollHeight, scrollViewHeight)
         width: scrollWidth
         WebkitTransform: "translate3d(#{-scrollLeft}px, #{-scrollTop}px, 0px)"
 
     div {className: 'lines editor-colors', style},
-      HighlightsComponent({editor, selectionScreenRanges, lineHeightInPixels, defaultCharWidth}) if @isMounted()
+      HighlightsComponent({editor, decorations, lineHeightInPixels, defaultCharWidth}) if @isMounted()
 
   componentWillMount: ->
     @measuredLines = new WeakSet