Updating a blog post after it has been published does not recognize the markdown

[bizcad]

Steps to reproduce:

1. log in as a dummy admin on my dev machine
2. Write a blog post.
3. Save it as a draft.
4. Edited the draft and published it. Exit app to save the cache.
5. Reopen app and log in as dummy admin.
6. Edit the post adding markup, specifically ##
7. Publish the post, exit app.
8. View the post by reopening app and clicking Read the Whole article. The ## shows up as a literal instead of being changed to html.

Discussion

The hash marks were saved as literals and are not changed to html by MarkdownConverter.ToMarkupString(). I ran into this problem a while ago in another Blazor app where I was trying to dynamically change the content of a page. I never was able to fix it. I think it has something to do with the way the string is saved as varchar in the database.

Workaround

The workaround is to put the html into the text box because html tags are valid Markdown. If you edit this issue, you can see I use the html h2 in this post instead of Markdown.

[linkdotnet]

Hey @bizcad.

That is a weird one and I can confirm that I saw it to from time to time and I am really not sure what is causing it.

For the markdown to html conversion I use the Markdig library, which then should be dynamically rendered by Blazor.

Also I can't reproduce it everytime. My idea is to check the output of the HTML, which get's produced by the library. If this is a valid then I am not sure what I can do, besides hoping that the Blazor team fixes that :D.

I will report back later if I can see any issue.

[linkdotnet]

@bizcad

Regarding Step 6: Edit the post adding markup, specifically ##

Did you have a space between ## and the text? Like this: ## My h2 header?

[linkdotnet]

I checked what is returned from the library after ## and under certain circumstances (have to check which) the value is <p>## Title</p>

The reason seems to be some unicode characters (namely U+A0), which are printed instead of the blank character. Will investigate further.

[linkdotnet]

I guess I know where this is coming from. Are you using a MacBook or MacOS?

For example Option + Spacebar will create the unprintable U+A0, which looks like a regular space. There are multiple such unicode-spaces: https://jkorpela.fi/chars/spaces.html

I will contact the maintainer of the library if it would makes sense to include them into markdown, but chances are slim. Also GitHub doesn't recognize this: ## This should be h2

[bizcad]

Hi Steven,

I ran into this issue a year or two ago. I was using Markdig in another project.

Here is a little <tl;dr>

I had a survey I was writing in Blazor. I had a table called DataDictionaryItem which described the data types in the survey, the question header text, the question text , question help text and other meta data about the form field. The idea was to allow the user to modify the text of the question if she was an admin. An edit icon link showed up on the survey question if the logged in user had Authorization to view the link. The user would then be taken to a form which did CRUD on the DataDictionaryItem table. I then could use the DataDictionaryItem table to generate the razor form.

When I saved the markdown to the sql table and brought it back to display on the form, the markdown was not rendering correctly. So at the time, I just made the user put in html. Looking at Markdown.cs, It looks like Alexandre did some work since I was in the code. I do not remember seeing the MarkdownPipeline.

My recollection is that sql server had trouble saving and retreiving markdown in a varchar(255) column. It may be I should have used nvarchar(255) and saved the markdown as unicode.

Nick Stein

[bizcad]

Steven,

You may be correct. I do not recall whether I had spaces. I know I did not write #space#. I may have written ##Heading2text instead of ##spaceHeading2Text. That would possible be an explanation.

BTW the textbox on github issues has the same problem with markdown. When I was writing the issue #110 and went to preview it, it was rendered incorrectly. 😉 That was why I wrote the way I did in the issue.

Nick Stein

[bizcad]

Hello Steven,

No I am using a windows 11 machine. It is my primary development machine.

Edition Windows 11 Pro

Version 22H2

Installed on ‎9/‎21/‎2022

OS build 22621.674

Experience Windows Feature Experience Pack 1000.22634.1000.0

In reply to your last message.

Somewhere the code adds the paragraph html. I found the similar problem in the IntroductionCard.razor page.

@MarkdownConverter.ToMarkupString(Configuration.Introduction.Description)

Was being rendered as

This is my Introduction Description

This rendering was being done somewhere in the guts of Markdown.cs

I discovered this issue because I was trying to change the color of the Introduction.Description and changing the color in the css did not work because of the added paragraph markup. I got around it by changing the component to.

@MarkdownConverter.ToMarkupString(Configuration.Introduction.Description)

So that the whole div contain the

was colorized differently. Which is a more elegant solution.

Nick Stein

[linkdotnet]

Hey Nick, thanks for the detailed explanation. It is a very valid point, that if the database is VARCHAR instead of NVARCHAR this could lead to trouble.

At least on SQL Server, EF Core will create NVARCHAR by default if not specified differently. I am not sure how the express version handles that. I also played with the thought of onboarding other database provider like LiteDB or other headless databases, which make the initial setup easier.

With all the given new evidence can you still reproduce the issue? So if Content is of type NVARCHAR and there is a space between the header-fence and the header text (## h2-text).

[linkdotnet]

I discovered this issue because I was trying to change the color of the Introduction. Description and changing the color in the css did not work because of the added paragraph markup. I got around it by changing the component to.

At some point, I was very keen to introduce theming into the blog, but never made the real cut (mainly because I am terrible at designing, so finding new themes or even a dark mode was difficult for me).

In theory, it should be possible to add themes. I already introduced variables, which should be used everywhere and the only thing a theme has to do is to introduce new colors.

If you have any ideas regarding styling or whatnot let me know. I am eager to discuss this. Thanks again for the nice discussion Nick.

Cheers Steven

[linkdotnet]

For now, I will close the issue, if this pops up again let us reopen this one.