Task lists not rendering as expected when converting from Djot to HTML #31
Comments
|
https://djot.net/playground/?text=-+%5B+%5D+unchecked%0A-+%5BX%5D+checked%0A Yes, we just generate 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:
|
|
Pandoc does: with |
|
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;
} |
|
Nice, glad to see it works there, hopefully it can be included in the CLI version of Djot.
Sendt fra min Mac Mini via Apple Mail
… Den 9. jan. 2023 kl. 18.38 skrev John MacFarlane ***@***.***>:
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;
}
—
Reply to this email directly, view it on GitHub <#31 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AGGLXRT5NIMPX7LOBSJHJEDWRREIPANCNFSM6AAAAAATVMXSJ4>.
You are receiving this because you authored the thread.
|
|
See #33. |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
The text was updated successfully, but these errors were encountered: