Code block for Blazor syntax as string #468

New Issue

claunia · 2026-01-29T14:37:29Z

claunia commented

2026-01-29 14:37:29 +00:00

Originally created by @stsrki on GitHub (May 28, 2021).

I'm trying to find a solution where code blocks are converted to a string instead of an HTML kind of structure.

Let say I have the following code surrounded by three backticks

    <Bar Breakpoint="Breakpoint.Desktop"
         Background="Background.Light"
         ThemeContrast="ThemeContrast.Light">
        <BarBrand>
            My Brand
        </BarBrand>
        <BarToggler />
        <BarMenu>
            <BarStart>
                <BarItem>
                    <BarLink To="#">Home</BarLink>
                </BarItem>
                <BarItem>
                    <BarDropdown>
                        <BarDropdownToggle>Dropdown</BarDropdownToggle>
                        <BarDropdownMenu>
                            <BarDropdownItem>Action</BarDropdownItem>
                            <BarDropdownItem>Another action</BarDropdownItem>
                        </BarDropdownMenu>
                    </BarDropdown>
                </BarItem>
            </BarStart>
            <BarEnd>
                <BarItem><LoginDisplay /></BarItem>
            </BarEnd>
        </BarMenu>
    </Bar>

With Markdig it is converted to this

Whereas I want it to behave the same as GitHub comments. To render code blocks as strings.

Is this possible?

Originally created by @stsrki on GitHub (May 28, 2021). I'm trying to find a solution where code blocks are converted to a string instead of an HTML kind of structure. Let say I have the following code surrounded by three backticks ``` <Bar Breakpoint="Breakpoint.Desktop" Background="Background.Light" ThemeContrast="ThemeContrast.Light"> <BarBrand> My Brand </BarBrand> <BarToggler /> <BarMenu> <BarStart> <BarItem> <BarLink To="#">Home</BarLink> </BarItem> <BarItem> <BarDropdown> <BarDropdownToggle>Dropdown</BarDropdownToggle> <BarDropdownMenu> <BarDropdownItem>Action</BarDropdownItem> <BarDropdownItem>Another action</BarDropdownItem> </BarDropdownMenu> </BarDropdown> </BarItem> </BarStart> <BarEnd> <BarItem><LoginDisplay /></BarItem> </BarEnd> </BarMenu> </Bar> ``` With Markdig it is converted to this ![image](https://user-images.githubusercontent.com/900302/120002995-9beef480-bfd5-11eb-904d-34d8ff36dba8.png) Whereas I want it to behave the same as GitHub comments. To render code blocks as strings. ![image](https://user-images.githubusercontent.com/900302/120003152-c345c180-bfd5-11eb-9457-e26855560285.png) Is this possible?

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

claunia closed this issue

2026-01-29 14:37:30 +00:00

claunia commented

2026-01-29 14:37:31 +00:00

@xoofx commented on GitHub (May 28, 2021):

You need to plug your own CodeBlockRenderer (original) through the HtmlRenderer that you setup through the MarkdownPipelineBuilder

@MihaZupan do you have any other ideas?

@xoofx commented on GitHub (May 28, 2021): You need to plug your own `CodeBlockRenderer` ([original](https://github.com/xoofx/markdig/blob/master/src/Markdig/Renderers/Html/CodeBlockRenderer.cs)) through the `HtmlRenderer` that you setup through the `MarkdownPipelineBuilder` @MihaZupan do you have any other ideas?

claunia commented

2026-01-29 14:37:32 +00:00

@MihaZupan commented on GitHub (May 28, 2021):

I'm not sure I understand the question

If you pass html surrounded by ``` to Markdig, the HTML tags will be escaped - which is then interpreted as just a string literal by the browser since there are no tags

Example

<pre>
  <code>
    &lt;Bar Breakpoint="Breakpoint.Desktop"
         Background="Background.Light"
         ThemeContrast="ThemeContrast.Light">
        &lt;BarBrand>
            My Brand
        &lt;/BarBrand>
        &lt;BarToggler />
        &lt;BarMenu>
            &lt;BarStart>
                &lt;BarItem>
                    &lt;BarLink To="#">Home&lt;/BarLink>
                &lt;/BarItem>
                &lt;BarItem>
                    &lt;BarDropdown>
                        &lt;BarDropdownToggle>Dropdown&lt;/BarDropdownToggle>
                        &lt;BarDropdownMenu>
                            &lt;BarDropdownItem>Action&lt;/BarDropdownItem>
                            &lt;BarDropdownItem>Another action&lt;/BarDropdownItem>
                        &lt;/BarDropdownMenu>
                    &lt;/BarDropdown>
                &lt;/BarItem>
            &lt;/BarStart>
            &lt;BarEnd>
                &lt;BarItem>&lt;LoginDisplay />&lt;/BarItem>
            &lt;/BarEnd>
        &lt;/BarMenu>
    &lt;/Bar>

  </code></pre>

@MihaZupan commented on GitHub (May 28, 2021): I'm not sure I understand the question If you pass html surrounded by \`\`\` to Markdig, the HTML tags will be escaped - which is then interpreted as just a string literal by the browser since there are no tags [Example](https://babelmark.github.io/?text=%60%60%60html%0A%3CBar+Breakpoint%3D%22Breakpoint.Desktop%22%0A+++++++++Background%3D%22Background.Light%22%0A+++++++++ThemeContrast%3D%22ThemeContrast.Light%22%3E%0A++++++++%3CBarBrand%3E%0A++++++++++++My+Brand%0A++++++++%3C%2FBarBrand%3E%0A++++++++%3CBarToggler+%2F%3E%0A++++++++%3CBarMenu%3E%0A++++++++++++%3CBarStart%3E%0A++++++++++++++++%3CBarItem%3E%0A++++++++++++++++++++%3CBarLink+To%3D%22%23%22%3EHome%3C%2FBarLink%3E%0A++++++++++++++++%3C%2FBarItem%3E%0A++++++++++++++++%3CBarItem%3E%0A++++++++++++++++++++%3CBarDropdown%3E%0A++++++++++++++++++++++++%3CBarDropdownToggle%3EDropdown%3C%2FBarDropdownToggle%3E%0A++++++++++++++++++++++++%3CBarDropdownMenu%3E%0A++++++++++++++++++++++++++++%3CBarDropdownItem%3EAction%3C%2FBarDropdownItem%3E%0A++++++++++++++++++++++++++++%3CBarDropdownItem%3EAnother+action%3C%2FBarDropdownItem%3E%0A++++++++++++++++++++++++%3C%2FBarDropdownMenu%3E%0A++++++++++++++++++++%3C%2FBarDropdown%3E%0A++++++++++++++++%3C%2FBarItem%3E%0A++++++++++++%3C%2FBarStart%3E%0A++++++++++++%3CBarEnd%3E%0A++++++++++++++++%3CBarItem%3E%3CLoginDisplay+%2F%3E%3C%2FBarItem%3E%0A++++++++++++%3C%2FBarEnd%3E%0A++++++++%3C%2FBarMenu%3E%0A++++%3C%2FBar%3E%0A%60%60%60) ```html <pre> <code> <Bar Breakpoint="Breakpoint.Desktop" Background="Background.Light" ThemeContrast="ThemeContrast.Light"> <BarBrand> My Brand </BarBrand> <BarToggler /> <BarMenu> <BarStart> <BarItem> <BarLink To="#">Home</BarLink> </BarItem> <BarItem> <BarDropdown> <BarDropdownToggle>Dropdown</BarDropdownToggle> <BarDropdownMenu> <BarDropdownItem>Action</BarDropdownItem> <BarDropdownItem>Another action</BarDropdownItem> </BarDropdownMenu> </BarDropdown> </BarItem> </BarStart> <BarEnd> <BarItem><LoginDisplay /></BarItem> </BarEnd> </BarMenu> </Bar> </code></pre> ```

claunia commented

2026-01-29 14:37:33 +00:00

@stsrki commented on GitHub (May 28, 2021):

When I debug and inspect the value in Visual Studio I get no escape characters

and source string has ``` defined

@stsrki commented on GitHub (May 28, 2021): When I debug and inspect the value in Visual Studio I get no escape characters ![image](https://user-images.githubusercontent.com/900302/120020239-b9c65480-bfe9-11eb-8752-b3a643f9078a.png) and source string has ``` defined ![image](https://user-images.githubusercontent.com/900302/120020392-ebd7b680-bfe9-11eb-9731-07c7317458c0.png)

claunia commented

2026-01-29 14:37:34 +00:00

@MihaZupan commented on GitHub (May 28, 2021):

Can you share the code you are using (specifically how you're converting the markdown)?

@MihaZupan commented on GitHub (May 28, 2021): Can you share the code you are using (specifically how you're converting the markdown)?

claunia commented

2026-01-29 14:37:35 +00:00

@stsrki commented on GitHub (May 28, 2021):

It's pretty basic

var html = Markdown.ToHtml( result ?? string.Empty, pipeline );

BodyHtml = html;

and for pipeline

private static readonly MarkdownPipeline pipeline = new MarkdownPipelineBuilder()
    .UseSoftlineBreakAsHardlineBreak()
    .UseBootstrap()
    .UseAutoLinks()
    .UseAutoIdentifiers( Markdig.Extensions.AutoIdentifiers.AutoIdentifierOptions.GitHub )
    .UseTaskLists()
    //.UseAdvancedExtensions()
    .UsePrism()
    .Build();

@stsrki commented on GitHub (May 28, 2021): It's pretty basic ```cs var html = Markdown.ToHtml( result ?? string.Empty, pipeline ); BodyHtml = html; ``` and for pipeline ```cs private static readonly MarkdownPipeline pipeline = new MarkdownPipelineBuilder() .UseSoftlineBreakAsHardlineBreak() .UseBootstrap() .UseAutoLinks() .UseAutoIdentifiers( Markdig.Extensions.AutoIdentifiers.AutoIdentifierOptions.GitHub ) .UseTaskLists() //.UseAdvancedExtensions() .UsePrism() .Build(); ```

claunia commented

2026-01-29 14:37:35 +00:00

@MihaZupan commented on GitHub (May 28, 2021):

My guess would be it's exactly how you're rendering the string (BodyHtml) to the document that is affecting how it's represented.

The result of Markdown.ToHtml should be html with an escaped string in the code block.

@MihaZupan commented on GitHub (May 28, 2021): My guess would be it's exactly how you're rendering the string (BodyHtml) to the document that is affecting how it's represented. The result of `Markdown.ToHtml` should be html with an escaped string in the code block.

claunia commented

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

@stsrki commented on GitHub (May 28, 2021):

I found out what is causing the issue. It is the .UsePrism(). If I remove it, the string will escape correctly and render code block. But now I've lost syntax highlighting...

@stsrki commented on GitHub (May 28, 2021): I found out what is causing the issue. It is the `.UsePrism()`. If I remove it, the string will escape correctly and render code block. But now I've lost syntax highlighting...

claunia commented

2026-01-29 14:37:37 +00:00

@xoofx commented on GitHub (May 28, 2021):

I don't know why the code of this Prism is requiring a Markdig extension (the renderer is here https://github.com/ilich/Markdig.Prism/blob/main/src/Markdig.Prism/PrismCodeBlockRenderer.cs)
I have used prism coloring with markdig rendering on my blog post without the need for such extension.

@xoofx commented on GitHub (May 28, 2021): I don't know why the code of this Prism is requiring a Markdig extension (the renderer is here https://github.com/ilich/Markdig.Prism/blob/main/src/Markdig.Prism/PrismCodeBlockRenderer.cs) I have used prism coloring with markdig rendering on my blog post without the need for such extension.

claunia referenced this issue

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

[PR #468] [MERGED] Add ParentBlock property to ContainerInline #1049

Sign in to join this conversation.

Branches Tags

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: starred/markdig#468