<juicy-ace-editor>

Even more embeddable code editor. Custom Element - just one tag, and no JS needed to provide Ace - The High Performance Code Editor

Here you have: 

<juicy-ace-editor theme="ace/theme/monokai" mode="ace/mode/html">
<juicy-ace-editor>
element.

You can switch modes and themes as regular HTML attributes to whatever is supported by Ace

<p>Here you have: <pre>&lt;juicy-ace-editor theme="ace/theme/monokai" mode="ace/mode/html"&gt; &lt;/juicy-ace-editor&gt;</pre>element. </p> <p> You can switch modes and themes as regular HTML attributes to <a href="https://github.com/ajaxorg/ace-builds/tree/master/src"> whatever is supported by Ace </a> </p>

Ok, in fact you have seen 

<juicy-ace-editor theme="ace/theme/monokai" mode="ace/mode/html">&lt;p&gt;Here you have:..

Looking for a more full-featured demo? Check out the kitchen sink.