` and `` tags, but you can also supply the `type` if needed.

```twig
  
    {{ data.page.myCode.code }}
  

```

# Custom-Code-Editor-A3 Options Available

The custom-code-editor has a number of options available. You can customize your editor experience by creating your own `index.js` file in the `modules/custom-code-editor` folder of your project to extend the existing options.

```javascript
// in modules/custom-code-editor-a3/index.js
module.exports = {
    options: {
        ace : {
            theme : 'tomorrow', // themes available : https://github.com/ajaxorg/ace/tree/master/lib/ace/theme (Case Sensitive)
            defaultMode : 'javascript',
            options : {
                // All options available in : https://github.com/ajaxorg/ace/wiki/Configuring-Ace
            },
            modes : [
                {
                    title : 'Javascript', // Title to Override Name
                    name : 'javascript', // Name of the mode (Case-Sensitive)
                    snippet : '// Content Start Here \n print(\"Hello World\") \n @code-here', // Default Value (String)
                    disableSnippet : true // Disable default snippet value when switching (OPTIONAL - Boolean)
                }
            ],
            config: {
                fontSize: 16, // Editor Font Size (Number or String)
                editorHeight: 500, // Editor Height (Number or String)
                dropdown: {
                    enable: true, // Enable it for switching modes button (Boolean)
                    height: 30, // Height Dropdown (Number or String)
                    borderRadius: 5, // Border Radius Dropdown (Number or String)
                    fontFamily: "Mont-Regular", // Font Family Dropdown (String)
                    backgroundColor : "Orange", // Background Color Dropdown (String)
                    textColor : "white", // Text Color Dropdown (String)
                    fontSize: 16, // Font Size Dropdown (Number or String)
                    position: {
                        // All top , left , right , bottom dropdown position enable for configs
                        bottom: 20,
                        right: 20
                    },
                    arrowColor: "blue" // To change arrow color in dropdown (String)
                }
            }
        }
    }
}
```

# List of default modes available
- ActionScript
- Bash
- C++
- C#
- PHP
- HTML
- Javascript

# Name Of The Modes References
### [List of all Modes](https://github.com/ajaxorg/ace-builds/blob/6526ea4a845a3682789a9224f319271496051873/src/ext-modelist.js#L33)

# How to Override Existing Mode ?
Simple , make sure the name of the mode is similar to default modes provided. 

### Default Mode
By default , `defaultMode : 'javascript'` is enable. But you can choose a default mode by yourself! Just add the name of any mode available to you. Lets say you want 'css' to be the default mode.

```javascript
ace : {
    defaultMode : 'css' // Same as `name : 'css' in mode : []`
}
```

> This will select `css` a the starting mode, then you can choose a different mode by choosing from the dropdown if needed.

### Enable Snippet
To enable your snippet to be added automatically when this schema is open, you have to enable the dropdown
```javascript
ace : {
    config : {
        dropdown : {
            enable : true
        }
    }
}
```

WARNING !
Once enabled, your dropdown will be in the upper left corner. This will block your code input so we recommend that at the same time you enable the dropdown you add a custom position. For example, to position the dropdown on bottom left corner with an offset of 30px from the container edge use:

```javascript
ace : {
    config : {
        dropdown : {
            enable : true
            position : {
                bottom : 30,
                left : 30
            }
        }
    }
}
```

### Disable Snippet
If you want to disable snippet addition for a specific mode, write the `name` of the mode and set the `disableSnippet` property to `true`:

```javascript
ace : {
    modes : [
        {
            name : "html",
            disableSnippet : true // This will not automatically change snippet when you change mode on dropdown
        }
    ]
}
```

### Override Snippet
Also , if you want to override the default snippet for specific mode, write the `name` of the mode and insert your `snippet` :

```javascript
ace : {
    modes : [
        {
            name: 'javascript', // name must be the same as existing default mode
            snippet: "document.addEventListener(\"DOMContentLoaded\" , function(){\n
            @code-here\n
        });"
        }
    ]
}
```

### `@code-here` in a Snippet
What is this syntax for? Well, whenever you change your mode on dropdown, the existing codes in the schema will be replaced automatically into the new snippet in place of `@code-here`. Amazing right? If you did not provide this, your existing value in the editor schema will be lost. Let's make a new override snippet that has our own `@code-here` in it:
```javascript
ace: {
    modes : [
        {
            name :'javascript',
            snippet : "// Content Start Here \n print(\"Hello World\") \n @code-here"
        }
    ],
}
```

### Title of Dropdown
By default, the name of a dropdown will be in the `name` property. But some of the names don't make sense! Can I change it? Yes you can! Simply add the `title` property with your prefered name For example, rename the existing `sh` mode to be called **`Bash`** :
```javascript
ace : {
    modes : [
        {
            name : 'sh',
            title : 'Bash' // This will make dropdown name as Bash instead of Sh
        }
    ]
}
```

### Clear Default Modes
What if I want to clear all default modes and define them myself? Easy, add the `clearModes : true` setting:
```javascript
ace : {
    clearModes : true
}
```

Once you clear your modes, you can define your own modes without considering any overrides mode. Doesn't this makes your life easier?
```javascript
ace : {
    modes : [
        {
            // List of all modes that you want to define. The options you may write like this
            title : '