Live user input for variable interpolation in code snippets

[Blargian]

Background

Sometimes in tutorials the user is asked to create their own GCS or S3 bucket. As the resource ids need to be unique, the writer ends up writing something like:

Substitute your own bucket URI with `<bucket-uri>` below:

\```sql
EXPORT DATA
  OPTIONS (
	uri = '<bucket-uri>/stackoverflow/posthistory/*.parquet',
	format = 'Parquet',
	overwrite = true
AS (
  SELECT *
  FROM stackoverflow.posthistory
);
\```

In the example above this is not a huge inconvenience to the reader, but if we imagine that there are 10 export statements rather than just a single one, it means that the user has to copy-paste their own value 10 times, which could be annoying.

Proposal

I propose adding the ability to accept live user input for variable interpolation in code blocks. It might look something like this:

1. The writer defines an MDX component on the page like . This renders as a form which the user can write in.
2. The writer adds the form id to the code snippet:

Substitute your own bucket URI in the form below:

<Form id="bucket-uri"></Form>

Now copy the code below and paste it into your editor:

\```sql var="bucket-uri"
EXPORT DATA
  OPTIONS (
	uri = '<bucket-uri>/stackoverflow/posthistory/*.parquet',
	format = 'Parquet',
	overwrite = true
AS (
  SELECT *
  FROM stackoverflow.posthistory
);
\```

The result will be that as the user updates the form value, the code block will substitute their text everywhere it finds a matching var marker inside <> markers. Some thought would have to be given to what these markers should be, so that it is not something encountered in the code itself.