A better formatting help

Question

Some people is not able to understand the key concepts of formatting in SO (and all other sites).
I would suggest to improve the default formatting help with some features, like:

1. Explain the basic concept of formatting. Something like:

   When you make posts, you are given a text area in which you write plain, unformatted text.
   Below this area is a dotted frame. It shows how will your post look when you submit it.

   Start by writing some text. You will see how the frame updates to reflect the changes.
   Now, let's go further. Formatting your posts is easy!

2. Then, teach the user with some basic examples:

   We'll start with something simple. Imagine you want to highlight some words of your message.
   Write the following text in the source area:

   The last word of this message is **highlighted**.

   Then look at the preview. Voila! The word between ** and ** is highlighted in bold.
   Similary, to put some text in italic, write it between _ and _.

3. Go further with the code blocks, code snaps and quotes.

4. Refer a link to the original formatting help page for more advanced info,
   and include images showing the process.

Answer 1

I think it would help a lot more if there's some header like Question Preview on top of the preview area so that it's more clear to them what it represents. If necessary with a thiny footer like

_{If your code does not appear correctly in preview, ensure that you have applied code formatting [insert detailed explanation]}.

Apply this on both the Ask Question and Edit screens.