md` \`\`\`js viewof CodigoViaAce = { let codigoinicial = \` function setup() { createCanvas(420, 160); background(255); } function draw() { fill(255); stroke('#000000'); position = sin(frameCount / 60) * 50 + 150; ellipse(position, 80, 100,100); } \`; // Instanciate the editor const { editor, view } = ace( codigoinicial, { fontSize: "0.8em", height: "260px" }, { theme: "ace/theme/tomorrow", selectionStyle: "text", highlightActiveLine: false, mode: "ace/mode/javascript", enableBasicAutocompletion: true, enableLiveAutocompletion: true, enableSnippets: true, showPrintMargin: false, showGutter: false } ); // Captures the initial value view.value = editor.getValue(); // Reacts to every change of the editor editor.on('change', () => { view.value = editor.getValue(); }); return view; } \`\`\`
You can insert the code that should appear in the editor in the variable \`codigoinicial\` of this code, and if you want to keep the editor empty, just put \`codigoinicial = "";\` in it.

The variable \`\`CodigoViaAce\`\` receives, as a \`\`String\`\`, what is typed in the editor, and the instruction \`\`viewof\`\` that precedes it, causes that it is monitored at all times, so that your changes are applied in all other places where it is called in the document.

You can exchange the variable \`\`CodigoViaAce\`\` for others of your choice, and you can create several ACE instances on the same page, assigning the codes entered in each editor to different variables.

By placing these variables as the \`\`c\`\` of \`\`processing(c,e)\`\`, \`\`p5(c,e)\`\` or \`\`pythonProcessing(c,e)\`\`, you can run several new sketches in the document, all of which can be modified, in real time, by independent ACE editors.

The editor's own settings can be changed in this code snippet: \`\`\`json { theme: "ace/theme/tomorrow", selectionStyle: "text", highlightActiveLine: false, mode: "ace/mode/javascript", enableBasicAutocompletion: true, enableLiveAutocompletion: true, enableSnippets: true, showGutter: false } \`\`\` Changing the parameter \`\`showGutter\`\` to \`\`true\`\` will bring the editor a bar with linting (error indication in the code) in real time, for example. All ACE configuration parameters [can be found here](https://github.com/ajaxorg/ace/wiki/Configuring-Ace). You can use [this tool](https://ace.c9.io/build/kitchen-sink.html) to see the great diversity of changes that can be made to it.

The editor can also be used in *read only*, mode, just to display code (as is normally done by MarkDown with the code marker). `