Azure devops support #548

Open
opened 2026-01-29 14:39:27 +00:00 by claunia · 9 comments
Owner

Originally created by @ProCoderMatt on GitHub (Aug 15, 2022).

Hi!
I saw this issue and wanted to mention it here. https://github.com/madskristensen/MarkdownEditor2022/issues/46

I'm writing my docs in visual studio and use the Azure DevOps wiki to read my docs.
When I'm trying to create a mermaid diagram I use the ``` mermaid. But on the devops wiki it need to start with ::: mermaid.
Can we support ::: for mermaid diagrams so we can see the diagram both in visual studio and Azure DevOps?

Thanks!

Originally created by @ProCoderMatt on GitHub (Aug 15, 2022). Hi! I saw this issue and wanted to mention it here. https://github.com/madskristensen/MarkdownEditor2022/issues/46 I'm writing my docs in visual studio and use the Azure DevOps wiki to read my docs. When I'm trying to create a mermaid diagram I use the ``` mermaid. But on the devops wiki it need to start with ::: mermaid. Can we support ::: for mermaid diagrams so we can see the diagram both in visual studio and Azure DevOps? Thanks!
claunia added the question label 2026-01-29 14:39:27 +00:00
Author
Owner

@xoofx commented on GitHub (Aug 15, 2022):

Not sure how Azure DevOps is working for :::, but markdig supports Custom Containers :::. Might be enough?

@xoofx commented on GitHub (Aug 15, 2022): Not sure how Azure DevOps is working for `:::`, but markdig supports [Custom Containers `:::`](https://github.com/xoofx/markdig/blob/master/src/Markdig.Tests/Specs/CustomContainerSpecs.md). Might be enough?
Author
Owner

@ProCoderMatt commented on GitHub (Aug 15, 2022):

Thanks for your quick response.

I looked into the custom containers and I found that the below converts to html that throws an exception in mermaid.js

::: mermaid
  graph LR
:::

I think it's because the custom container adds <p> element for each line.

<div class="mermaid">
    <p id="pragma-line-2">graph LR</p>
</div>

We need to dump the text between the colons without any tags.

@ProCoderMatt commented on GitHub (Aug 15, 2022): Thanks for your quick response. I looked into the custom containers and I found that the below converts to html that throws an exception in mermaid.js ``` ::: mermaid graph LR ::: ``` I think it's because the custom container adds ```<p>``` element for each line. ``` html <div class="mermaid"> <p id="pragma-line-2">graph LR</p> </div> ``` We need to dump the text between the colons without any tags.
Author
Owner

@xoofx commented on GitHub (Aug 15, 2022):

Oh, right, so it's a fenced code block with a different escape.

There is nothing built-in. You will have to create an extension/modify the pipeline to e.g add the : to the OpeningCharacters of the existing FencedCodeBlockParser and modify the associated renderer to add mermaid here
(Edit: And also, you should not enable the Custom Container extension to avoid the conflict)

@xoofx commented on GitHub (Aug 15, 2022): Oh, right, so it's a fenced code block with a different escape. There is nothing built-in. You will have to create an extension/modify the pipeline to e.g add the `:` to the [OpeningCharacters](https://github.com/xoofx/markdig/blob/bce4b70dc69803b9f45f00c542f6715bc6934981/src/Markdig/Parsers/FencedCodeBlockParser.cs#L23) of the existing `FencedCodeBlockParser` and modify the associated renderer to add `mermaid` [here](https://github.com/xoofx/markdig/blob/bce4b70dc69803b9f45f00c542f6715bc6934981/src/Markdig/Renderers/Html/CodeBlockRenderer.cs#L30) (Edit: And also, you should not enable the Custom Container extension to avoid the conflict)
Author
Owner

@ProCoderMatt commented on GitHub (Aug 22, 2022):

Hi xoofx,

Thanks for your answer!

When I have time I will create a PR :)

@ProCoderMatt commented on GitHub (Aug 22, 2022): Hi xoofx, Thanks for your answer! When I have time I will create a PR :)
Author
Owner

@FixRM commented on GitHub (Jan 20, 2026):

Hi there! Thanks for you work. I got another problem with ADO. I hope it will be relatively easy to fix.

For some reason, web editor name folder for pasted images .attachments (with dot at the beginning). For example: ![image.png](/.attachments/image-2485591b-5ddc-4259-a3e6-9182f31b2bed.png) It cause broken preview with markdig.

@FixRM commented on GitHub (Jan 20, 2026): Hi there! Thanks for you work. I got another problem with ADO. I hope it will be relatively easy to fix. For some reason, web editor name folder for pasted images `.attachments` (with dot at the beginning). For example: `![image.png](/.attachments/image-2485591b-5ddc-4259-a3e6-9182f31b2bed.png)` It cause broken preview with `markdig`.
Author
Owner

@xoofx commented on GitHub (Jan 20, 2026):

For some reason, web editor name folder for pasted images .attachments (with dot at the beginning). For example: ![image.png](/.attachments/image-2485591b-5ddc-4259-a3e6-9182f31b2bed.png) It cause broken preview with markdig.

There is nothing we can do in Markdig by default. Such link on a site like AZDO (or GitHub) need to be transformed to an absolute link and you have to specify what will be the root of the link. GitHub for instance will change relative links to point to the current branch. You can perform such transform directly on the MarkdownDocument following all links and change them to absolute with the adequate URL for AZDO.

@xoofx commented on GitHub (Jan 20, 2026): > For some reason, web editor name folder for pasted images `.attachments` (with dot at the beginning). For example: `![image.png](/.attachments/image-2485591b-5ddc-4259-a3e6-9182f31b2bed.png)` It cause broken preview with `markdig`. There is nothing we can do in Markdig by default. Such link on a site like AZDO (or GitHub) need to be transformed to an absolute link and you have to specify what will be the root of the link. GitHub for instance will change relative links to point to the current branch. You can perform such transform directly on the MarkdownDocument following all links and change them to absolute with the adequate URL for AZDO.
Author
Owner

@FixRM commented on GitHub (Jan 20, 2026):

I guess you got me wrong. I think that local rendering with Markdig (or madskristensen/MarkdownEditor2022?) is broken then directory name starts with dot. Unfortunately I have no idea how to check it.

In other words: in my MD file I have related path /.attachments/xyz and image it is pointing to doesn't render. May be it is MarkdownEditor2022 bug, not sure

@FixRM commented on GitHub (Jan 20, 2026): I guess you got me wrong. I think that local rendering with Markdig (or madskristensen/MarkdownEditor2022?) is broken then directory name starts with dot. Unfortunately I have no idea how to check it. In other words: in my MD file I have related path `/.attachments/xyz` and image it is pointing to doesn't render. May be it is MarkdownEditor2022 bug, not sure
Author
Owner

@madskristensen commented on GitHub (Jan 28, 2026):

You can now specify a custom root path using a frontmatter header property in the VS extension. That should fix the custom folder for AzDO

@madskristensen commented on GitHub (Jan 28, 2026): You can now specify a custom root path using a frontmatter header property in the VS extension. That should fix the custom folder for AzDO
Author
Owner

@FixRM commented on GitHub (Jan 28, 2026):

You can now specify a custom root path using a frontmatter header property in the VS extension. That should fix the custom folder for AzDO

Thank you, I'll try

@FixRM commented on GitHub (Jan 28, 2026): > You can now specify a custom root path using a frontmatter header property in the VS extension. That should fix the custom folder for AzDO Thank you, I'll try
Sign in to join this conversation.
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: starred/markdig#548