# what is ready?

TIO integration has been [long promised](https://meta.stackoverflow.com/a/394474/12757754), and we think it makes a huge amount of sense on most of the technical communities here to have live code demos (like db<>fiddle on databases.ta). The essential work is done and you can now now embed live code from all [680](https://tio.run/#) of the supported languages.

We have some doubts about relying on an external service like this, so we've designed the feature so that:

1. posts continue to display unchanged if TIO is down, or disappears completely (only the live editing breaks)
1. we can easily switch to hosting our own instance of TIO
1. we could drop in our own replacement in the future

We also aren't sure if TIO will be happy about the load we put on their servers. We've tried to contact the creator of the site, but it may be some time before we get a response. I don't think this is an issue right now, but it might be in the future if we got a lot bigger.

# how do I use it?

We [settled on the backtick](/meta?q=975#a1179) as the one-boxing trigger character but decided to try to keep the distinction from markdown by dropping the 'fence' variant for multi-line code.

Some examples of the final syntax:

1. ```
   ` console.log('Hello');
   ```
  
1. ```
   `
   console.log('Hello');
   console.log('World');
   ```
  
1. ```
   ` javascript-v8
   console.log('Hello');
   console.log('World');
   ```
   
(1) and (2) will only work in a community with a default TIO language defined. That is (currently):

* web.ta (JavaScript)
* powershell.ta
* csharp.ta
* [cplusplus.ta](https://topanswers.xyz/cplusplus)

…otherwise you have to specify the TIO language and use the multiline form (3) above. The TIO language is from the list [on GitHub](https://github.com/TryItOnline/tryitonline/tree/master/wrappers) rather than the TIO homepage.

### does it only work in comments?

Unlike markdown, one-boxing only works in comments/chat. We are planning to add a toolbar button for adding any onebox, including TIO, to a post. Until then, there is a hacky way to embed in a post now, that works for any onebox: post it as a comment in [The Sandbox](/meta?room=741), and then edit the comment and copy the generated markdown into your post.

This:

```
` javascript-v8
console.log('Hello');
console.log('World');
```

one-boxes to this:

````
::: tio y0osSyxOLsosKNEts/j/Pzk/rzg/J1UvJz9dQ90jNScnX13TmgtFNDy/KCcFKPr/PwA
§§§ javascript javascript-v8
console.log('Hello');
console.log('World');
§§§
``` none
Hello
World
```
:::
````

which looks like this when embedded:

::: tio y0osSyxOLsosKNEts/j/Pzk/rzg/J1UvJz9dQ90jNScnX13TmgtFNDy/KCcFKPr/PwA
§§§ javascript javascript-v8
console.log('Hello');
console.log('World');
§§§
``` none
Hello
World
```
:::

### what still needs to be done?

1. the aforementioned toolbar button for embedding one-boxes in posts
1. default language variants, so ` ``` apl ` is an alias for ` ``` apl-dyalog `
1. a 'TIO language' to 'CodeMirror mode' mapping feature for the cases where the names are different (the current, automatic-only, mapping splits the TIO language name on `-` boundaries and assume the first token is the CodeMirror mode, which works for `apl-dyalog`->`apl` for example, but not `cs-core`->`text/x-csharp`)