How to rewrite header elements #428

New Issue

claunia · 2026-01-29T14:36:26Z

claunia commented

2026-01-29 14:36:26 +00:00

Originally created by @kaylumah on GitHub (Jan 24, 2021).

Hi,

I really like your library, but I am not really clear on which customization hooks I need to use, since there are a lot of hooks available. For many differnt variants, like for example the Figure extension creates custom types alongside parsers and renderers. So I am a bit lost and I thought I ask here for advise.

I think I need something like AutoIdentifiers but I am not sure.

The use case I want to do is make all headers clickable with anchors.

So

# heading one

Would become

<h1><a id="heading-one">heading one</a></h1>

Any pointers are appreciated

Originally created by @kaylumah on GitHub (Jan 24, 2021). Hi, I really like your library, but I am not really clear on which customization hooks I need to use, since there are a lot of hooks available. For many differnt variants, like for example the Figure extension creates custom types alongside parsers and renderers. So I am a bit lost and I thought I ask here for advise. I think I need something like AutoIdentifiers but I am not sure. The use case I want to do is make all headers clickable with anchors. So ``` # heading one ``` Would become ``` <h1><a id="heading-one">heading one</a></h1> ``` Any pointers are appreciated

claunia added the question label 2026-01-29 14:36:26 +00:00

claunia closed this issue

2026-01-29 14:36:26 +00:00

claunia commented

2026-01-29 14:36:26 +00:00

@xoofx commented on GitHub (Jan 25, 2021):

Autoidentifiers will help to add an id attribute to your heading, so you can then insert your link by post-processing the document before rendering it, something like that:

var pipeline = new MarkdownPipelineBuilder().UseAutoIdentifiers().Build();
var doc = Markdown.Parse("# This is a heading", pipeline);

// Process headings to insert an intermediate LinkInline
foreach (var headingBlock in doc.Descendants<HeadingBlock>())
{
    var inline = new LinkInline($"#{headingBlock.GetAttributes().Id}", null);
    var previousInline = headingBlock.Inline;
    headingBlock.Inline = null;
    inline.AppendChild(previousInline);
    headingBlock.Inline = inline;
}

// Render the doc
var writer = new StringWriter();
var renderer = new HtmlRenderer(writer);
pipeline.Setup(renderer);
renderer.Render(doc);

// Will print:
// <h1 id="this-is-a-heading"><a href="#this-is-a-heading">This is a heading</a></h1>
Console.WriteLine(writer.ToString());

@xoofx commented on GitHub (Jan 25, 2021): Autoidentifiers will help to add an id attribute to your heading, so you can then insert your link by post-processing the document before rendering it, something like that: ```csharp var pipeline = new MarkdownPipelineBuilder().UseAutoIdentifiers().Build(); var doc = Markdown.Parse("# This is a heading", pipeline); // Process headings to insert an intermediate LinkInline foreach (var headingBlock in doc.Descendants<HeadingBlock>()) { var inline = new LinkInline($"#{headingBlock.GetAttributes().Id}", null); var previousInline = headingBlock.Inline; headingBlock.Inline = null; inline.AppendChild(previousInline); headingBlock.Inline = inline; } // Render the doc var writer = new StringWriter(); var renderer = new HtmlRenderer(writer); pipeline.Setup(renderer); renderer.Render(doc); // Will print: // <h1 id="this-is-a-heading"><a href="#this-is-a-heading">This is a heading</a></h1> Console.WriteLine(writer.ToString()); ```

claunia commented

2026-01-29 14:36:28 +00:00

@kaylumah commented on GitHub (Jan 25, 2021):

@xoofx awesome, can confirm this works, did not expect you to write the code at all, so many thanks :-)

My guess is I can do it like this, or use de BootstrapExtension as the basis to do in in a pipeline right?

@kaylumah commented on GitHub (Jan 25, 2021): @xoofx awesome, can confirm this works, did not expect you to write the code at all, so many thanks :-) My guess is I can do it like this, or use de BootstrapExtension as the basis to do in in a pipeline right?

claunia commented

2026-01-29 14:36:28 +00:00

@xoofx commented on GitHub (Jan 25, 2021):

@xoofx awesome, can confirm this works, did not expect you to write the code at all, so many thanks :-)

My guess is I can do it like this, or use de BootstrapExtension as the basis to do in in a pipeline right?

Yep for example.

@xoofx commented on GitHub (Jan 25, 2021): > @xoofx awesome, can confirm this works, did not expect you to write the code at all, so many thanks :-) > > My guess is I can do it like this, or use de BootstrapExtension as the basis to do in in a pipeline right? Yep for example.

claunia referenced this issue

2026-01-29 14:48:45 +00:00

[PR #430] [MERGED] Fix relative uri detection to be cross-platform compatible #1025

claunia referenced this issue

2026-01-29 14:48:49 +00:00

[PR #430] Fix relative uri detection to be cross-platform compatible #1029

Sign in to join this conversation.