Code Editor

  1. Home
  2. Forms
  3. Code editor

Code Editor

<!DOCTYPE html>
<html lang="en">
<head>
<title>ACE in Action</title>
<style></style>
</head>
<body>

<div id="editor">function foo(items) {
    var x = "All this is syntax highlighted";
    return x;
}</div>
<div id="nav">
 <a href="http://codemirror.net">
<h1>CodeMirror</h1>
<img id="logo" src="../doc/logo.png"></a>

  <ul>
    <li>
<a href="../dashboard_v1.html">Home</a>
    </li>
<li>
<a href="../doc/manual.html">Manual</a>
    </li>
<li>
<a href="https://github.com/codemirror/codemirror">Code</a>
  </li>
</ul>
  <ul>
    <li>
<a class="active" href="#">Code Folding</a>
  </li>
</ul>
</div>

<article>
  <h2>Code Folding Demo</h2>
  <form>

    <div style="max-width: 50em; margin-bottom: 1em">JavaScript:<br>

    <textarea id="code" name="code"></textarea></div>

    <div style="max-width: 50em; margin-bottom: 1em">HTML:<br>

    <textarea id="code-html" name="code-html"></textarea></div>

    <div style="max-width: 50em">Markdown:<br>

    <textarea id="code-markdown" name="code"></textarea></div>

  </form>
  <script id="script"></script>
</article>
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>

<script src="/ace-builds/src-noconflict/ace.js" charset="utf-8"></script>
<script>
    var editor = ace.edit("editor");
    editor.setTheme("ace/theme/tomorrow");
    editor.getSession().setMode("ace/mode/html");
</script>
</body>
</html>