Merge pull request #7184 from syncfusion-content/990340-MD-Format

990340: Added the UG documentation for enable mark down auto format

Author: saravanangn

blazor/rich-text-editor/images/blazor-richtexteditor-using-clear-format.gif

@@ -0,0 +1,5 @@
+@using Syncfusion.Blazor.RichTextEditor
+
+<SfRichTextEditor EnableMarkdownAutoFormat="true">
+    <h3><span style="font-size: x-large;"><b>Auto Formatting - Write Faster, Format Smarter</b></span></h3><p><span style="font-size: inherit;">Boost your productivity with Auto Formatting, a powerful feature that lets you style content instantly using simple, familiar Markdown-style shortcuts. No need to reach for the toolbar - just type and watch your content transform in real time.</span></p><div style="font-family: &quot;Segoe UI&quot;; font-size: 14px; font-style: normal; line-height: 20px;"><p style="font-weight: 400;">The following Markdown shortcuts can be used:</p><ul style=""><li style="font-weight: 400;">Use <code>_</code> or <code>*</code> around text for <em>italic formatting</em>.</li><li style="">Use <code style="font-weight: 400;">__</code> or <code style="font-weight: 400;">**</code> around text for <b>bold</b> formatting.</li></ul></div>
+</SfRichTextEditor>

blazor/rich-text-editor/images/list-editing.gif

@@ -298,7 +298,7 @@ Use the `HorizontalLine` tool in the editor below to see the feature in action.
 
 ![Blazor RichTextEditor with Custom Format](../images/blazor-richtexteditor-horizontal-line.png)
 
-# Format Painter in Blazor Rich Text Editor
+## Format Painter in Blazor Rich Text Editor
 
 The format painter tool enables users to replicate formatting from one text segment and apply it to another. It can be accessed through the toolbar or via keyboard shortcuts, allowing the transfer of styles from individual words to entire paragraphs. Customization options are available through the Rich Text Editor[FormatPainterSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.RichTextEditorFormatPainterSettings.html) property.
 
@@ -368,4 +368,43 @@ Using `Clear Format` makes it easy to undo styling changes and keep your text lo
 {% endhighlight %}
 {% endtabs %}
 
-![Blazor RichTextEditor with Clear Format](../images/blazor-richtexteditor-using-clear-format.gif)
+![Blazor RichTextEditor with Clear Format](../images/blazor-richtexteditor-using-clear-format.gif)
+
+## Markdown Auto Format
+
+The Rich Text Editor supports automatic conversion of Markdown syntax into HTML using the `EnableMarkdownAutoFormat` property. This feature simplifies content creation by transforming Markdown elements into their corresponding HTML tags, ensuring consistency and improving efficiency.
+
+By default, Markdown Auto-Format is enabled. The editor supports both inline formatting and block-level elements. As you type, Markdown syntax is automatically converted into semantic HTML tags, ensuring a smooth and efficient editing experience.
+
+## Inline Formatting
+
+The following inline formatting options are available:
+
+- Bold – Use `**text**` or `__text__`.
+- Italic – Use `*text*` or `_text_`.
+- Inline Code – Use `text`.
+- Strikethrough – Use `~~text~~`.
+
+## Block formatting
+
+The following block formatting options are available:
+
+- **Bulleted list** – Start a line with `*` or `-` followed by a space.
+- **Numbered list** – Start a line with `1.` followed by a space.
+- **Check List** – Start a line with `[ ]` or `[x]` followed by a space to insert an unchecked or checked list item, respectively.
+- **Headings** – Start a line with `#`, `##`, or `###` followed by a space to create Heading 1, Heading 2, or Heading 3. You can use up to six levels of headings
+- **Block quote** – Start a line with `>` followed by a space.
+- **Code block** – Start a line with ` ``` ` followed by a space.
+- **Horizontal line** – Start a line with `---` followed by a space.
+
+Use the `EnableMarkdownAutoFormat` tool in the editor below to see the feature in action.
+
+{% tabs %}
+{% highlight razor %}
+
+{% include_relative code-snippet/markdown-auto-format.razor %}
+
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BjLyiLWtWPuHotIn?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}