Code Editor

  1. Home
  2. Forms
  3. Code Editor

Ace Editor (Javascript Mode)

You can find the offical website 
		/**
		 * In fact, you're looking at ACE right now. Go ahead and play with it!
		 *
		 * We are currently showing off the JavaScript mode. ACE has support for 45
		 * language modes and 24 color themes!
		 */
		function add(x, y) {
			var resultString = "Hello, ACE! The result of your math is: ";
			var result = x + y;
			return resultString + result;
		}
		var addResult = add(3, 2);
		console.log(addResult);

Ace Editor (Html Mode And Emmet)

You can find the offical website 
<!--
		* We are currently showing off the Html mode. ACE has support for 45
		* language modes and 24 color themes!
		 -->
		<!DOCTYPE html>
		<html lang="en">
		<head>
		<title>ACE in Action</title>
		<style>
			#editor {
				position: absolute;
				top: 0;
				right: 0;
				bottom: 0;
				left: 0;
			}
		</style>
		</head>
		<body>
		<div id="editor">function foo(items) {
			var x = "All this is syntax highlighted";
			return x;
		}</div>
		<script src="/ace-builds/src-noconflict/ace.js" charset="utf-8"></script>
		<script>
			var editor = ace.edit("editor");
			editor.setTheme("ace/theme/monokai");
			editor.getSession().setMode("ace/mode/javascript");
		</script>
		</body>
		</html>

Ace Editor (Css Editor)

You can find the offical website 

			/* Some example CSS */

			@import url("something.css");

			body {
			margin: 0;
			padding: 3em 6em;
			font-family: tahoma, arial, sans-serif;
			color: #000;
			}

			#navigation a {
			font-weight: bold;
			text-decoration: none !important;
			}

			h1 {
			font-size: 2.5em;
			}

			h2 {
			font-size: 1.7em;
			}

			h1:before, h2:before {
			content: "::";
			}

			code {
			font-family: courier, monospace;
			font-size: 80%;
			color: #418A8A;
			}