ace editor

public/less/admin/admin.less

@@ -364,6 +364,12 @@
 			color: black;
 		}
 	}
+
+	#customCSS, #customHTML {
+		width: 100%;
+		height: 450px;
+		display: block;
+	}
 }
 
 

public/src/forum/admin/appearance/customise.js

@@ -5,12 +5,29 @@ define('forum/admin/appearance/customise', ['forum/admin/settings'], function(Se
 	var Customise = {};
 	
 	Customise.init = function() {		
-		var	customCSSEl = $('textarea[data-field]')[0];
-		tabIndent.config.tab = '    ';
-		tabIndent.render(customCSSEl);
+		Settings.prepare(function() {
+			$('#customCSS').text($('#customCSS-holder').val());
+			$('#customHTML').text($('#customHTML-holder').val());
+			
+			var customCSS = ace.edit("customCSS");
+				customHTML = ace.edit("customHTML");
 
-		Settings.prepare();
+			customCSS.setTheme("ace/theme/twilight");
+			customCSS.getSession().setMode("ace/mode/css");	
+
+			customCSS.on('change', function(e) {
+			    $('#customCSS-holder').val(customCSS.getValue());
+			}); 
+
+			customHTML.setTheme("ace/theme/twilight");
+			customHTML.getSession().setMode("ace/mode/html");
+
+			customHTML.on('change', function(e) {
+			    $('#customHTML-holder').val(customHTML.getValue());
+			}); 
+		});
 	};
 
 	return Customise;
 });
+	

src/views/admin/appearance/customise.tpl

@@ -5,7 +5,8 @@
 	<p>
 		You may also opt to enter your own CSS declarations here, which will be applied after all other styles.
 	</p>
-	<textarea class="well" data-field="customCSS" placeholder="Enter your custom CSS here..."></textarea>
+	<div id="customCSS"></div>
+	<input type="hidden" id="customCSS-holder" value="" data-field="customCSS" />
 
 	<form class="form">
 		<div class="form-group">
@@ -20,7 +21,9 @@
 	<p>
 		You can enter custom HTML here (ex. JavaScript, Meta Tags, etc.) which will be appended to the <code>&lt;head&gt;</code> section of your forum's markup.
 	</p>
-	<textarea class="well" data-field="customJS" placeholder="Enter your custom JS here..."></textarea>
+
+	<div id="customHTML"></div>
+	<input type="hidden" id="customHTML-holder" value="" data-field="customJS" />
 
 	<form class="form">
 		<div class="form-group">

src/views/admin/header.tpl

@@ -19,11 +19,12 @@
 	    <script>__lt_ie_9__ = 1;</script>
 	<![endif]-->
 
-	<script src="{relative_path}/socket.io/socket.io.js"></script>
-	<script src="{relative_path}/nodebb.min.js"></script>
-	<script src="{relative_path}/vendor/colorpicker/colorpicker.js"></script>
-	<script src="{relative_path}/vendor/tabIndent/tabIndent.js"></script>
-	<script src="{relative_path}/src/admin.js?{cache-buster}"></script>
+	<script type="text/javascript" src="{relative_path}/socket.io/socket.io.js"></script>
+	<script type="text/javascript" src="{relative_path}/nodebb.min.js"></script>
+	<script type="text/javascript" src="{relative_path}/vendor/colorpicker/colorpicker.js"></script>
+	<script type="text/javascript" src="{relative_path}/vendor/tabIndent/tabIndent.js"></script>
+	<script type="text/javascript" src="{relative_path}/src/admin.js?{cache-buster}"></script>
+	<script type="text/javascript" src="{relative_path}/vendor/ace/ace.js"></script>
 
 	<script>
 		require.config({
@@ -111,7 +112,7 @@
 						<li><a href="{relative_path}/admin/users/latest"><i class="fa fa-fw fa-user"></i> Users</a></li>
 						<li><a href="{relative_path}/admin/groups"><i class="fa fa-fw fa-group"></i> Groups</a></li>
 						<li><a href="{relative_path}/admin/settings/general"><i class="fa fa-fw fa-cogs"></i> Settings</a></li>
-						<li><a href="{relative_path}/admin/appearance"><i class="fa fa-fw fa-th"></i> Appearance</a></li>
+						<li><a href="{relative_path}/admin/appearance/themes"><i class="fa fa-fw fa-th"></i> Appearance</a></li>
 						<li><a href="{relative_path}/admin/plugins"><i class="fa fa-fw fa-code-fork"></i> Plugins</a></li>
 						<li><a href="{relative_path}/admin/languages"><i class="fa fa-fw fa-language"></i> Languages</a></li>
 						<li><a href="{relative_path}/admin/sounds"><i class="fa fa-fw fa-volume-up"></i> Sounds</a></li>