Render the example helpful tip properly.

docs/contributing/docs_style_guide.md

@@ -10,9 +10,20 @@
 - Use `-` instead of `*` for bulleted lists.
 - Upload images to the 'assets' folder and reference them from there. 
    -- For file name, use underscores between words and prefix all file names with the page name, e.g. context_display_hints.jpg for the image showing how to set display hints in the context menu.
-- Use `!!! note  "Note title"` at the start of a paragraph to have it rendered as a note like this:
+- Use the [Admonition syntax](https://squidfunk.github.io/mkdocs-material/reference/admonitions/) to create notes like this:
+
+_Example:_
+
+```
+!!! note "Helpful Tip" 
+  I am a helpful tip!
+```
+
+_Result:_
+
+!!! note "Helpful Tip" 
+  I am a helpful tip!
 
-!!! note "Helpful Tip" I am a helpful tip!
 
 ## Don'ts