data-blazor-preview="true" attribute. The container includes both the syntax-highlighted source code and a placeholder for the live-rendered preview. The REPL/Blazor plugin later enhances these with tabbed UI and server-side rendering." /> data-blazor-preview="true" attribute. The container includes both the syntax-highlighted source code and a placeholder for the live-rendered preview. The REPL/Blazor plugin later enhances these with tabbed UI and server-side rendering." /> data-blazor-preview="true" attribute. The container includes both the syntax-highlighted source code and a placeholder for the live-rendered preview. The REPL/Blazor plugin later enhances these with tabbed UI and server-side rendering." />
Class Sealed
public sealed class BlazorPreviewExtension : IMarkdownExtension

Namespace: Moka.Docs.Parsing.Markdown

Markdig extension that renders fenced code blocks with the "blazor-preview" (or "razor-preview") language as preview containers with a data-blazor-preview="true" attribute. The container includes both the syntax-highlighted source code and a placeholder for the live-rendered preview. The REPL/Blazor plugin later enhances these with tabbed UI and server-side rendering.

Remarks

This extension is designed to coexist with MermaidExtension and ReplExtension by wrapping whatever CodeBlock renderer is currently in the pipeline. Registration order: Mermaid first, then BlazorPreview, then REPL.

Inheritance

Inherits from: IMarkdownExtension

Methods

Type Relationships
classDiagram
                    style BlazorPreviewExtension fill:#f9f,stroke:#333,stroke-width:2px
                    BlazorPreviewExtension --|> IMarkdownExtension : inherits
                
View Source
/// <summary>
///     Markdig extension that renders fenced code blocks with the "blazor-preview" (or "razor-preview")
///     language as preview containers with a <c>data-blazor-preview="true"</c> attribute.
///     The container includes both the syntax-highlighted source code and a placeholder for the
///     live-rendered preview. The REPL/Blazor plugin later enhances these with tabbed UI and
///     server-side rendering.
/// </summary>
/// <remarks>
///     This extension is designed to coexist with <see cref = "MermaidExtension"/> and <see cref = "ReplExtension"/>
///     by wrapping whatever CodeBlock renderer is currently in the pipeline.
///     Registration order: Mermaid first, then BlazorPreview, then REPL.
/// </remarks>
public sealed class BlazorPreviewExtension : IMarkdownExtension
{
    /// <inheritdoc/>
    public void Setup(MarkdownPipelineBuilder pipeline)
    {
    // No block parser changes needed — we reuse the built-in FencedCodeBlock parser.
    }

    /// <inheritdoc/>
    public void Setup(MarkdownPipeline pipeline, IMarkdownRenderer renderer)
    {
        if (renderer is HtmlRenderer htmlRenderer)
        {
            // Find whatever renderer currently handles CodeBlock (could be default
            // CodeBlockRenderer or MermaidCodeBlockRenderer). We wrap it so all
            // code block types are handled correctly.
            IMarkdownObjectRenderer? existingRenderer = null;
            foreach (IMarkdownObjectRenderer r in htmlRenderer.ObjectRenderers)
            {
                if (r is HtmlObjectRenderer<CodeBlock> codeBlockHandler)
                {
                    existingRenderer = codeBlockHandler;
                    break;
                }
            }

            if (existingRenderer != null)
            {
                htmlRenderer.ObjectRenderers.Remove(existingRenderer);
            }

            htmlRenderer.ObjectRenderers.AddIfNotAlready(new BlazorPreviewCodeBlockRenderer(existingRenderer as HtmlObjectRenderer<CodeBlock>));
        }
    }
}
Was this page helpful?