sanjar-notes / frontend

The basics - HTML, CSS, Javascript, browser APIs, performance
3 stars 0 forks source link

Code editor textarea using Ace #82

Open sanjarcode opened 1 year ago

sanjarcode commented 1 year ago

https://ace.c9.io/

Download a single file - noconflict/ace.js from the build repo. Link

Usage (plain web tech)

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>ACE in Action</title>
    <style type="text/css" media="screen">
      #editor {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
      }
    </style>
  </head>
  <body>
    <div id="editor" style="width: 400px; height: 200px">
      function foo(items) { var x = "All this is syntax highlighted"; return x;
      }
    </div>

    <script src="ace.js" type="text/javascript" charset="utf-8"></script>
    <script>
      var editor = ace.edit("editor");
      editor.setTheme("ace/theme/monokai");
      editor.session.setMode("ace/mode/javascript");
    </script>
  </body>
</html>