Writing Markdown

Doodl uses pandoc internally to turn Markdown into HTML, which it then processes to do its magic. This means that anything that is valid in Pandoc as an HTML generator is valid in doodl.

Doodl adds two kinds of special tags to Markdown/HTML. First there's the <sidenote> tag. Anything enclosed in these tags will generate a numbered side note in the wide margin as close as possible to the note number in the main text. Here's an example of one:

html

<sidenote>
I'm a side note! Use me for commentary, links, bits of
maths, anything that's peripheral to the main discussion.
</sidenote>.

You can easily add images to the side notes and margin notes just by including the usual markdown syntax for inserting an image.¹1. The syntax is ![alt text](filename) within the tags.

Then there is a <marginnote> tag which is the nearly the same as the side note, only there's no number linking it to a particular part in the main text. You'll see to the right an example of a margin note containing a d3 donut chart. An example of margin note containing a donut plot. Because a tooltip is available we can create a less cluttered chart with labels for the smaller segments demoted to the tooltip.

Including d3 charts in a doodl document is very easy. The only this required a source of data, the format of which depends on the type of chart. For example this chart was generated using:

html

<piechart
    data='[
      {"label": "Apples", "value": 10},
      {"label": "Bananas", "value": 20},
      {"label": "Cherries", "value": 15},
      {"label": "Grapes", "value": 25}
    ]'
    donut=1
>
</piechart>

An alternative for this and all charts is to option the data from a file, like this:

html

<piechart
    path="data/fruit.json"
    format="json"
    donut=1
>
</piechart>

where fruit.json contains:

json

[
  {"label": "Apples", "value": 10},
  {"label": "Bananas", "value": 20},
  {"label": "Cherries", "value": 15},
  {"label": "Grapes", "value": 25}
]

The standard arguments are described in the charts section. Chart-specific arguments (as well as the data required by each chart type) are described in the writeups for each chart.

Writing Markdown ​

Writing Markdown