With inline widgets

index.html

<div class="editit">
  <span class="char">C</span>
  
  <div class="gutter">
    <div class="linenums">
      <span>1</span>
      <span>2</span>
      <span>3</span>
      <span>4</span>
      <span>5</span>
    </div>
  </div>
  
  <div class="layers">
    <div class="events">
      
    </div>
    
    <div class="markers">
      
    </div>
    
    <div class="code">
      <div class="inline"><span class="syntax keyword">var</span><div class="body"><hr /><div class="content">Hello</div></div></div><span class="syntax space"> </span><span class="syntax identifier">http</span><span class="syntax space"> </span>=<span class="syntax space"> </span><span class="syntax identifier">require</span><span class="syntax bracket paren open">(</span><span class="syntax literal string quoted single"><span class="syntax quote single">'</span>http<span class="syntax quote single">'</span></span><span class="syntax bracket paren close">)</span>;<br class="syntax newline"><br class="syntax newline"><span class="syntax identifier">http</span>.<span class="syntax identifier">createServer</span><span class="syntax bracket paren open">(</span><span class="syntax keyword">function</span><span class="syntax bracket paren open">(</span><span class="syntax identifier">req</span>,<span class="syntax space"> </span><span class="syntax identifier">res</span><span class="syntax bracket paren close">)</span><span class="syntax space"> </span><span class="syntax bracket curly open">{</span><br class="syntax newline"><span class="syntax tab">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="syntax identifier">res</span>.<span class="syntax identifier">end</span><span class="syntax bracket paren open">(</span><span class="syntax literal string quoted single"><span class="syntax quote single">'</span>Hello, World!!!<span class="syntax quote single">'</span></span><span class="syntax bracket paren close">)</span>;<br class="syntax newline"><span class="syntax bracket curly close">}</span><span class="syntax bracket paren close">)</span>.<span class="syntax identifier">listen</span><span class="syntax bracket paren open">(</span><span class="syntax literal number">3000</span><span class="syntax bracket paren close">)</span>;
    </div>
    
    <div class="markers below">
      <div class="selection" data-line="0" data-start="4" data-length="4"></div>
      <div class="selection" data-line="2" data-start="0" data-length="4"></div>
      <div class="cursor" data-line="0" data-start="8"></div>
      <div class="cursor" data-line="2" data-start="4"></div>
    </div>
  </div>
</div>

script.js

function toNum(str) {
  if(typeof(str) == 'number')
    return str;
  
  str = str.toString();
  
  return parseInt(str.replace(/\D/g, ''));
}

function elWidth(el) {
  return (function() {
    return toNum(this.css('margin-left'   )) +
           toNum(this.css('padding-left'  )) +
           toNum(this.css('width'         )) +
           toNum(this.css('padding-right' )) +
           toNum(this.css('margin-right'  ));
  }).call($(el))
}

var charWidth, lineHeight;

(function() {
  charWidth  = this.find('.char').width(),
  lineHeight = this.find('.char').height();
  
  this.find('.char').remove();
  
  this.find('.layers').css('left', elWidth(this.find('.gutter')));
  
  this.find('.layers .markers *').each(function() {
    var $t = $(this);
    
    var line   = parseInt($t.attr('data-line')),
        start  = parseInt($t.attr('data-start')),
        length = parseInt($t.attr('data-length'));
    
    if(isNaN(line))
      line = 0;

    if(isNaN(start))
      start = 0;
    
    if(isNaN(length))
      length = 0;
    
    $t.css({
      top   : line   * lineHeight,
      left  : start  * charWidth,
      width : length * charWidth,
      height: lineHeight
    });
  });
}).call($('.editit'));

style.scss

@import "compass";
.editit {
  position: absolute;
  
  width: 100%;
  height: 100%;
  
  font-size: 12px;
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mo`no', 'Droid Sans Mono', 'Consolas', monospace;
  
  .char {
    position: fixed;
    visibility: hidden;
  }
  
  .gutter {
    position: absolute;
    
    height: 100%;
    min-width: 30px;
    padding-right: 5px;
    margin-right: 5px;
    background: hsl(0, 0%, 70%);
    color: black;
    
    .linenums {
      text-align: right;
      
      span {
        display: block;
      }
    }
  }
  
  .layers {
    position: absolute;
    
    right: 0;
    height: 100%;
    
    & > * {
      position: absolute;
      
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
    }
    
    .markers {
      & > * {
        position: absolute;
      }
      
      &.below {
        * {
          z-index: -1;
        }
      }
      
      .selection {
        background: hsl(214, 100%, 85%);
      }
      
      .cursor {
        border-left: 1px solid black;
      }
    }
    
    .code {
      .inline {
        position: relative;
        display: inline;
        border: 1px solid black;
        z-index: 100;
        
        .body {
          & > hr {
            margin-top: 1px;
            margin-bottom: 2px;
          }
          
          position: fixed;

          width: 100%;
          margin-left: -5px;
          z-index: -1;
          top: 0px;
          padding-top: 16px;
          background: #ccc;
        }
      }
      
      .syntax {
        &.keyword {
          color: blue;
        }
        
        &.space {
          
        }
        
        &.identifier {
          
        }
        
        &.bracket {
          &.paren {
            &.open {
              
            }
            
            &.close {
              
            }
          }
        }
        
        &.literal {
          &.string {
            color: hsl(122, 94%, 21%);
          }
          
          &.number {
            color: mediumBlue;
          }
        }
      }
    }
  }
}