Implement ACE Code Editor in Web Page to write code easily

Ace is a code editor which can be easily embedded in any Web page and Javascript Applications
As developers, They should try to attract clients or end users by these things.
These are having a very good features like Faster to Edit, Human Readable, bracket paring, highlighting, syntax flags etc.
It also supports most of all languages like java, python, c, c++, also markup language like html and finally Cascading style sheets.
You can get this source code from the following link below.
```
git clone git://github.com/ajaxorg/ace.git
```

This is also obtain in CDN

https://cdnjs.cloudflare.com/ajax/libs/ace/1.3.3/ace.js

Some Basics of HTML

DOCTYPE is the first thing which should be present in an HTML5 document.
```
<!DOCTYPE html>
```
The <html> tag represents the root of an HTML document. The <html> tag is the container for all other HTML elements (except for the <! DOCTYPE> tag)
```
<html>



</html>
```

The <head> element is a container for metadata and is palced inside <head> tag.

<html>
    <head>
       <!-- It contains <title> tag, Inline styles, and some links
    </head>
</html>

The <body> tag defines the document's body. The <body> element contains all the contents of an HTML document, such as headings, paragraphs, images, hyperlinks, tables, lists, etc. It is placed inside <html> tag and below <head> tag.
```
<html>
    <head>

    </head>
    <body>
        
    </body>
</html>
```

Implement Ace in Web Page To Attract Users

This implementation makes users to attract more and they love to work in such websites.

<!DOCTYPE html>

<html lang="en" dir="ltr">

  <head>
    <title>ACE</title>

    <!-- Inline Style starts -->
    <style>
        #editor {
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
        }
    </style>
    <!-- Inline style Ends -->

  </head>

  <body>
    <div id="editor"></div>

    <!-- javascript code starts -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.3.3/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>
    <!-- javascript code ends -->

  </body>
</html>

The below line represents the dark mode theme(monokai)
```
editor.setTheme("ace/theme/monokai");
```
We can change the editor to suitable for any language by changing setMode() and the above code is for javascript

For java, change setMode() as shown

editor.session.setMode("ace/mode/java");

For python, change setMode() as shown

editor.session.setMode("ace/mode/python");

Some CSS should be present to locate its place and in HTML we created an ID editor in <div> that is used in inline statement

<style>
        #editor {
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
        }
</style>
// top, left, right, bottom are margines and position:absolute is positioned relative to the nearest positioned ancestor. # is used for id's.

Once Run the above code to understand properly by changing their laguages.
It feels very good to type codes in web pages rather than like text editors.