In a post of my blog there’s an ordered list with excessive vertical space between two consecutive items, the second of which has a code block. Here’s what the list looks like in the post:
Notice the vertical space between items 4. and 5. The relevant Markdown code is:
I went through the upgrade process Mr. Smith outlined and it worked, sort of. Here are the steps I took:
1. enable the flag `chrome://flags#crostini-bullseye-upgrade`
2. reboot Chrome OS
3. accept the prompt to upgrade to Bullseye
4. open the Terminal app
5. run the following shell commands:
```bash
$ sudo apt update
$ sudo apt full-upgrade -y
$ sudo apt -y autoremove
```
It might be a bug. I couldn’t see anything in CSS that was causing the extra white space. The only way I was able to take out the space was to use inline css for that specific list item.
If I’m not mistaken, you can have a post that is a combination of markdown and HTML. So, I think your best option right now is to use plain HTML for just the list in your post. By doing that, you can set specific CSS settings for the list items.
Sorry for the delay, @PaoloAmoroso. It looks like our Markdown parser doesn’t support block elements inside a list item very well. Looking at the HTML, the extra space is showing up because #5 is getting turned into a <p>, and a newline is getting generated before the <li>.
I can try to take a look at a fix soon, but another solution for now might be to un-indent the code block, so it’s not included with that list item.
No, there are no extra lines in between. When I edit the post, the spaces between lines actually appear close to normal, but after publishing it shows with the excessive spaces.
When using the Rich Editor, the result is double spacing after each item. The Rich Editor does not show a blank line between the items. When I switch to the Plain Editor, there is an additional line between the items. It looks well when I remove the additional lines and publish the article. When I switch the editor back to the Rich Editor and publish again, the extra lines are added. So it is a bug in the Rich Editor.
Yes: If you enter a numbered list in the Plain Editor and publish it, it’s fine. But if you then switch to the Rich Editor and back to Plain Editor there are extra blank lines between the list items, and if you publish, there is too much space between list items. And if you just enter the numbered list in the Rich Editor and publish from there, again there is too much space between items.
I tried to investigate and I see that this is indeed a bug on the parser. There’s a new line added before the list item which includes the code block. Definitely something to be fixed.
@PaoloAmoroso Meanwhile, I’ve come up with the following CSS which I think should fix the problem:
body #post article ol,
body #post article ul,
body#post article ol,
body#post article ul {
white-space: normal; /* ignore white-space inside child elements */
}
body #post article li + li,
body#post article li + li {
white-space: pre-wrap; /* re-enable white-space */
margin-block: 0;
margin-block-start: 1rem;
}
