css:
  #editor { 
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
  }
  .theme-Code{
    float:right;
    position:relative;
    top:-50px;
  }

.page
  .content-Base
  
    h2 Editing #{params[:filename]}
    
    .theme-Code
      p style="display:inline-block; margin-right:10px" Theme: 
      select id="theme" size="1" onchange="setTheme();" onkeyup="setTheme();"
        optgroup label="Bright"
          option value="ace/theme/chrome" Chrome
          option value="ace/theme/clouds" Clouds
          option value="ace/theme/crimson_editor" Crimson Editor
          option value="ace/theme/dawn" Dawn
          option value="ace/theme/dreamweaver" Dreamweaver
          option value="ace/theme/eclipse" Eclipse
          option value="ace/theme/github" GitHub
          option value="ace/theme/solarized_light" Solarized Light
          option value="ace/theme/textmate" TextMate
          option value="ace/theme/tomorrow" Tomorrow
          option value="ace/theme/xcode" XCode
        optgroup label="Dark"
          option value="ace/theme/ambiance" Ambiance
          option value="ace/theme/chaos" Chaos
          option value="ace/theme/clouds_midnight" Clouds Midnight
          option value="ace/theme/cobalt" Cobalt
          option value="ace/theme/idle_fingers" idleFingers
          option value="ace/theme/kr_theme" krTheme
          option value="ace/theme/merbivore" Merbivore
          option value="ace/theme/merbivore_soft" Merbivore Soft
          option value="ace/theme/mono_industrial" Mono Industrial
          option value="ace/theme/monokai" Monokai
          option value="ace/theme/pastel_on_dark" Pastel on dark
          option value="ace/theme/solarized_dark" selected="selected" Solarized Dark
          option value="ace/theme/terminal" Terminal
          option value="ace/theme/tomorrow_night" Tomorrow Night
          option value="ace/theme/tomorrow_night_blue" Tomorrow Night Blue
          option value="ace/theme/tomorrow_night_bright" Tomorrow Night Bright
          option value="ace/theme/tomorrow_night_eighties" Tomorrow Night 80s
          option value="ace/theme/twilight" Twilight
          option value="ace/theme/vibrant_ink" Vibrant Ink

    <div id="editor" style="width: 100%; height: 600px; position: relative; margin-bottom:25px">#{{encoding_fix(@file_data)}}</div>
    
    .row
      .col.col-33.txt-Center style="margin-bottom:10px"
        a.btn-Action href="/dashboard" <i class="icon-remove"></i>&nbsp;&nbsp;Finish Without Saving
        
      .col.col-33.txt-Center style="margin-bottom:10px"
        a.btn-Action href="#" onclick="saveTextFile(false); return false" <i class="icon-save"></i>&nbsp;&nbsp;Save Changes
        
      .col.col-33.txt-Center
        a.btn-Action href="#" onclick="saveTextFile(true); return false" <i class="icon-save"></i>&nbsp;&nbsp;Save and Finish
    
    .row style="margin-top: 20px"
      .span6.offset3.text-center
        div id="editorUpdates" class="alert alert-success hidden"
          span
        
    script src="/js/ace/ace.js" type="text/javascript" charset="utf-8"
    javascript:
    
      function setTheme(name) {
        editor.setTheme($('#theme').val());
      }
      
      function saveTextFile(quit) {
        /*
        $.post('/site_files/save/#{params[:filename]}', editor.getValue(), function(resp) {
          if(resp == 'ok') {
            $('#editorUpdates span').text('Your file has been saved.');
            $('#editorUpdates').removeClass('hidden');
          }
        });
        */
        
        $.ajax({
          url: '/site_files/save/#{params[:filename]}',
          data: editor.getValue(),
          processData: false,
          contentType: false,
          type: 'POST',
          success: function(response){
            if(response == 'ok') {
              if(quit === true) {
                window.location = '/dashboard';
              }
              $('#editorUpdates span').html('<i class="icon-save icon-2x"></i>&nbsp;&nbsp;<span style="font-size: 14pt">Your file has been saved.</span>');
              setTimeout(function() {
                $('#editorUpdates').fadeOut();  //.addClass('hidden');
              }, 2000);
              
            } else {
              $('#editorUpdates span').text(response);
            }
            $('#editorUpdates').fadeIn();
            $('#editorUpdates').removeClass('hidden');
            
          }
        });
      }
    
      var editor = {};
    
      $(document).ready(function() {
        editor = ace.edit("editor");
        setTheme();
        editor.getSession().setMode("ace/mode/html");
        editor.getSession().setTabSize(2);
        editor.getSession().setUseWrapMode(true);
        editor.setFontSize(14);
        editor.setShowPrintMargin(false);
        
      });