feat(create-docusaurus): update init template to .mdx extension and strict MDX syntax (#11897)

packages/create-docusaurus/templates/shared/blog/2019-05-28-first-blog-post.mdx

@@ -7,6 +7,6 @@ tags: [hola, docusaurus]
 
 Lorem ipsum dolor sit amet...
 
-<!-- truncate -->
+{/* truncate */}
 
 ...consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet

packages/create-docusaurus/templates/shared/blog/2019-05-29-long-blog-post.mdx

@@ -7,9 +7,9 @@ tags: [hello, docusaurus]
 
 This is the summary of a very long blog post,
 
-Use a `<!--` `truncate` `-->` comment to limit blog post size in the list view.
+Use a `{/*` `truncate` `*/}` comment to limit blog post size in the list view.
 
-<!-- truncate -->
+{/* truncate */}
 
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
 

packages/create-docusaurus/templates/shared/blog/2021-08-26-welcome/index.mdx

@@ -9,7 +9,7 @@ tags: [facebook, hello, docusaurus]
 
 Here are a few tips you might find useful.
 
-<!-- truncate -->
+{/* truncate */}
 
 Simply add Markdown files (or folders) to the `blog` directory.
 

packages/create-docusaurus/templates/shared/docs/tutorial-basics/congratulations.mdx

@@ -8,7 +8,7 @@ You have just learned the **basics of Docusaurus** and made some changes to the
 
 Docusaurus has **much more to offer**!
 
-Have **5 more minutes**? Take a look at **[versioning](../tutorial-extras/manage-docs-versions.md)** and **[i18n](../tutorial-extras/translate-your-site.md)**.
+Have **5 more minutes**? Take a look at **[versioning](../tutorial-extras/manage-docs-versions.mdx)** and **[i18n](../tutorial-extras/translate-your-site.mdx)**.
 
 Anything **unclear** or **buggy** in this tutorial? [Please report it!](https://github.com/facebook/docusaurus/discussions/4610)
 

packages/create-docusaurus/templates/shared/docs/tutorial-basics/markdown-features.mdx

@@ -20,9 +20,25 @@ slug: /my-custom-url
 ---
 // highlight-end
 
-## Markdown heading
+Markdown content
+```
 
-Markdown text with [links](./hello.md)
+## Headings {/* #my-heading-id */}
+
+Markdown headings are supported using the standard “#” syntax and are automatically added to the table of contents. The number of `#` corresponds to the heading level.
+
+```md
+## Headings
+
+My text
+```
+
+### Heading Ids {/* #my-custom-id */}
+
+Add `{/* #my-custom-id */}` after the heading text to assign it an explicit anchor id, used for linking.
+
+```md
+### Heading Ids {/_ #my-custom-id _/}
 ```
 
 ## Links
@@ -34,10 +50,10 @@ Let's see how to [Create a page](/create-a-page).
 ```
 
 ```md
-Let's see how to [Create a page](./create-a-page.md).
+Let's see how to [Create a page](./create-a-page.mdx).
 ```
 
-**Result:** Let's see how to [Create a page](./create-a-page.md).
+**Result:** Let's see how to [Create a page](./create-a-page.mdx).
 
 ## Images
 
@@ -80,26 +96,26 @@ function HelloDocusaurus() {
 Docusaurus has a special syntax to create admonitions and callouts:
 
 ```md
-:::tip My tip
+:::tip[My tip]
 
 Use this awesome feature option
 
 :::
 
-:::danger Take care
+:::danger[Take care]
 
 This action is dangerous
 
 :::
 ```
 
-:::tip My tip
+:::tip[My tip]
 
 Use this awesome feature option
 
 :::
 
-:::danger Take care
+:::danger[Take care]
 
 This action is dangerous