|
1 | 1 | # Blazor: Live Preview Markdown Editor’s Content Using Markdig Library |
2 | 2 |
|
3 | | -Integrate the Markdig third-party library into Syncfusion Blazor Rich Text Editor’s Markdown editor (MD editor) to preview the Markdown. |
| 3 | +The [Blazor Markdown Editor](https://www.syncfusion.com/blazor-components/blazor-wysiwyg-rich-text-editor/wysiwyg-markdown-editor?utm_source=github&utm_medium=listing&utm_campaign=blazor-markdown-editor-github-samples) is an intuitive and light-weight component that allows md to HTML conversion and the content to be in the markdown format. The typed markdown syntax content can be previewed using a third-party plugin. The [Blazor Rich Text Editor](https://www.syncfusion.com/blazor-components/blazor-wysiwyg-rich-text-editor?utm_source=github&utm_medium=listing&utm_campaign=blazor-markdown-editor-github-samples) component can be used as a Blazor WYSIWYG Markdown Editor (md editor). |
4 | 4 |
|
5 | | -## Prerequisites |
6 | | - |
7 | | -- [Visual Studio 2019](https://visualstudio.microsoft.com/vs/). |
8 | | -- [.NET Core 3.0](https://dotnet.microsoft.com/download/dotnet/3.0) or above. |
| 5 | +This example shows how to integrate the Markdig third-party library into Syncfusion Blazor Rich Text Editor’s Markdown editor (MD editor) to preview the Markdown. |
| 6 | + |
| 7 | +## Project prerequisites |
| 8 | +Make sure you have the compatible versions of .NET Core on your machine before starting to work on this project. You also need the following: |
| 9 | + |
| 10 | +* [Visual Studio 2019 (version 16.4+)]( https://visualstudio.microsoft.com/downloads) |
| 11 | +* [.NET Core SDK 3.1.2+](https://dotnet.microsoft.com/download/dotnet-core/3.1) |
9 | 12 | - [Markdig](https://www.nuget.org/packages/Markdig/). |
10 | 13 |
|
| 14 | +## How to run this application |
| 15 | +To run this application, you need to first clone or download the ‘blazor-markdown-editor-preview’ repository and then open it in Visual Studio 2019. Now, build and run your project to view the output. |
| 16 | + |
| 17 | +## Further help |
| 18 | +To get more help, check out the [ASP.NET Core Blazor documentation](https://docs.microsoft.com/en-us/aspnet/core/blazor). |
| 19 | + |
| 20 | +## Features and benefits |
| 21 | + |
| 22 | +### Markdown syntax |
| 23 | +The built-in commands of Blazor WYSIWYG Markdown Editor contains customized markdown syntax (md syntax) and maps. |
| 24 | + |
| 25 | +### Markdown editor toolbar |
| 26 | +The Blazor Markdown Editor toolbar provides a variety of commands to format text, insert images, add headers, insert hyperlinks, create lists, and preview results. The commands are grouped based on related functionality. |
11 | 27 |
|
12 | | -## How to run the project |
| 28 | +### Editing experience |
| 29 | +A wide range of tools and options to create a better editing experience with the markdown content. |
13 | 30 |
|
14 | | -Step 1: Check out this repository in your disk. |
| 31 | +### Insert markdown table |
| 32 | +Insert tables with rows and columns in the Markdown editor to display grid-like tabular data. |
15 | 33 |
|
16 | | -Step 2: Open the solution file using the Visual Studio 2019 Preview 16.6.0 Preview 2.0 or later. |
| 34 | +### Adding lists |
| 35 | +Create ordered (numbered) or unordered (bulleted) lists to organize content markdown syntax. |
| 36 | + |
| 37 | +### Themeable markdown editor |
| 38 | +The Blazor Markdown Editor component is shipped with several built-in themes such as material, bootstrap, fabric (Office 365), and high contrast. Users can customize any one of these built-in themes or create new themes to achieve their own desired look and feel either by simply overriding SASS variables or using our [Theme Studio](https://ej2.syncfusion.com/themestudio/?theme=material&_ga=2.81608208.685358623.1615778115-1684221649.1614484489) application. |
| 39 | + |
| 40 | +### Markdown character count |
| 41 | +The Blazor Markdown Editor allows users to restrict the content’s maximum number of characters. |
| 42 | + |
| 43 | +## Related links |
| 44 | +[Learn More about Blazor Markdown Editor](https://www.syncfusion.com/blazor-components/blazor-wysiwyg-rich-text-editor?utm_source=github&utm_medium=listing&utm_campaign=blazor-markdown-editor-github-samples) <br/><br/> |
| 45 | +[Download Free Trial](https://www.syncfusion.com/downloads?utm_source=github&utm_medium=listing&utm_campaign=blazor-markdown-editor-github-samples) <br/><br/> |
| 46 | +[Pricing](https://www.syncfusion.com/sales/products/blazor?utm_source=github&utm_medium=listing&utm_campaign=blazor-markdown-editor-github-samples) <br/><br/> |
| 47 | +[Documentation](https://blazor.syncfusion.com/documentation/rich-text-editor/getting-started/?utm_source=github&utm_medium=listing&utm_campaign=blazor-markdown-editor-github-samples) <br/><br/> |
| 48 | +[Online Examples](https://blazor.syncfusion.com/demos/rich-text-editor/overview?theme=bootstrap4?utm_source=github&utm_medium=listing&utm_campaign=blazor-markdown-editor-github-samples) <br/><br/> |
| 49 | +[Watch a How-to Video](https://www.syncfusion.com/tutorial-videos/blazor/rich-text-editor?title=create-a-rich-text-editor-in-a-blazor-server-application) <br/><br/> |
| 50 | +[Community Forums](https://www.syncfusion.com/forums/blazor-components/rich-text-editor?utm_source=github&utm_medium=listing&utm_campaign=blazor-markdown-editor-github-samples) <br/><br/> |
| 51 | +[Suggest a feature](https://www.syncfusion.com/feedback/blazor-components?utm_source=github&utm_medium=listing&utm_campaign=blazor-markdown-editor-github-samples) |
| 52 | + |
| 53 | +## About Syncfusion Blazor Components |
| 54 | +Syncfusion's [Blazor components](https://www.syncfusion.com/blazor-components?utm_source=github&utm_medium=listing&utm_campaign=blazor-markdown-editor-github-samples) library offers over 70 UI components to work with Blazor server-side and client-side (Blazor WebAssembly) projects seamlessly. We provide popular Blazor components such as [DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid?utm_source=github&utm_medium=listing&utm_campaign=blazor-markdown-editor-github-samples), [Charts](https://www.syncfusion.com/blazor-components/blazor-charts?utm_source=github&utm_medium=listing&utm_campaign=blazor-markdown-editor-github-samples), |
| 55 | +[Scheduler](https://www.syncfusion.com/blazor-components/blazor-scheduler?utm_source=github&utm_medium=listing&utm_campaign=blazor-markdown-editor-github-samples), [Diagram](https://www.syncfusion.com/blazor-components/blazor-diagram?utm_source=github&utm_medium=listing&utm_campaign=blazor-markdown-editor-github-samples), [Word Processor](https://www.syncfusion.com/blazor-components/blazor-word-processor?utm_source=github&utm_medium=listing&utm_campaign=blazor-markdown-editor-github-samples), and [Rich Text Editor](https://www.syncfusion.com/blazor-components/blazor-wysiwyg-rich-text-editor?utm_source=github&utm_medium=listing&utm_campaign=blazor-markdown-editor-github-samples). |
| 56 | + |
| 57 | +## About Syncfusion |
| 58 | +Founded in 2001 and headquartered in Research Triangle Park, N.C., Syncfusion has more than 23,000+ customers and more than 1 million users, including large financial institutions, Fortune 500 companies, and global IT consultancies. |
| 59 | + |
| 60 | +Today, we provide 1600+ controls and frameworks for web |
| 61 | +([Blazor](https://www.syncfusion.com/blazor-components?utm_source=github&utm_medium=listing&utm_campaign=blazor-markdown-editor-github-samples), |
| 62 | +[ASP.NET Core](https://www.syncfusion.com/aspnet-core-ui-controls?utm_source=github&utm_medium=listing&utm_campaign=blazor-markdown-editor-github-samples), |
| 63 | +[ASP.NET MVC](https://www.syncfusion.com/aspnet-mvc-ui-controls?utm_source=github&utm_medium=listing&utm_campaign=blazor-markdown-editor-github-samples), |
| 64 | +[ASP.NET WebForms](https://www.syncfusion.com/jquery/aspnet-webforms-ui-controls?utm_source=github&utm_medium=listing&utm_campaign=blazor-markdown-editor-github-samples), |
| 65 | +[JavaScript](https://www.syncfusion.com/javascript-ui-controls?utm_source=github&utm_medium=listing&utm_campaign=blazor-markdown-editor-github-samples), |
| 66 | +[Angular](https://www.syncfusion.com/angular-ui-components?utm_source=github&utm_medium=listing&utm_campaign=blazor-markdown-editor-github-samples), |
| 67 | +[React](https://www.syncfusion.com/react-ui-components?utm_source=github&utm_medium=listing&utm_campaign=blazor-markdown-editor-github-samples), |
| 68 | +[Vue](https://www.syncfusion.com/vue-ui-components?utm_source=github&utm_medium=listing&utm_campaign=blazor-markdown-editor-github-samples), |
| 69 | +and |
| 70 | +[Flutter](https://www.syncfusion.com/flutter-widgets?utm_source=github&utm_medium=listing&utm_campaign=blazor-markdown-editor-github-samples)), |
| 71 | +mobile |
| 72 | +([Xamarin](https://www.syncfusion.com/xamarin-ui-controls?utm_source=github&utm_medium=listing&utm_campaign=blazor-markdown-editor-github-samples), |
| 73 | +[Flutter](https://www.syncfusion.com/flutter-widgets?utm_source=github&utm_medium=listing&utm_campaign=blazor-markdown-editor-github-samples), |
| 74 | +[UWP](https://www.syncfusion.com/uwp-ui-controls?utm_source=github&utm_medium=listing&utm_campaign=blazor-markdown-editor-github-samples), |
| 75 | +and |
| 76 | +[JavaScript](https://www.syncfusion.com/javascript-ui-controls?utm_source=github&utm_medium=listing&utm_campaign=blazor-markdown-editor-github-samples)), |
| 77 | +and desktop development ([Windows |
| 78 | +Forms](https://www.syncfusion.com/winforms-ui-controls?utm_source=github&utm_medium=listing&utm_campaign=blazor-markdown-editor-github-samples), |
| 79 | +[WPF](https://www.syncfusion.com/wpf-ui-controls?utm_source=github&utm_medium=listing&utm_campaign=blazor-markdown-editor-github-samples), |
| 80 | +[WinUI(Preview)](https://www.syncfusion.com/winui-controls?utm_source=github&utm_medium=listing&utm_campaign=blazor-markdown-editor-github-samples) |
| 81 | +and |
| 82 | +[UWP](https://www.syncfusion.com/uwp-ui-controls?utm_source=github&utm_medium=listing&utm_campaign=blazor-markdown-editor-github-samples)). |
| 83 | +We provide ready-to-deploy enterprise software for dashboards, reports, |
| 84 | +data integration, and big data processing. Many customers have saved |
| 85 | +millions in licensing fees by deploying our software. |
17 | 86 |
|
18 | | -Step 3: Restore the NuGet packages by rebuilding the solution. |
| 87 | + |
| 88 | +<hr style="height:0.3px;border:none;color:lightgrey;background-color:lightgrey;" /> |
19 | 89 |
|
20 | | -Step 4: Run the project. |
| 90 | +<p align="center"> |
| 91 | + <a href="mailto:sales@syncfusion.com?Subject=Syncfusion Blazor Markdown Editor - Github" target="_top">sales@syncfusion.com</a> | <a href="https://www.syncfusion.com?utm_source=github&utm_medium=listing&utm_campaign=blazor-markdown-editor-github-samples">www.syncfusion.com</a> | 1-888-9 DOTNET <br> |
| 92 | +</p> |
0 commit comments