From 9b9f38cd500d12ee1ed31f3e9140a7aa82142255 Mon Sep 17 00:00:00 2001
From: Rami Yushuvaev <r_a_m_i@hotmail.com>
Date: Wed, 30 Jun 2021 16:27:44 +0300
Subject: [PATCH] docs(v2): Rewrite markdown images section (#5064)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Rewrite markdown images section

Before it looked like we have two ways to display images, now it's three ways. Each syntax has a separate example.

This way it's clear, I see each method and the code example.

Before there were 2 methods in a single code block.

* fix typo in `markdown-features/markdown-features-assets`

Co-authored-by: Sébastien Lorber <slorber@users.noreply.github.com>

* Rewrite image display section using CommonJS require

Co-authored-by: Sébastien Lorber <slorber@users.noreply.github.com>

* Rewrite image display section using ES imports

Co-authored-by: Sébastien Lorber <slorber@users.noreply.github.com>

* prettier doc

Co-authored-by: Sébastien Lorber <slorber@users.noreply.github.com>
Co-authored-by: slorber <lorber.sebastien@gmail.com>
---
 .../markdown-features-assets.mdx              | 20 +++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/website/docs/guides/markdown-features/markdown-features-assets.mdx b/website/docs/guides/markdown-features/markdown-features-assets.mdx
index 86d280bd97..8e0fa107f2 100644
--- a/website/docs/guides/markdown-features/markdown-features-assets.mdx
+++ b/website/docs/guides/markdown-features/markdown-features-assets.mdx
@@ -22,29 +22,29 @@ Let's imagine the following file structure:
 
 ## Images {#images}
 
-You can use images in Markdown, or by requiring them and using a JSX image tag:
+You can display images in three different ways: Markdown syntax, JSX require or ES imports syntax.
+
+Display images using simple Markdown syntax:
 
 ```mdx
-# My Markdown page
+![Example banner](./assets/docusaurus-asset-example-banner.png)
+```
 
+Display images using inline CommonJS `require` in JSX image tag:
+
+```mdx
 <img
   src={require('./assets/docusaurus-asset-example-banner.png').default}
   alt="Example banner"
 />
-
-or
-
-![Example banner](./assets/docusaurus-asset-example-banner.png)
 ```
 
-The ES imports syntax also works:
+Display images using ES `import` syntax and JSX image tag:
 
 ```mdx
-# My Markdown page
-
 import myImageUrl from './assets/docusaurus-asset-example-banner.png';
 
-<img src={myImageUrl} alt="My image alternative text" />
+<img src={myImageUrl} alt="Example banner" />
 ```
 
 This results in displaying the image: