When I start using Jekyll, I typed “- [ ] todo” to add a todo list item. But it is not rendered. OK, I understand, it is not a standard markdown syntax. I tried to tune the settings of Jekyll’s markdown engine, kramdown, but with no luck.

So I chose another way.

The filters of Liquid template is very versatile.

{{ content }} is the output syntax from Liquid template, which prints the post’s content rendered from markdown file. After | symbol comes the replace filter. It will replace list item starts with [ ] with special classes and an checkbox element. Similar procedure for the [x], and replace it with done-list-item.

_layouts/post.html

<div class="post-content markdown-body" itemprop="articleBody">
    {{ content | replace: '<li>[ ]', 
        '<li class="box task-list-item">
        <input type="checkbox" class="task-list-item-checkbox" disabled>' | 
    replace: '<li>[x]', 
        '<li class="box_done task-list-item">
        <input type="checkbox" class="task-list-item-checkbox" value="on" disabled checked>'  }}
  </div>

Next, let’s add the corresponding styles for the checkbox. I chose to add an additional scss file, because I want to keep the original stylesheet as it is for the moment. In your case, you can simply add this to the _sass/_base.scss

css/main.scss

// Import partials from `sass_dir` (defaults to `_sass`)
@import
        "base",
        "layout",
        "syntax-highlighting",
        "custom-styles" // add this line
;

_sass/_custom-styles.scss

// styles for checkbox
.box,
.box_done,
.task-list-item {
    list-style-type: none;
}

.task-list-item input {
  margin: 0 0.2em 0.25em -1.6em;
  vertical-align: middle;
}

.task-list-item+.task-list-item {
  margin-top: 3px;
}

Let’s Try It

Markdown


- [ ] First todo item.
- [x] Write a blog for adding github checkbox feature.

Output

  • First todo item.
  • Write a blog for adding github checkbox feature.

Awesome, Thank You

Nice job. See you in next one.


Customization To-do list:

  • Permalink: should I contain dates in the URL?
  • Fix fenced code block nested in un/ordered lists
  • Fix the Checkbox
  • Add images with captions to my post
  • Add comments functionality
  • Change a Theme
  • Adding a Navigation
  • Change the code highlighting theme
  • Custom 404 page
  • Create _pages folder for all your pages
  • Add tags to post
  • Change the About page
  • Multilingual?
  • Add search functionality