想做一个Task list清单,但Jekyll自带的markdown: redcarpet不支持Checkbox

翻看网上各种办法.其实(issues)中的解决办法很好,但是没被redcarpet的开发者收录, 那就从content的输出结果中去replace <li>[ ]和<li>[x]

{{ content | replace: '<li>[ ]', '<li class="check-none">' | replace: '<li>[x]', '<li class="check-done">'}}

我套用Font-Awesome的样式做出了一个还不错的TaskList:

{{ content | replace: '<li>[ ]', '<li><i class="fa fa-square-o"></i>' | replace: '<li>[]', '<li><i class="fa fa-square-o"></i>' | replace: '<li>[x]', '<li><i class="fa fa-check-square-o"></i>' | replace: '<li>[X]', '<li><i class="fa fa-check-square-o"></i>'  }}

<i class="fa fa-square-o"></i> <i class="fa fa-check-square-o"></i>

Example:

• done
• plan 1
  • plan 2 done
  • plan 3
  • plan 4 done
• [] Plan 5
• Plan 6 done
• this is still to do

Posted in Jekyll with tags: Checkbox, Jekyll, redcarpet, Font-Awesome