Add support for markdown > alerts via markdig

[kzu]

Partial fix for #10125

Markdig supports alert blocks as documented at https://github.com/xoofx/markdig/blob/master/src/Markdig.Tests/Specs/AlertBlockSpecs.md.

Bumping markdig and adding .UseAlertBlocks() now renders the expected html.

Not sure how to go about adding the styles as needed.

[kzu]

I guess as a test PR, it showcases that for someone that can actually run the site, it should be fairly straightforward to add support for this :)

[lyndaidaii]

I guess as a test PR, it showcases that for someone that can actually run the site, it should be fairly straightforward to add support for this :)

Thank you for your contribution. I could help to test it.

[erdembayar]

I guess as a test PR, it showcases that for someone that can actually run the site, it should be fairly straightforward to add support for this :)

Thank you for your contribution. I could help to test it.

Thanks, Lynn. Please add screenshot here.

[erdembayar]

@lyndaidaii Have you had chance to test this? If not then I can do it, please let me know.

[kzu]

Test should be passing now. Screenshots below.

Dark mode:

Light mode;

[kzu]

any updates @erdembayar @lyndaidaii ?

[erdembayar]

any updates @erdembayar @lyndaidaii ?

Sorry, we'll review this week or at the latest next week. We have other priorities at the moment and need some time.

[lyndaidaii]

@lyndaidaii Have you had chance to test this? If not then I can do it, please let me know.

I had trouble in building gallery in local since we merged a couple of repos into one. My .NET version on dev is out of date now. Haven't checked in since then. If you could build gallery in local fine, could you help take a look at UI?

[kzu]

Any updates?

[erdembayar]

Any updates?

As you can see, unit tests are passing, which is good news. ~~However, I couldn't test the actual rendering view part because our Gallery app has a binding redirect issue due to a recent package update. We need to fix it first.~~ In the meantime, could you please upload the NuGet package with the readme you demoed to nuget.org or share the Readme.md file with me here? It would make my testing easier.

[erdembayar]

I tested your code after we fixed our code. Could you please rebase your branch using our dev latest branch? With my testing it seems rendering is not really working. Could you please test it yourself?

I used below Readme.md

## About This Project

Hello this is readme file.

[!NOTE]
This is a note 2024

[lyndaidaii]

Looks like is missing some of css file.

[kzu]

@erdembayar the sample package I used is available as source (pretty bare, mind you) at https://github.com/kzu/Observable.

It's basically this readme: readme.md

And a nuspec like

<?xml version="1.0" encoding="utf-8"?>
<package xmlns="http://schemas.microsoft.com/packaging/2012/06/nuspec.xsd">
  <metadata>
    <id>Observable</id>
    <version>0.2.0</version>
    <authors>Daniel Cazzulino</authors>
    <requireLicenseAcceptance>false</requireLicenseAcceptance>
    <license type="expression">MIT</license>
    <licenseUrl>https://licenses.nuget.org/MIT</licenseUrl>
    <projectUrl>https://github.com/devlooped/Observable</projectUrl>
    <description>Sample.</description>
    <readme>readme.md</readme>
    <tags>dotnet csharp</tags>
  </metadata>
  <files>
    <file src="readme.md" target="readme.md" />
  </files>
</package>

Observable.0.2.0.nupkg.zip

which I ran nuget pack on.

[kzu]

I rebased, and I'm getting proper styles:

The app isn't requesting anything other than the fabric.css and bootstrap.min.css:

And those seem to be the default alert styles in bootstrap indeed:

https://getbootstrap.com/docs/3.4/components/#alerts

That's for the right version of bootstrap in use by the gallery:

[erdembayar]

I rebased, and I'm getting proper styles:

Did you push your rebased code? I don't see any commit from October. Git history shows only commits from beginning of Sep.

Thank you for your patience. I tested your change with https://github.com/kzu/Observable and it works as shown on your screenshot for all markdowns except for Note, which I had tested previously.

The Note should look like the one above. Currently, as shown on your screenshot, it has no coloring.

Additionally, could coloring needs to be stronger? To me, it looks a bit soft. It's not blocker, it's coming from bootstrap.

[kzu]

@erdembayar what I meant is that the rebase didn't make any difference. Just in case, I just pushed anyways after a new rebase.

The NOTE will never look like that because there's no such built-in style for that in bootstrap. I have no idea where you put styles that aren't bootstrap, but if you tell me where, I can add one for NOTE since extending the alert styles is pretty easy in bootstrap. But I think this is going too far. I'm not a designer :).

The PR showcases how adding support for this is straightforward. The unit test shows that the proper classes are emitted. Now all that's left is for you to bring that note style that's used elsewhere in MS docs sites and put it somewhere you like. I didn't find any place with custom styles, which is why I just put something in the fabric.css, but I've no idea if that's the "right" place.

[kzu]

BTW, I'm happy to just copy over from github css the style for the above, but I've no idea if that's what you want design-wise for nuget.org :)

[lyndaidaii]

@kzu, thank you for your contribution. Great work. No worries at all. I will work on the style.

[erdembayar]

BTW, I'm happy to just copy over from github css the style for the above, but I've no idea if that's what you want design-wise for nuget.org :)

Thank you. It looks @lyndaidaii is going to take care of Note.

[erdembayar]

@kzu, thank you for your contribution. Great work. No worries at all. I will work on the style.

For your reference, I found actual Note sample used in our documentation which is also markdown format. See bottom of https://learn.microsoft.com/en-us/nuget/reference/errors-and-warnings/nu1605, also as you can see coloring is Tip little bit different too.

[kzu]

Yeah, that looks better IMO

[lyndaidaii]

I updated CSS file for alert styling, here are how it looks like with these changes.

[erdembayar]

We need to have cross team discussion between client and server team on how to roll out this change. @lyndaidaii @jgonz120

[lyndaidaii]

We need to have cross team discussion between client and server team on how to roll out this change. @lyndaidaii @jgonz120

I sent out email a while back. I will ping that email thread again.

[erdembayar]

We need to have cross team discussion between client and server team on how to roll out this change. @lyndaidaii @jgonz120

I sent out email a while back. I will ping that email thread again.

@lyndaidaii Do you have any recent update?

[srzsantiago]

Hi, I see the pull request has been approved but hasn't been merged. Any update on this?

[kzu]

@joelverhagen is there anything that can be done to avoid the new VS markdown preview (presumably that's the reason?) delaying this any longer?

[lyndaidaii]

@kzu thank you for your patience. Can you resolve the conflict? I will help verify the change and help to merge to in dev. Meanwhile, we are going to work on the VS readme preview in the future to support the alerts.

[kzu]

I can do it if the cross-team thing has been resolved. Otherwise, we'll be in the same situation 4 months from now.

[lyndaidaii]

@kzu, our team decided to support this feature while client team is working on it. if you could resolve the conflict. We could help get this in.