| tags: [ To-do list ] categories: [To-do ]

Setting up some to-do lists

Markdown checkboxes

We can create to-do lists for specific days/projects/assignments etc, here’s an example:

  • [x] Learn about RMarkdown
  • [x] Set up an electronic lab notebook
  • [ ] Perform a simple regression
  • [ ] Load some data and clean it

… and the Markdown that creates this:

- [x] Learn about RMarkdown
- [x] Set up an electronic lab notebook
- [ ] Perform a simple regression
- [ ] Load some data and clean it

HTML checkboxes

It seems that when using Netlify to host the notebook the checkboxes don’t display, this will be due to the ‘flavour’ of markdown used. As far as I’m aware only GitHub flavoured markdown supports checkboxes natively. A workaround is to use a little bit of HTML:

My to-do list:

Learn about RMarkdown
Set up an electronic lab notebook
Perform a simple regression
Load some data and clean it
Add a working checkbox example

… and the code for this:

<input id="checkBox" type="checkbox" checked> Learn about RMarkdown  
<input id="checkBox" type="checkbox" checked> Set up an electronic lab notebook  
<input id="checkBox" type="checkbox" checked> Perform a simple regression  
<input id="checkBox" type="checkbox"> Load some data and clean it  
<input id="checkBox" type="checkbox" checked> Add a working checkbox example 

So not as simple as markdown but it works.

We can also use a little more HTML and inline css to create nested checkboxes:

  • Learn about RMarkdown
    • Set up an electronic lab notebook
    • Add a working checkbox example
  • Perform a simple regression
  • Load some data and clean it
    • learn about tidy data
    • install tidyverse package

… and the code:

<ul style="list-style: none;">  
 <li> <input id="checkBox" type="checkbox" checked> Learn about RMarkdown</li>
  <ul style="list-style: none;">  
   <li> <input id="checkBox" type="checkbox" checked> Set up an electronic lab notebook</li>
   <li> <input id="checkBox" type="checkbox" checked> Add a working checkbox example</li>
  </ul>
 <li> <input id="checkBox" type="checkbox" checked> Perform a simple regression</li>
 <li> <input id="checkBox" type="checkbox"> Load some data and clean it </li>
  <ul style="list-style: none;">  
   <li> <input id="checkBox" type="checkbox"> learn about tidy data</li>
   <li> <input id="checkBox" type="checkbox"> install tidyverse package</li>
  </ul>
</ul>