Syntax highlighter for CSS (ace ajax)

JavaScript
1

Hi,

I have been working on the ace for a few days but I still cannot get it worked with css properly, been trying to look for solutions online or ace weki/ documentation, etc, but no luck at all.

This is my attempt http://lauthiamkok.net/dump/ace/editor_3.html, to highlight css with ace, but it has two issues/ bugs,

  1. it does not give the highlight the same as this demo page, http://ace.ajax.org/build/kitchen-sink.html, if u select css option from the select box.

  2. it has these error message on firefox,

 Could not load worker
    ace.js (line 1)
    Error: Could not get domain!
    [Break On This Error] define("ace/mode/css",["require","expo...).call(f.prototype),b.WorkerClient=f})

Any ideas?

The entire code,

<!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    	<title>Ace editor</title>
    	<style>
    	#ace-editor {
    		position: absolute;
    		width: 500px;
    		height: 400px;
    	}
    	</style>
    	
    	<script src="jquery-1.7.min.js" type="text/javascript" charset="utf-8"></script>
    	<script src="src/ace.js" type="text/javascript" charset="utf-8"></script>
    	<script src="src/theme-eclipse.js" type="text/javascript" charset="utf-8"></script>
    	<script src="src/mode-css.js" type="text/javascript" charset="utf-8"></script>
    	
    	<script>
    	$(document).ready(function(){
    
    		var editor = ace.edit("ace-editor");
    		editor.setTheme("ace/theme/eclipse");
    		   
    		var CssMode = require("ace/mode/css").Mode;
    		editor.getSession().setMode(new CssMode());
    		
    		//var textarea = $('.code').hide();
    		var textarea = $('.code');
    		
    		// Get the value from the editor and place it into the texrarea.
    		var text = editor.getSession().getValue();
    		textarea.val(text);
    		
    		// Update the textarea on change.
    		editor.getSession().on('change', function(){
    			
    			// Get the value from the editor and place it into the texrarea.
    			var text = editor.getSession().getValue();
    			textarea.val(text);
    			//alert(text);
    		});
    		
    		$('#form_data').submit(function(e){
    			//alert($(this).serialize());
    			
    			var object = $(this);
    			var path = object.attr('action');
    			
    			alert(object.serialize());
    			
    			$.post(path, object.serialize(),function(xml){
    				
    			});
    			return false;
    		});
    	});
    	</script>
    </head>
    <body>
    
    <form action="data.php" method="post" enctype="multipart/form-data" id="form_data" class="set-form">
    	
    	<textarea rows="5" cols="10" class="code" name="ace-editor"></textarea>
    	
    	<div style="height:450px; border:1px solid #000;">
    		<div id="ace-editor"><style>.text-layer {
        font-family: Monaco, "Courier New", monospace;
        font-size: 12px;
        cursor: text;
    }</style></div>
    	</div>
    	
    <input type="submit" name="submit" value="submit"/>
    
    </form>
    
    </body>
    </html>:

Thanks,
Lau