microsoft / WhatTheHack

A collection of challenge based hack-a-thons including student guide, coach guide, lecture presentations, sample/instructional code and templates. Please visit the What The Hack website at: https://aka.ms/wth
MIT License
1.77k stars 874 forks source link

[WTH Core] 015 & 066 Collapsible sections markdown fix #854

Closed jrzyshr closed 6 months ago

jrzyshr commented 6 months ago

This PR fixes the Markdown for collapsible sections that were not rendering correctly in GitHub pages.

If you read the GH docs, this is how it's SUPPOSED to work in Markdown: https://docs.github.com/en/get-started/writing-on-github/working-with-advanced-formatting/organizing-information-with-collapsed-sections

The problem is that doesn't work when GH Pages translates it to HTML, causing the spell-checker to fail and the page to render gibberish.

The fix is buried deep in this GH forum post: https://github.com/gettalong/kramdown/issues/155#issuecomment-1024896918

Note the "markdown=1" and "markdown="span"" attributes on the

and elements below. This was all it took to fix the rendering issue.

I also needed to hunt for, and change, a hidden CSS style which was hiding the "carrot" that lets the user know if the section is open or closed. This was only in the particular theme for the WTH website.

Our summary here our markdown text here : ```bash echo "Hello markdown" ``' - markdown1 - markdown2 - markdown3 html tags also supported
  1. hello html list tag1
  2. hello html list tag2