Way of switching between YAML and JSON in README and docs

[simonw]

For example on https://datasette.io/plugins/datasette-init I would like a JSON/YAML toggle on this example:

I'd like this in the docs too, like on https://docs.datasette.io/en/stable/metadata.html

[simonw]

I think the best way to do this is to have all of the examples in YAML (since that can be formatted in different ways) and then provide JavaScript that can read that YAML and convert it to pretty-printed JSON.

[simonw]

This works, using https://www.npmjs.com/package/yaml

<script type="module">
import yaml from 'https://cdn.skypack.dev/yaml';
console.log(yaml.parse("foo: bar"));
</script>

It's a little bit heavy though - 63.9KB transferred:

[simonw]

Using https://cdn.skypack.dev/yaml?min is a bit lighter: 47.12KB transferred total:

[simonw]

In Firefox DevTools I had to use:

const yaml = await import('https://cdn.skypack.dev/yaml');
yaml.default.parse('foo: bar');