code

An ACE Editor wrapper.

Sometimes, it's nice to be able to just toss a code-editor in a web-page.

<tosi-code>'s value is the code it contains. Its mode attribute sets the language, and you can further configure the ACE editor instance via its options property.

<tosi-code style="width: 100%; height: 100%" mode="css">
body {
  box-sizing: border-box;
}
</tosi-code>

The <tosi-code> element has an editor property that gives you its ACE editor instance, and an ace property that returns the ace module, giving you complete access to the Ace API.