---
layout: demo.html
title: 'Ace Editor'
demo: true
---
<h2>
  Jotted demo using Jotted
</h2>

<p>
  Make sure you load <a href="https://ace.c9.io/#nav=about" target="_blank">Ace</a> first.
</p>

<p>
  You can get it from <a href="https://github.com/ajaxorg/ace-builds/" target="_blank">ace-builds</a>.
</p>

<div id="jotted-demo-ace"></div>

<script src="../bower_components/ace-builds/src/ace.js"></script>

<link href="../jotted.css" rel="stylesheet">
<script src="../jotted.js"></script>
<script>
  new Jotted(document.querySelector('#jotted-demo-ace'), {
    files: [
      {
        type: 'html',
        content: '<html>\n<body>\n<h1>Using Ace Editor</h1>\n</body>\n</html>'
      }
    ],
    pane: 'html',
    showBlank: true,
    plugins: [
      'ace'
    ]
  });
</script>
