Bonito.jl icon indicating copy to clipboard operation
Bonito.jl copied to clipboard

rendering of markdown lists is broken

Open Krastanov opened this issue 2 years ago • 4 comments

I have the following markdown page:

landing = App() do
    content = md"""
    - this should
    - be a normal
    - bullet list
    """
    return DOM.div(JSServe.MarkdownCSS, JSServe.Styling, content)
end;

Instead of rendering as a bullet list, the rendering is broken:

image

Here is the HTML that JSServe generated:

image

If I delete list-style: inside; from the style attribute, things work fine.

Krastanov avatar Jul 22 '23 23:07 Krastanov

Is there a way for me to tell JSServe to not include the list-style: inside;?

Krastanov avatar Jul 22 '23 23:07 Krastanov

I am currently using a manually added JSServe.DOM.style("ul {list-style: circle !important;}") as a hacky workaround.

Krastanov avatar Jul 23 '23 00:07 Krastanov

I am currently using a manually added JSServe.DOM.style("ul {list-style: circle !important;}") as a hacky workaround.

I have the same issue. But it seems not work for Bonito.jl, with Bonito.DOM.style("ul {list-style: circle !important;}").

kongdd avatar Jan 05 '24 04:01 kongdd

This should work:

landing = App() do
    content = md"""
    - this should
    # - be a normal
    - bullet list
    """
    style = DOM.style("""
        li > p {
            display: inline;
        }
    """)
    return DOM.div(Bonito.MarkdownCSS, style, content)
end

We need to re-evaluate why the ul needs the inline style... I know I fixed some annoying issue with that some time ago, but not 100% sure if there aren't better work arounds.

SimonDanisch avatar Jan 05 '24 08:01 SimonDanisch