How to customize custom tag?

[anktsrkr]

Hi,
Could please guide me how to customize for custom tag. For example if my md contains

<expand> 
           Content without Gutters
</expand> 

which will convert it to below

This is similar to <details> </details> but with different tag, so want to extend by inheriting MudMarkdown. My understanding below is the write place to customize

protected override void RenderHtml(in RenderTreeBuilder builder, in StringLineGroup lines)
{
}

Considering MudMarkdownDetails and everything else is internal, how to get the range and display it correctly.

[my-nihongo]

@anktsrkr Yes, currently you will need to create your own component that inherits from MudMarkdown and override RenderHtml.

[anktsrkr]

Is it possible to share some example/document for how to customize one?

[MihailsKuzmins]

Well, does the example below help you? Basically, you can do anything and render any markup you want. So, it depends on how exactly you want to customise it, but hopefully it gives you some insight.

namespace MudBlazor;

public sealed class TestMarkdown : MudMarkdown
{
	protected override void RenderHtml(in RenderTreeBuilder builder, in StringLineGroup lines)
	{
		builder.OpenElement(ElementIndex++, "h1");
		builder.AddContent(ElementIndex++, "Custom header");
		builder.CloseElement();
	}
}

So, your sample will be rendered as an h1 element.

But well, StringLineGroup does not provide any straightforward API how to process the incoming HTML data, but you can take a look at:

MudBlazor.Markdown/src/MudBlazor.Markdown/Utils/Extensions/HtmlBlockEx.cs

Lines 7 to 23 in 2d1e66d

	public static bool TryGetDetails(this HtmlBlock @this, out HtmlDetailsData htmlDetailsData)
	{
	htmlDetailsData = new HtmlDetailsData();
	// Closing `>` for <details> is missing because there might be attributes for this tag
	if (!@this.Lines.StartsAndEndsWith("<details", "</details>", out var range))
	return false;
	// Closing `>` for <summary> is missing because there might be attributes for this tag
	var summaryEndIndex = @this.Lines.TryGetContent("<summary", "</summary>", range.Start, out var headerContent);
	if (summaryEndIndex.Line == -1)
	return false;
	var dataContent = @this.Lines.GetContent(summaryEndIndex, range.End);
	htmlDetailsData = new HtmlDetailsData(headerContent, dataContent);
	return true;