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); } \`; // Instanciando o 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 } ); // Captura o valor inicial view.value = editor.getValue(); // Reage a qualquer mudança feita no editor editor.on('change', () => { view.value = editor.getValue(); }); return view; } \`\`\`
Você pode inserir o código que deverá aparecer no editor na variável \`codigoinicial\` deste código, e se quiser manter o editor vazio, basta colocar \`codigoinicial = "";\` nele.

A variável \`\`CodigoViaAce\`\` recebe, como uma \`\`String\`\`, o que estiver digitado no editor, e a instrução \`\`viewof\`\` que a precede, faz com que ela seja monitorada o tempo inteiro, para que suas modificações sejam aplicadas em todos os outros lugares onde ela é chamada no documento.

Você pode trocar a variável \`\`CodigoViaAce\`\` por outras de sua preferência, e pode criar diversas instâncias ACE em uma mesma página, atribuíndo os códigos digitados em cada editor à variáveis diferentes.

Ao colocar estas variáveis como o valor \`\`c\`\` de \`\`processing(c,e)\`\`, \`\`p5(c,e)\`\` ou \`\`pythonProcessing(c,e)\`\`, você poderá rodar vários sketchs novos no documento, todos podendo ser modificados, em tempo real, por editores ACE independentes.

As configurações do próprio editor podem ser alteradas neste trecho do código: \`\`\`json { theme: "ace/theme/tomorrow", selectionStyle: "text", highlightActiveLine: false, mode: "ace/mode/javascript", enableBasicAutocompletion: true, enableLiveAutocompletion: true, enableSnippets: true, showGutter: false } \`\`\` Alterar o parâmetro \`\`showGutter\`\` para \`\`true\`\` trará para o editor uma barra com linting (indicação de erros no código) em tempo real, por exemplo. Todos os parâmetros de configuração do ACE [podem ser consultados aqui](https://github.com/ajaxorg/ace/wiki/Configuring-Ace). É possível utilizar [esta ferramenta](https://ace.c9.io/build/kitchen-sink.html) para ver a grande diversidade de modificações que podem ser feitas nele.

O editor também pode ser utilizado no modo *read only*, apenas para exibir código (como é feito normalmente por MarkDown com o marcador de código). `