Blogger: Creating lists or indented text within ordered lists optionally with additional text after nested list by using VSCode HTML editing

Creating lists or indented text within ordered lists in Blogger optionally with additional text after nested list, is a problem in Blogger Compose UI. It breaks the top-level ordered list into multiple ordered lists which restart from 1. Fixing that requires getting into HTML mode in Blogger where the code is not formatted and so not-so-easy to modify.

Copy-pasting HTML code from Blogger to an html file that is then opened in Visual Studio Code, followed by save to invoke Prettier, does a great job in formatting the code and making it easier to modify. The code can be rendered in a browser to check if it is rendering well.

Another issue is including source code snippets within an ordered list item. Blogger uses Blockquote. I think Pre is better.

Overall, I think for such cases, it may be good to do the HTML in Visual Studio Code and then copy-paste into an empty Blogger post in HTML mode. An alternative is to use a mix of Compose in Blogger and VSCode HTML editing.

I faced all the problems mentioned above today when I was creating the post: Notes on creating Node Express & MongoDB (simple) Blog API and refactoring React tutorial Blog App to use it . Blogger did a poor job with Compose for these issues. I then copy-pasted the HTML from Blogger to a file which I then edited using VSCode. I was able to get the display/rendering that I needed.

HTML code for the post (Blogger edit post data)