Rendering of task list and mixed lists broken

[askmrsinh]

I was trying out the theme and it looks great! However, Task List and Mixed Lists are not rendered as expected.

https://github.com/facelessuser/MarkdownPreview/blob/master/examples/test.md#task-list

Task List

- [X] item 1
    * [X] item A
    * [ ] item B
        more text
        + [x] item a
        + [ ] item b
        + [x] item c
    * [X] item C
- [ ] item 2
- [ ] item 3

https://github.com/facelessuser/MarkdownPreview/blob/master/examples/test.md#mixed-lists

Mixed Lists

- item 1
    * [X] item A
    * [ ] item B
        more text
        1. item a
        2. itemb
        3. item c
    * [X] item C
- item 2
- item 3

Really Mixed Lists

- item 1
    * [X] item A
    - item B
        more text
        1. item a
        + itemb
        + [ ] item c
    3. item C
2. item 2
- [X] item 3

This is my 1st time playing around with hugo. If I am missing something, please do let me know.

[MunifTanjim]

@user501254 Thanks for reporting this.

The Task List style should be fixed now.

But because of how Hugo renders the HTML for Mixed List, that can't fixed right now.

[askmrsinh]

Cool! I was trying out some more hugo themes and came across this https://blog.olowolo.com/example-site/post/even-preview/#mixed-lists.

As you can see, the rendering is proper (just like on GitHub).

Not sure if it's the work of CSS/JS. As far as I know, unlike jekyll, the markdown renderer can not be changed in hugo.

[MunifTanjim]

As you can see, the rendering is proper (just like on GitHub).

It'll be the same for Minimo. But it's not proper. You notice the unordered items don't have any black dots before them in Mixed Lists (https://blog.olowolo.com/example-site/post/even-preview/#mixed-lists)?

[askmrsinh]

In case of the other theme, the bullets are missing because it's being hid on purpose through CSS in the theme's _content.scss.

.post .post-content .task-list {
    list-style: none;
    padding-left: 1.5rem;
}

If I comment out the list-style: none above, this is the result:

But doing so results in bullets appearing even with flat un-nested task-lists and probably was the reason for inclusion in the first place.

Further I noticed that the theme's nested lists do not have varying bullet styles (list-style) at each level (like GitHub does). So it's not "just like on GitHub". Hugo will add the class .task-list to any parent/top-level list that has a nested task items. Whereas this is not the case with GitHub rendered markdown .contains-task-list class, which is added at inner levels only. I understand that this difference makes styling difficult.

Anyways, the commit 80b77be, gets very close to how the other theme renders mixed list, except for one minor hiccup (number overlaps with the checkbox and same list levels are not aligned, eg. item 1,2,3 below):

Commenting out https://github.com/MunifTanjim/minimo/blob/80b77beed44b06accb600ed02e0c2ca99dfda346/src/stylesheets/elements/_lists.scss#L17 works better ~without any visible regression~ (leads to some alignment issues).

[askmrsinh]

Also, It would look better if the margins can be tweaked a little bit around https://github.com/MunifTanjim/minimo/blob/80b77beed44b06accb600ed02e0c2ca99dfda346/src/stylesheets/elements/_lists.scss#L22-L26

Let me know in case you need a PR.

[MunifTanjim]

A lots of what you wrote is describing the following statement that I made earlier:

"But because of how Hugo renders the HTML for Mixed List, that can't fixed right now."

You can open an issue on gohugoio/hugo with your findings about this. Because it has to be fixed there.

Further I noticed that the theme's nested lists do not have varying bullet styles (list-style) at each level (like GitHub does). So it's not "just like on GitHub".

That shouldn't be the case. There is no specific styles about the bullet styles. The browser should decide which style to use for each nested levels.

It would look better if the margins can be tweaked a little bit around.

Well, "better" is a subjective thing. What works well in one situation, might not work the same in others. If you need to tweak some minor styles to suit your needs, you can always use the customCSS option (https://github.com/MunifTanjim/minimo/blob/01a20d7f9b7f43c8eae667b49974ac6f2f0794d3/exampleSite/config.toml#L30) to do that.

Let me know in case you need a PR.

If you find something broken or want to add a feature, you are always welcome to open Issues and Pull Requests.

[askmrsinh]

Thanks for you prompt response and feedback. I have settled on using custom styles. Might report it upstream as well.