Real-time Markdown with syntax highlighting

Code Feedback
1

Hey guys,

Just completed the Markdown Previewer challenge and added syntax highlighting using Prism.js. Feedback very much appreciated!

For some reason, the FCC tests won’t pass if inline code is placed inside <code> tags, but they do pass if inside backticks – in this version, Prism can’t highlight inline code.

So here’s the FCC tests version: https://codepen.io/robaish/full/xxrBOGp

And the version with inline code highlighting as well: https://codepen.io/robaish/full/MWodPvz

2

Wow this is a nicely designed markdown!! A decent use of emojis, your choice of color, the original images and quotes, and everything else to be honest.
I’d highly suggest to keep in mind things you were thinking when you were designing this for your future projects.
Good luck :call_me_hand:

1 Like
3

Ya, really nice job on this. My only suggestion would be when in narrow view would it be more convenient to have a separate vertical scrollbar for both the editor and previewer. That way you could scroll both to where you want to make changes and see your changes in real time instead of having to make the changes in the editor and then scroll the window to see them in the previewer. Also, in FF at least, even though the editor window does scroll I am not seeing a scroll bar, which I think is a usability issue. My suggestion would solve this problem too.

1 Like
4

Thanks so much, that’s very kind of you to say! :slight_smile:

1 Like
5

Thanks! As always, very much appreciate the feedback. That’s a good point for sure, has to work well on mobile, too.

6

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.