Let's discuss your "Markdown Previewer"

Here’s mine

I’d would have liked to ‘colorize’ the block quoting of code… but couldn’t figure out how to do it with out a large search and replace table. I’d appreciate any pointers on adding that, or any comments in general.

Just redid the project with [React/Sass] (https://codepen.io/AzFalconer/pen/rwQYpv)
Sass added absolutely no value to the project, and React … well at least I was exposed to React.

Why not make the textarea input the same height as the marked text display?

Thanks

Markdown Previewer on GitPages

Thank you for your feedback.
I hadn’t been considering seriously about how scroll action affect to user.
I have fix it, so if you can check it once more, I’d be glad.

And yours, If ‘colorize’ means applying ’ syntax highlight’ to code block,
How about looking at CodeMirror or highlight.js?
I hear that the former provide syntax highlight for editor, the latter is for output.
I found demo using these.
https://github.com/marksanghoonkim/markdown-editor/tree/gh-pages.

Looks good. No more double scrolling :slight_smile:

Disregard my 2nd reply regarding formatting of code and block quoting, I replied to the wrong msg. I’ve deleted it now.

And thank you for the pointer to CodeMirror & highlight.js I will check those out.

no sense of design I think, did fix that and it seems a bit better, thanks

Hello guys,
This is my first React.js project and I need some reviews, please.
Project Link - https://codepen.io/askov/full/GEYKbR/
I really like react, it’s great, but actually, I still feel confused about some things.
I would like to ensure my react app architecture is correct and nothing is considered a bad practice.
Thanks in advance.

1 Like

Hi everybody,

I built my markdown previewer with React and Redux.

Have a good day!

here is mine : https://dereje1.github.io/mark-down/

The coding itself was really not that hard and straight forward, trying to learn react was the major bottle neck that took me a while, I feel as if I only have a very rudimentary understanding of react, which I tried to implement here, hopefully I will have a better understanding of it with more projects. Also implemented a preliminary understanding of SASS in this project. That being said, given a decent understanding of these tools I can see how they can be very powerful.

That was my very first React app,
Markdown Previewer : Project link

The mission itself is not hard, but this is another great step in learning process, very interesting tools
By the way, the introductory React course on codecademy.com was very helpful to understand how it works.

Please have a look at my markdown previewer
https://codepen.io/arpit-kapadia/pen/jLmRMm

Here is my Markdown Previewer. It’s nothing fancy, but it does the job:
Project Link - https://codepen.io/mlampert/pen/PKXaYg

Turned out to be a very simple project and good way to get feet wet with React. That said, I lost some time going done a rabbit hole: I wanted to host react locally on my computer and build the project using codekit rather than on CodePen. CodeKit wouldn’t recognize the React syntax, so I eventually gave up, since the only other way I found to host React locally is to use Webpack and install a bunch of stuff via the command line using NPM. I settled for using CodePen and linking to the React CDN when I put the project up on GitHub.

@miampert Try using Create React App for coding react projects on your local machine. It does all the build config stuff for you!

1 Like

@LauraSilvey Thanks for the suggestion! I’ll give it a try!

HI All,

Please take a look at my Markdown Previewer. Would love to hear your feedback.

Thank you for your Time,
Sonali

My first attempt at React:
Project Link - https://codepen.io/the-oc/full/wqNvee

Please take a look at this one :grin:

Codepen Project

This one is mine
Markdown Previewer

My simple Markdown previewer using React https://codepen.io/danegit/pen/yzGxeV

React Markdown previewer => https://jolav.me/freecodecamp/old/data/markdown-previewer/markdown.html

Any feedback is welcome