Uplift React Markdown

[ShaanCoding]

Feature Details

To fill out more later, but we want to uplift our Preview component in our MainContent react component

It breaks with the following:

• Lists
• Hyperlink in a list
• Checkboxes
• Is not responsive, breaks on mobile (doesn't break words)
• Does not have syntax highlighting (fixable in ReactMarkdown)
• Needs better styling tbh

[ShaanCoding]

From: @MathPow

Describe the bug

The "installation" block have some markdown that is not breakable, like we can see in the screenshot. The code tag doesn't seem the break when it should, it determines the entire page width.

To Reproduce

Steps to reproduce the behavior:

1. Resize your window to have the markdown preview on the bottom and the blocks are a little bit of screen
2. Go to othneildrew-best-readme-template
3. Click on delete on the "installation" block
4. See the layout change

Expected behavior

It should stay the same width when you delete all blocks

Screenshots

https://drive.google.com/file/d/1Me75nAYk0YmQkxRfYgcAlbkqNyknNHMt/view?usp=sharing

[ShaanCoding]

All done, excluding the mobile issue

Also new bug / issue:

• Random image source, source.unsplash.com is now a deprecated service, need a new MS for images

[ShaanCoding]

This is closed, making a new ticket for the unsplash one