DOCSEARCHbyAlgolia
Submit Docs

Blazor Markdown Editor

repository·main·Indexed 42 days ago

https://github.com/erossini/blazormarkdowneditor

A Blazor component wrapper for the EasyMDE JavaScript library supporting Blazor WebAssembly and Blazor Server with .NET 8. It features two-way binding for raw markdown, Mermaid diagram support, highlight.js syntax highlighting, custom toolbars, and auto-saving to local storage.

Tokens
9.9K
Snippets
22
Records
24
Agent score
53%

What's inside Blazor Markdown Editor

  1. Use Mermaid and highlight.js together

    main

    You can enable both EnableMermaid and EnableHighlight on the same editor instance without extra configuration. The component is designed to handle both simultaneously by routing mermaid blocks to the Mermaid runtime and all other fenced blocks to highlight.js.

    <MarkdownEditor @bind-Value="@markdownValue"
                EnableMermaid="true"
                EnableHighlight="true"
                HighlightTheme="monokai.min.css" />

  2. Add a custom toolbar to MarkdownEditor

    main

    You can customize the editor's toolbar by adding a <Toolbar> child content block containing one or more MarkdownToolbarButton components.

    • Action: Use predefined MarkdownAction values (e.g., MarkdownAction.Bold) for standard editor functions.
    • Separator: Add this property to a button to display a vertical line before it.
    • Name: Provide a custom string (like a URL or identifier) to handle custom logic in the CustomButtonClicked event.
    • CustomButtonClicked: An event callback that triggers when any toolbar button is clicked, providing MarkdownButtonEventArgs containing the button's Value.
    <MarkdownEditor @bind-Value="@markdownValue"
                ValueHTMLChanged="@OnMarkdownValueHTMLChanged"
                SpellChecker="false"
                CustomButtonClicked="@OnCustomButtonClicked">
    <Toolbar>
        <MarkdownToolbarButton Action="MarkdownAction.Bold" Icon="fa fa-bolt" Title="Bold" />
        <MarkdownToolbarButton Separator Name="Custom button" 
                               Value="@("Hello from your custom Toolbar Button")" 
                               Icon="fa fa-star" 
                               Title="A Custom Button" />
        <MarkdownToolbarButton Separator Name="https://github.com/erossini/BlazorMarkdownEditor" 
                               Icon="fa fab fa-github" Title="A Custom Link" />
    </Toolbar>
</MarkdownEditor>

@code {
    Task OnCustomButtonClicked(MarkdownButtonEventArgs eventArgs)
    {
        Console.WriteLine("OnCustomButtonClicked -> " + eventArgs.Value);
        return Task.CompletedTask;
    }
}

  3. Enable Mermaid diagrams

    main

    The component includes mermaid out-of-the-box. To use it, set the EnableMermaid parameter to true. When enabled, Mermaid renders diagrams from fenced code blocks tagged with mermaid (e.g., ```mermaid).

    Additionally, a "mermaid" toolbar button is automatically added to allow users to insert these fenced blocks with a single click.

    Supported diagram types include:

    • Flowchart
    • Sequence
    • Class
    • State
    • Entity Relationship
    • User Journey
    • Gantt
    • Pie Chart
    • Quadrant
    • Requirement
    • Git graph
    • C4 Context
    • Mindmaps
    • Timeline
    <MarkdownEditor @bind-Value="@markdownValue"
                EnableMermaid="true" />

  5. Clear auto-saved content from local storage

    main

    By default, the editor enables auto-saving to the browser's local storage (AutoSaveEnabled="true") every 5000ms. To programmatically clear this saved text, capture a reference to the MarkdownEditor component using @ref and call the CleanAutoSave() method.

    <MarkdownEditor @ref="Markdown1" 
                @bind-Value="@markdownValue" 
                AutoSaveEnabled="true" />

@code {
    MarkdownEditor Markdown1;

    async Task DeleteStorage()
    {
        await Markdown1.CleanAutoSave();
    }
}

  8. Use Open Iconic SVG Sprites

    main

    To reduce HTTP requests, use the SVG sprite. This method allows you to load all icons in a single request.

    Implementation Details:

    • Use an <svg> tag with a general class for styling.
    • Use a <use> tag with a unique class for specific icon styling.
    • Reference the icon using xlink:href="open-iconic.svg#icon-name".

    Styling:

    • Sizing: Set equal width and height on the <svg> tag.
    • Coloring: Set the fill property on the <use> tag.
    <svg class="icon">
  <use xlink:href="open-iconic.svg#account-login" class="icon-account-login"></use>
</svg>

<style>
.icon {
  width: 16px;
  height: 16px;
}

.icon-account-login {
  fill: #f00;
}
</style>

  9. Enable highlight.js syntax highlighting

    main

    To enable syntax highlighting in the preview, set EnableHighlight="true". The component uses fenced code blocks with language tags (e.g., ```csharp) to apply highlighting.

    Configuration:

    • HighlightTheme: Specify a theme by its filename. Themes must be a *.min.css file found in wwwroot/lib/highlight.js/styles/.
    • Common themes: github.min.css, github-dark.min.css, atom-one-dark.min.css, monokai.min.css, nord.min.css, vs2015.min.css.
    • Extending languages: The bundled version includes ~35 common languages. To add more, drop the additional parser file under wwwroot/lib/highlight.js/languages/ in your host project and load it via a standard <script> tag in your index.html.
    <MarkdownEditor @bind-Value="@markdownValue"
                EnableHighlight="true"
                HighlightTheme="github.min.css" />

  10. Install and Setup Blazor Markdown Editor

    main

    To use the MarkdownEditor component in a Blazor WebAssembly or Blazor Server (.NET 8) project, follow these steps:

    1. Add Namespace Imports: Add the following to your _Imports.razor file:

      @using PSC.Blazor.Components.MarkdownEditor 
@using PSC.Blazor.Components.MarkdownEditor.EventsArgs

    2. Include Static Assets: Add the CSS and JavaScript files to your index.html, host.html, or App.razor.

    Note: jQuery is a required dependency for this component.

    1. CSS Styles: The markdowneditor.css file includes custom styles for tags like att, note, tip, warn, and video.
    <!-- Add to index.html, host.html, or App.razor -->
<link href="/_content/PSC.Blazor.Components.MarkdownEditor/css/markdowneditor.css" rel="stylesheet" />
<link href="/_content/PSC.Blazor.Components.MarkdownEditor/css/easymde.min.css" rel="stylesheet" />

<script src="/_content/PSC.Blazor.Components.MarkdownEditor/js/easymde.min.js"></script>
<script src="/_content/PSC.Blazor.Components.MarkdownEditor/js/markdownEditor.js"></script>

  11. Use Alert commands in Markdown

    main

    The editor supports special Markdown commands to display styled alert messages (notes, tips, warnings, etc.). You can trigger these by clicking the corresponding icons in the toolbar or by typing the following commands directly into the editor:

    CommandColorDescription
    ```att | Red | Display an attention message
    ```note | Azure | Add a note in the document
    ```tip | Green | Shows a tip message
    ```warn | Orange | This is a warning message

    Required CSS: If you haven't already included markdowneditor.css, you must add the alert.css stylesheet to your index.html to render these correctly:

    <link href="/_content/PSC.Blazor.Components.MarkdownEditor/css/alert.css" rel="stylesheet" />