Is there any note taking editor that has HTML preview editing feature?

Question

I am looking for a tool to take notes in HTML format easily with HTML preview editing feature. I have been using Markdown and AsciiDoc for 2 years, and I am thinking about migrating to HTML markup format. But I don't want to think about styling and organizing HTML when I am taking notes because doing that will waste my time.

I need the following features:

• Live editing on visual preview⁽¹⁾
• Adding code blocks from the menu with one click⁽²⁾
• Adding images from the menu with one click⁽³⁾
• Adding admonition note blocks⁽⁴⁾

I have done research on conventional note-taking apps such as Evernote and OneNote, but I have not found one with HTML preview editing feature. I have tried webpage building tools such as Adobe Dreamweaver that have HTML preview feature but they don't have the other features [(2),(3),(4)] that I need.

Answer 1

Not at the time the question was asked, but Obsidian now comes close. It doesn't operate on a "menu" concept, but I'm not sure what a "one-click" would look like anyway for those types of operations.

It's primarily a Markdown editor, but Markdown supports HTML as well, of course. It has a "live preview" mode (the default) which places you in Editing mode when you the cursor is directly in the area being edited, but the rest of the document is in Preview. As soon as you move the cursor out of a paragraph/element, it will return to Preview.

The "menu" (command palette) is accessed with Ctrl+P by default, and attachments (images), callouts (admonitions), and code-blocks can all be inserted directly from there.

Answer 2

I think Dreamweaver has the feature like Live to edit on visual preview.
Adding code blocks from the menu with one click.
Adding images from the menu with one click.

As I have used it a lot