0%

Interactive Markdown

介绍

Interactive Markdown是使用纯文本的Markdown格式来制作响应式交互文档的工具。响应式Markdown增加了特有的交互组件和变量的标记符号。

具体请参阅💁🏻‍♂️ 交互式Markdown文档参考手册 .

Status: Alpha Test

一个简单交互文档例子

一首童谣

要去 圣伊芙我碰到一个有 7 个老婆 的男人每个老婆有 7 个口袋每个口袋有 7 只🐈️猫咪每只🐈️猫有 7 套🛠️工具
🛠️工具, 🐈️猫咪, 口袋, 老婆问:有多少要去圣伊芙

total_sacks = @wives * @sacks
total_cats  = total_sacks * @cats
total_kits  = total_cats * @kits
man         = 1

if @travelers
    narrator = 2
else
    narrator = 1

这常常会首先猜测是 2753

@first_guess = man + @wives + total_cats + total_kits + narrator

…但实际正确答案是 1.

@answer = narrator

上面的这个互动例子的Markdown代码如下:

> [我]{travelers: 我们 or 我} 要去 *圣伊芙*
> 我碰到一个有 [7 个老婆]{wives: 1..10}  的男人
> 每个老婆有 [7 个口袋]{sacks: 1..10}
> 每个口袋有 [7 只🐈️猫咪]{cats: 1..10}
> 每只🐈️猫有 [7 套🛠️工具]{kits: 1..10}
> 🛠️工具, 🐈️猫咪, 口袋, 老婆
> 问:有多少要去*圣伊芙*?

    total_sacks = @wives * @sacks
    total_cats  = total_sacks * @cats
    total_kits  = total_cats * @kits
    man         = 1

    if @travelers
        narrator = 2
    else
        narrator = 1

这常常会首先猜测是 [2753]{first_guess}…

    @first_guess = man + @wives + total_cats + total_kits + narrator

…但实际正确答案是 **[1]{answer}**

    @answer = narrator
  • [我]{travelers: 我们 or 我} 是一个设置指定变量真假值的单选组件,
    • travelers 是变量名称,可以在代码块中用 @travelers 来使用该变量。
    • 第一个值为真值,第二个值为假值。
  • [7 个老婆]{wives: 1..10} 是一个滑块组件,值可以在指定范围内变化,这里是1-10之间,
    • wives是变量名称,可以在代码块中用 @wives 来使用该变量。

一个更复杂的交互文档例子

参数X 坐标:10Y 坐标:18宽:100高:50

接下来的例子演示如何使用Raphael动画库绘制一个方形,点击下方的play按钮开始

# demo how to draw a rect.
paper = @canvas

|
~~~
tooltip: set the canvas size:200X100 ::: Init
type:paper.setSize(200,100)\n
tooltip: clear canvas
type:paper.clear()\n
tooltip: init x/y coor, width/height parameters coming from document
type:@rx ||=10\n
type:@ry ||=18\n
type:@rw ||=100\n
type:@rh ||=50\n
tooltip: drawing rect nowing ::: Draw rect
type:rect = paper.rect(@rx, @ry, @rw, @rh)\n
tooltip: fill red for the rect
type:rect.attr('fill', 'red')
moveTo: 8:13
tooltip: you can try it by youself now

标记

交互元素的标记符号和markdown的链接和图像标记符号类似:

[text content]{variable_name: configuration}

具体请参阅💁🏻‍♂️ 交互式Markdown文档参考手册 .

作者

Credits

Thanks to J Voight, Alex Cabrera, John Debs, and Supriyo Sinha for help with the notation.

The concept and controls are heavily influenced by Bret Victor’s Tangle library for creating reactive documents.

License

MIT