Upgrade react-markdown to version 6

[kmcgrady]

📚 Context

This resolves some issues with markdown. The upgrades introduced
some breaking changes, so the changes have been made. Specifically:

• Code Blocks were updated to the new Components standard
• Installation of rehype plugins for math and raw HTML

NOTE: Specific upgrade to version 6 over version 7. Version 7 forces us onto ESM. I think it's possible but requires much more refactor.

• What kind of change does this PR introduce?

  • Refactoring

🧪 Testing Done

• Screenshots included
• Added/Updated unit tests
• Added/Updated e2e tests

🌐 References

• Issue: Closes
  • Parsing error for nested HTML #3190
  • https://github.com/streamlit/streamlit-issues/issues/70
  • unsafe_allow_html does not support nested tags #3616
  • st.markdown("...", unsafe_allow_html=True) converts html elements to lowercase #2554

---

Contribution License Agreement

By submitting this pull request you agree that all contributions to this project are made under the Apache 2.0 license.

[stale]

This pull request has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[mayagbarnes]

Looks good to me! 😄

Admittedly, I still find the updated snapshots for caption-3.snap.png & caption-3-dark.snap.png confusing... if I'm understanding, the vertical gap between "This is a caption that contains" and "html" is bc of the <div> tag... but I would think the intended behavior is for the word "html" to be rendered within the <div> tag like in the original screenshot.

[kmcgrady]

Yea. The main reason is that When markdown is written in plain text (no header, etc) it's assumed to be in a <p> tag, which I think is correct. The interesting thing, is the <div> appears which breaks the <p> and as a result ends the paragraph, inserts the <div> and continues the text after it. This would be different if it were some inline tag like <strong>. At this point, the Markdown is trying to figure out what to do, and chose this option, which is not unreasonable.

the word "html" remains in the <div> tag.

See the PR preview and you can see when you select the caption test https://share.streamlit.io/streamlit/core-previews/pr-4221

[mayagbarnes]

Gotcha! And spacing makes more sense now, it isn't coming from a blank <div> like I thought but rather the <p> tag's bottom margin. I should probably adjust that test at some point 😅