Why doesn't Markdown page render correctly on my Github Pages site?

Question

I want to upload markdown files to my GitHub pages site. The Markdown preview in VSCode looks great:

But the corresponding page on my site is completely unformatted:

It doesn't even look like markdown at all - it looks like a regular text file. I'm really confused because there is no compile errors, and other people seem to find markdown really intuitive.

Things I have tried so far, to no avail:

• replacing .md with .markdown
• creating additional markdown files and replicating the problem
• running on different browsers (safari, chrome) and different devices (mac, iphone)

Here is the link to the page: http://madeleine2you.com/bookposts/dontforget/hardboiledwonderlandandtheendoftheworld.md. and to the site in general if that could be helpful: http://madeleine2you.com

Answer 1

I use Oscar Morrison's md-page. This is just a line

<script src="https://rawcdn.githack.com/oscarmorrison/md-page/master/md-page.js"></script><noscript>

added at the top of your md page.

And change the extension of the md file to html.

https://github.com/oscarmorrison/md-page

Answer 2

Browsers do not have native support for converting Markdown to HTML.

Github has code that does that conversion when you look at Markdown files in the repository view, but it doesn't apply any of the repository preview formatting to Github Pages sites.

You will need to convert the Markdown to HTML at build time. The introductory documentation links off to a guide to using Markdown with Jekyll at the end.