Project Feedback - Markdown Previewer

Hi campers!

I would like some feedback on my Markdown Previewer.

I had some issues learning about “dangerouslySetInnerHTML”, and it took me a while to understand it. Also, React has such a steep learning curve that it took me a while to get from Random Quote Machine to here, but I am confident that I have the skills to solve the other challenges.

Some questions:

  1. I can’t seem to get the Block Quote, the table, and the list items to show up and indent correctly. It seems like other folks managed this solve this problem via CSS styling. Is that the best way to deal with this, or should Markdown.js solve this on its own?

  2. I still need to solve the #7 optional challenge, so let me know if there are any pointers with that.


For your first question, Markdown.js doesn’t do any CSS styling, it just converts the markdown to HTML. So if you don’t like the default styling for HTML then yes, you need to create your own CSS to style what you see in the previewer.

Some suggestions for your app:

  • When I enlarge both windows the previewer is always on top of the editor and the only way I can see the editor again is to minimize the previewer. A nice extra would be that you can click on the title bar of the editor to bring it on top of the previewer (and vice versa).
  • As I manually increase the text size the editor window creeps under the previewer window and there is no way I can get it back except to decrease the text size. Again, one way to get it back would be to allow the user to click the title bar to put the editor on top of the previewer. Another option would be for the previewer window to move down the page as the editor window grows in height so that it never overlaps in the first place. Basically, you need to make sure your app is responsive to changes in text size.

Hi bbsmooth,

Thanks for your reply! I saw your Drum Machine program from a couple months ago and it’s really fantastic!

Ah, I get what you mean by responsiveness. Can you clarify what you mean by “manually increasing the text size in the editor”? Are you doing this in the CSS? How would a user manually increase the text size without going into CSS? Thanks!

Using Firefox, go to the ‘View->Zoom’ menu and activate ‘Zoom Text Only’. Then while holding down the Ctrl key, scroll your middle mouse button to increase the text size. There are also extensions for Chrome that allow you to do the same thing. A lot of us older people use this feature to make things easier to read. There are some people who need the text size really big. This is basically an accessibility issue. You just want to make sure that your page/app can handle text size increases of at least 300% gracefully.

1 Like