Task lists not rendering as expected when converting from Djot to HTML
Closed this issue · 7 comments
When making a task list in Djot and converting it via djot.js the task list items are not rendered. It turns out that for this to work an standalone HTML-document must be presented.
Steps to reproduce:
Make a task list like.
- [ ] This is not a task well done.
- [ ] - [x] This task is done now.
- [ ] ```
Try to convert via djot like
djot -f djot -t html list.dj > list-converted.html
Open the HTML-document and you will find that the task list items did not render as expected.
This was tested on: Version 0.2.0
https://djot.net/playground/?text=-+%5B+%5D+unchecked%0A-+%5BX%5D+checked%0A
Yes, we just generate
<ul class="task-list">
<li class="unchecked">
</li>
<li class="checked">
</li>
</ul>
which will require some CSS to render properly. At the very least, we should write the appropriate CSS, put it in the documentation, and put it on the playground's style sheet!
Testing what GitHub does:
-
unchecked
-
checked
continued
Pandoc does:
<ul class="task-list">
<li><input type="checkbox" disabled="" />unchecked</li>
<li><input type="checkbox" disabled="" checked="" />checked</li>
</ul>
with
ul.task-list{list-style: none;}
ul.task-list li input[type="checkbox"] {
width: 0.8em;
margin: 0 0.8em 0.2em -1.6em;
vertical-align: middle;
}
I think my original intent was to do a pure CSS implementation, but I have no idea what I had in mind specifically.
Proof of concept for pure CSS approach:
<!DOCTYPE html>
<meta charset="UTF-8">
<style>
ul.task-list {
list-style: none;
}
ul.task-list > li {
margin-left: 1.5em;
}
li.checked:before {
content: "☑";
margin-left: -1.5em;
float: left;
}
li.unchecked:before {
content: "☐";
margin-left: -1.5em;
float: left;
}
</style>
<ul class="task-list">
<li class="unchecked">
simple item with no p tag
</li>
<li class="checked">
<p>two</p>
<p>paragraphs</p>
</li>
<li class="checked">
<pre><code>some
code</code></pre>
</li>
</ul>OK, I've updated the playground with this CSS:
ul.task-list {
list-style: none;
padding-left: 0.5em;
}
ul.task-list > li {
margin-left: 1.5em;
padding-left: 0;
}
li.checked:before {
content: "☒";
margin-left: -1.5em;
float: left;
}
li.unchecked:before {
content: "☐";
margin-left: -1.5em;
float: left;
}