Gutter is renders line numbers when buffer is assigned.

spec/atom/editor-spec.coffee

@@ -122,6 +122,12 @@ describe "Editor", ->
         editor.moveCursorRight()
         expect(editor.getCursorScreenPosition()).toEqual [11, 0]
 
+  describe "gutter rendering", ->
+    it "creates a line number element for each line in the buffer", ->
+      expect(editor.gutter.find('.line-number').length).toEqual(buffer.numLines())
+      expect(editor.gutter.find('.line-number:first').text()).toBe "1"
+      expect(editor.gutter.find('.line-number:last').text()).toBe "13"
+
   describe "cursor movement", ->
     describe ".setCursorScreenPosition({row, column})", ->
       beforeEach ->

src/atom/editor.coffee

@@ -1,13 +1,14 @@
 {View, $$} = require 'space-pen'
 Buffer = require 'buffer'
-Point = require 'point'
 Cursor = require 'cursor'
-Selection = require 'selection'
+Gutter = require 'gutter'
 Highlighter = require 'highlighter'
 LineFolder = require 'line-folder'
 LineWrapper = require 'line-wrapper'
-UndoManager = require 'undo-manager'
+Point = require 'point'
 Range = require 'range'
+Selection = require 'selection'
+UndoManager = require 'undo-manager'
 
 $ = require 'jquery'
 _ = require 'underscore'
@@ -17,10 +18,7 @@ class Editor extends View
   @content: ->
     @div class: 'editor', tabindex: -1, =>
       @div class: 'content', outlet: 'content', =>
-        @div class: 'gutter', outlet: 'gutter', =>
-          @div '1'
-          @div '2'
-          @div '3'
+        @subview 'gutter', new Gutter
         @div class: 'lines', outlet: 'lines'
       @input class: 'hidden-input', outlet: 'hiddenInput'
 
@@ -151,6 +149,8 @@ class Editor extends View
     for screenLine in @getScreenLines()
       @lines.append @buildLineElement(screenLine)
 
+    @gutter.renderLines(@getScreenLines())
+
   getScreenLines: ->
     @lineWrapper.getLines()
 

src/atom/gutter.coffee

@@ -0,0 +1,15 @@
+{View, $$} = require 'space-pen'
+
+$ = require 'jquery'
+_ = require 'underscore'
+
+module.exports =
+class Gutter extends View
+  @content: ->
+    @div class: 'gutter'
+
+  renderLines: (screenLines) ->
+    @empty()
+    for screenLine, i in screenLines    
+      @append $$ ->
+        @div {class: 'line-number'}, i + 1

static/editor.css

@@ -17,8 +17,10 @@
 }
 
 .editor .gutter {
-  padding: 0 1ex;
+  padding-left: 0.4em;
+  padding-right: 0.8em;
   color: rgba(255, 255, 255, .3);
+  text-align: right;
 }
 
 .editor .gutter.drop-shadow {