My Markdown Previewer - Any Feedback appreciated!

Code Feedback
1

Here’s my Markdown Previewer

  • Built with React and SASS… my first time with both of them :wink:

Thank you for any Feedback!

2

DUDE! This is so cool in functionality.

But personally(my issue, not important) I prefer not that much dark theme! The paradox part is the editing panel is white, and the preview is black. Kills eyes, after some second work, now I see everything inverted.

There are people out there like dark theme, ok. but usually white themes come beside the dark one.
I suggest you go for theming it up.

Another good stuff you would add is ability to minimize editing and preview panel. Just a simple minimize button for instance to minimize(hide, etc…) the preview or editing panel.

This could be too much, but if you could syntax color the user input in editing panel, so AWESOME.
Another great idea could be syntax and data checking in input editor, same as auto complete option.

I also wondered why it’s not fully wide to screen width in desktop? 800px? why not full width?

Having a monospaced font for editor is good also.

Awesome work. Keep going on great work, happy programming.

1 Like
3

An odd thing I found is that you used ReactDOM.render twice. I think the preferred approach is to make a “root” component that will render both <Title /> and <TextBoxes />, then render that root component with just one ReactDOM.render call.

Non fixed-width text in a markdown editor bugs me :stuck_out_tongue: but otherwise it looks neat.

1 Like
4

Hey @NULL_dev

Thank you very much for this extensive feedback!

Yeah, somehow I felt doing this in dark :wink:, but you’re right, the editor in white and preview in dark is kinda hard. I switched the editor now to dark as well so it’s at least consistently dark.

Could be quite nice with some smooth transition being added. Will check on this one!

Yeah, let me build another JS Bin …:grinning:.

Tried adding some highlighting with highlight.js, but unfortunately it can’t be applied to textareas… eventually in the preview, but somehow I couldn’t make it work there up to now…

You’re completely right. Made it full screen now for bigger screens as well as added the monospace for the editor, like it.

Thanks again for your inputs! Happy coding to you too…

5

Hey @kevcomedia

Thanks to you too for your feedback!

You’re completely right, having two ReactDOMrender doesn’t make sense. Hence, I’ve adjusted this so there is only one root component.

What exactly do you mean by “Non fixed-width text”? :grinning:

6

I meant “not monospace” :slight_smile:

But it looks like you’ve updated the textarea, and it looks much better

1 Like