Skip to content

0008.a.md

Latest commit

 

History

History
56 lines (41 loc) · 2.21 KB

0008.a.md

File metadata and controls

56 lines (41 loc) · 2.21 KB
Raw

Let me explain how Grip handles GitHub-style task lists by analyzing the test files and HTML output structure:

The input Markdown for nested task lists looks like this:

- [ ] a bigger project
  - [x] first subtask #1234
  - [ ] follow up subtask #4321
  - [ ] final subtask cc @mention
- [x] a separate task

Grip generates specific HTML structure for these task lists, as shown in the test output:

<ul class="task-list">
<li class="task-list-item">
<input type="checkbox" class="task-list-item-checkbox" disabled> a bigger project

The key elements of the HTML structure are:

  1. Task lists get the class task-list
  2. Each list item gets the class task-list-item
  3. Checkboxes are rendered as input elements with:
    • type="checkbox"
    • class="task-list-item-checkbox"
    • disabled attribute
    • checked attribute for completed tasks

For nested lists, Grip maintains the hierarchy by:

<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox"> a bigger project
<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> first subtask #1234</li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox"> follow up subtask #4321</li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox"> final subtask cc @mention</li>
</ul>
</li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> a separate task</li>

This shows that:

  1. The parent list contains the nested list within its li element
  2. The nested list maintains all the same task list classes and structure
  3. Each level preserves the checkbox state (checked/unchecked)
  4. References like #1234 and @mention are properly linked in the HTML output

This implementation matches GitHub's own rendering of task lists, ensuring compatibility and consistent appearance when viewing markdown files either on GitHub or through Grip's local preview.