Skip to content

Instantly share code, notes, and snippets.

@alecperkins
Last active December 15, 2015 01:49
Show Gist options
  • Save alecperkins/5182626 to your computer and use it in GitHub Desktop.
Save alecperkins/5182626 to your computer and use it in GitHub Desktop.
Active Markdown notation

String

A read-only output of the current value of the specified variable <var_name>. The text is the default value, though it will be replaced when the HTML version loads.

[<text>]{<var_name>}

Numbers

A number adjustable by slider. The number MAY have a display precision specified. The slider can be set to a minimum and/or maximum, and have a step value. The text is parsed, and the first number in the text becomes the output value. The remaining text is added to the template, allowing for units and other descriptive text to be included in the control.

A range MUST be specified, but MAY be infinite in both directions. The range is specified using the CoffeeScript-style dots, where .. is inclusive and ... excludes the end. ie, [1..4] is the range 1 <= n <= 4, while [1...4] is 1 <= n < 4.

Specifying a display precision MAY be done using the default number value in the text. 200. formats to 0 decimal places. 200.000 formats to 3 decimals. If not specified, the value is unformatted.

Numbers MAY use the constants in Math and combine them with a coefficient, eg 2pi or 0.5pi, which is treated as n * Math.PI. This can be done in the range min or max, or in the step. The constants MUST be one of e, pi, ln2, ln10, log2e, log10e, sqrt1_2, sqrt2, (uppercase or lowercase).

[* <number>.<decimal*> *]{<var_name> [<min>..<exclusive><max>] by <step>}
  • Number, precision of 1, slider step by 10, "#{value.toFixed(0)} calories"

      [200. calories]{calories [10..100] by 10}
    
  • Number, precision of 0.1, slider step by 0.1, "#{value.toFixed(1) calories"

      [200.0 calories]{calories [10..100] by 0.1}
    
  • Number, no precision, slider step by 1, no slider max, "#{value} calories"

      [200 calories]{calories [0..]}
    
  • Number, no precision, slider step by 1, no min/max, "over #{value} calories"

      [over 200 calories]{calories [..]}
    

Boolean

A boolean flag that has a value of true, false, or undefined. The true and false values can be labeled. If the label is present in the text, that value becomes the default value. Otherwise, the value is undefined. and the text becomes a control label.

[* <true_label or false_label or *> *]{<var_name> <true_label> or <false_label>}
  • Boolean,"#{value}", default = undefined

      [pick one]{some_flag true or false}
    
  • Boolean,"#{value}", default = true

      [true]{some_flag true or false}
    
  • Boolean, true label = "on", false label = "off", "#{label} deck"

      [on deck]{some_flag on or off}
    

Choice

A choice between an arbitrary list of values. The options are specified in a comma-separated list (in-value spaces permitted). If one of the choices is found in the text, it is treated as the default value, and the remaining text becomes a template. Otherwise, the default value is undefined and the entire text becomes a control label.

[* choice *]{<var_name> [<choice 1>,<choice 2>,<choice 3>,...]}
  • String select field, "before #{value} after"

      [before alpha after]{option_picked [alpha,bravo,charlie,delta,echo]}
    

Graph

Graphs specify one or more functions that are given an x value and MUST return a y value. Each function creates a separate series. The graph type defaults to scatter, and is specified after the functions. It MUST be one of scatter, line, bar. The x range MUST be finite.

![<graph_title>]{<graph_type>=<graph_function1>,<graph_type>=<graph_function2>,... <x_range>}
  • Scatter graph titled "Graph Title" of graphFn(x) from -10 to 10. (scatter is default, but MAY be specified.)

      ![Graph Title]{graphFn x=[-10..10]}
      ![Graph Title]{scatter=graphFn x=[-10..10]}
    
  • Line graph titled "sin of x" of Math.sin(x) from -2pi to 2pi.

      ![sin *of* x]{line=Math.sin x=[-2pi..2pi] by 0.25pi}
    
  • Scatter graph titled "Graph Title" of graphFn(x) and otherFn(x) from -10 to 10. Multiple series (each series as a function in a comma-separated list).

      ![Graph Title]{bar=graphFn,line=otherFn x=[-10..10]}
    

Visualization

  • Create a blank <canvas> and give it to a function for drawing. This requires the in-page code to do more work, but allows for free-form vizualizations using helpers for things like processing.js.

      ![Visualization title]{hookToProcessing viz}
    
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment