diff --git a/blazor/rich-text-editor/images/blazor-richtexteditor-using-clear-format.gif b/blazor/rich-text-editor/images/blazor-richtexteditor-using-clear-format.gif index 5be003c672..52dc94a717 100644 Binary files a/blazor/rich-text-editor/images/blazor-richtexteditor-using-clear-format.gif and b/blazor/rich-text-editor/images/blazor-richtexteditor-using-clear-format.gif differ diff --git a/blazor/rich-text-editor/images/list-editing.gif b/blazor/rich-text-editor/images/list-editing.gif index 2b004d0e7b..18e227ea27 100644 Binary files a/blazor/rich-text-editor/images/list-editing.gif and b/blazor/rich-text-editor/images/list-editing.gif differ diff --git a/blazor/rich-text-editor/tools/code-snippet/markdown-auto-format.razor b/blazor/rich-text-editor/tools/code-snippet/markdown-auto-format.razor new file mode 100644 index 0000000000..a7f5f99c11 --- /dev/null +++ b/blazor/rich-text-editor/tools/code-snippet/markdown-auto-format.razor @@ -0,0 +1,5 @@ +@using Syncfusion.Blazor.RichTextEditor + + +

Auto Formatting - Write Faster, Format Smarter

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.

The following Markdown shortcuts can be used:

+
\ No newline at end of file diff --git a/blazor/rich-text-editor/tools/text-formatting.md b/blazor/rich-text-editor/tools/text-formatting.md index 069da4b317..8e6b4f5faf 100644 --- a/blazor/rich-text-editor/tools/text-formatting.md +++ b/blazor/rich-text-editor/tools/text-formatting.md @@ -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) \ No newline at end of file +![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. + +Use the `EnableMarkdownAutoFormat` tool in the editor below to see the feature in action. + +## Inline Formatting + +The following inline formatting options are available: + +- Bold – Use `**text**` or `__text__`. +- Italic – Use `*text*` or `_text_`. +- 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. +- **To-do 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. + +{% tabs %} +{% highlight razor %} + +{% include_relative code-snippet/markdown-auto-format.razor %} + +{% endhighlight %} +{% endtabs %} + +{% previewsample "https://blazorplayground.syncfusion.com/embed/hNrSWBtRLLeUPqQj?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}