Interactive Tangle-like markdown documents

[jqhoogland]

A few years ago, Bret Victor had a really good idea about interactive documents.

Here's a sample (see also the dynamic original):
`

By clicking and dragging the items in green, you update the resulting figures in blue.
Sort of like a lightweight Jupyter/R/Wolfram/Observable notebook with inline inputs and calculations.

Victor published a little vanilla JS library of his own to help people implement this: Tangle. The problem is that it still requires you to write raw HTML+JS if you want to integrate it.

So after Victor's proposal, a few people went ahead and came up with markdown extensions to make writing these interactive documents easier: TangleDown, Fangle, Active Markdown, and Dynamic Markdown.

These all have some merits, but none are quite complete:

• Fangle has a pretty inscrutable syntax.
• Active & Dynamic markdown lack support for inline computations.
• None of them are backwards compatible with standard Markdown (which I find rather important when there is such an overgrowth in Markdown extensions).
• Most of all, they are self-standing processors rather than a plugin for an existing processor like remark. That makes it more difficult for other people to use.

So I'd like to write up a little plugin ("remark-tangle"?) to make this a little more accessible.

EDIT: I think something like remark-directive is probably the best way forward.

One example would be:

• To define a numeric input: :t[50. cal.]{calories_per_cookie=[0..200;10]}
  • Range: 0 to 200 (inclusive) with step size 10.
  • Default value: 50
  • Display template %.0f cal. (determined automatically from 50 cal.
• To define the result of a calculation: :t[150. cal.](calories=3*calories_per_cookie)
• To reference existing variables: :t[%.0f cal]{calories_per_cookie}

[jqhoogland]

Alright, I've thrown together an alpha version.

It takes something like this:

When you eat :t[3 cookies]{cookies=[0..100]}, you consume **:t[150 calories]{calories}**. 
That's :t[percent]{daily_percent margin-right=0.5ch} of your recommended daily calories.

- ::t[3 cookies]{cookies}
- ::t[50 calories]{calories_per_cookie=[10..100;5]}
- ::t[150 calories]{calories=calories_per_cookie*cookies}
- ::t[2000 calories]{calories_per_day=[0..10000;100]}
- ::t[percent]{daily_percent=calories/calories_per_day}

and returns something like this:

You just run the plugin after remark-directive and you're good to go.

More to come.