Basic Highlighting Done

index.haml

- content = "Lorem ipsum @dolor sit amet, consectetur @adipiscing elit. Sed convallis egestas leo. Nulla eget vehicula dui. Praesent vulputate urna #imperdiet, #volutpat #neque #vel, #interdum neque. Nullam vitae @fringilla #lorem."

%h1 RICH TEXT AREA PROTOTYPE

.content
  .rich-text-area
    .mirror-container
      .mirror~ content
    %textarea~ content
  .auto-complete
    %ul
      %li Item A
      %li Item B
      %li Item C
      

script.js

(function ($) {  
  var $richTextArea  = $('.rich-text-area')
  var $textarea      = $richTextArea.find('textarea')
  var $mirror        = $richTextArea.find('.mirror')
  
  var formatText = function (plainText) {
    var formatedText = plainText
    formatedText = formatedText.replace(/\n/g, '<br/>')
    formatedText = formatedText.replace(/(@([a-z0-9])+)/gi, "<span class='meta mention'>$1</span>");
    formatedText = formatedText.replace(/(#([a-z0-9])+)/gi, "<span class='meta tag'>$1</span>");
    return formatedText;
  }
  
  var updateMirror = function () {
    var plainText     = $textarea.val()
    var formatedText  = formatText(plainText)
    
    $mirror.html(formatedText);
    $mirror.css('margin-top', -$textarea.scrollTop());
  }
  
  $richTextArea.on('change keyup', 'textarea', updateMirror);
  $textarea.scroll(updateMirror);
  
  updateMirror()
  
}(jQuery))

style.css

/*** Example Only Styles ***/
body {
  background: #444;
  width: 60%;
  text-align:center;
  margin: 50px auto;
  color: whitesmoke;
}
.content {
  position: relative;
  text-align: left;
}
textarea {
  padding: 10px;
  font-size: 14px;
}
.rich-text-area, textarea {
  width: 100%;
  resize: none;
  margin: 0;
  
  height: 4.8em; /* line-height * number of lines */
  line-height: 1.2em;
  border : 1px solid black;
  font-size: 14px
}
/****************************************************************************/
/*** Widget Related Styles ***/
.rich-text-area {
  position: relative;
  text-align: left;
}
.rich-text-area textarea {
  background: transparent;
  position: absolute;
  left: 0;
}
.rich-text-area .mirror-container {
  overflow-y: hidden;
  background: white;
  float:left;
}
.rich-text-area .mirror {
  padding: 0;
  margin: 0;
  border: none;
  color: transparent;
}
.rich-text-area .mirror .meta {
  -webkit-border-radius: 2px;
     -moz-border-radius: 2px;
          border-radius: 2px;
  
  -webkit-box-shadow: 0 0 0 1px hsl(219, 63%, 78%);
     -mox-box-shadow: 0 0 0 1px hsl(219, 63%, 78%);
          box-shadow: 0 0 0 1px hsl(219, 63%, 78%);
  
  font-weight: normal;
}
.rich-text-area .mirror-container, .rich-text-area textarea {
  /*position: absolute;*/
  width: 100%;
  height: 100%;
  line-height: inherit;
  font-size: inherit;
  font-family: inherit;
  resize: none;
  padding: 10px;
  border : none;
  word-wrap: inherit;
  letter-spacing: inherit;
  word-spacing: inherit;
  text-transform: inherit;
  text-indent: inherit;
  text-shadow: inherit;
  text-align: inherit;
}
/*** Possibly Custom Styles ***/
.rich-text-area .mirror .mention {
  background: hsl(217, 30%, 88%);
}
.rich-text-area .mirror .tag {
  background: hsl(145,53%,74%);
}
/*** Utility Styles ***/
.rich-text-area + *:before,
.rich-text-area + *:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.rich-text-area + *after {
    clear: both;
}
/*
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */
.rich-text-area + * {
    *zoom: 1;
}