Markdown

Markdown is a powerful Markdown rendering component that supports code highlighting, component rendering, and custom render functions.

When To Use

  • When you need to render Markdown content with syntax highlighting
  • When you want to embed interactive Blazor components in your Markdown content
  • When you need custom rendering for specific code blocks
  • When you need to display mathematical formulas in your content

Examples

Basic Usage

The most basic usage of Markdown component, demonstrating support for:

  • Headings and text formatting
  • Lists
  • Code blocks with syntax highlighting
  • Tables
expand code expand code

Custom Rendering

Add custom render functions using the AddRender method to define custom rendering logic for specific code block types:

  • Use alert, info, warning language identifiers to create different styled message boxes
  • Custom chart rendering
  • Fully customized rendering logic
expand code expand code

API#

Markdown

Property Description Type Default
Content The Markdown content to render string -
Pipeline Custom Markdig pipeline for Markdown processing MarkdownPipeline null
Class CSS class name string -
Style Style attributes string -
ComponentParameters Global parameters to pass to rendered components Dictionary<string, object> null

Methods

Name Description
AddRender Add a custom render function for a specific code block type
RemoveRender Remove a custom render function
ClearRenders Clear all custom render functions

Code Block Types

Built-in Types

  • component: Render a Blazor component with parameters
  • chart: Render a Chart.js chart
  • table: Render an interactive table
  • form: Render a form component
  • antd: Render an Ant Design component

Custom Types

You can add custom render functions for any code block type using the AddRender method:

markdownX.AddRender("alert", content => builder =>
{
    builder.OpenElement(0, "div");
    builder.AddAttribute(1, "class", "custom-alert");
    builder.AddContent(2, content);
    builder.CloseElement();
});

Examples

Basic Usage

The most basic usage of Markdown component, demonstrating basic Markdown syntax support.

Component Rendering

Embed interactive components in Markdown content.

Custom Rendering

Add custom render functions to handle special code block types.

Bubble Conversations