Let's discuss your "Markdown Previewer"

I Built This
1

Greetings, Fellow Campers!

This topic is for listing and review of Markdown Previewer projects built as a part of FCC challenges. Please stick to these basic rules to keep the topic clean:-

  • Post your Codepen (or other) link to your project as a general reply to this topic.
  • For Codepen links use the following format to avoid embedding the pen:-
Project Link - [http://codepen.io/santakmishra/full/pgqOYq/](http://codepen.io/santakmishra/full/pgqOYq/)
  • Post reviews as a specific reply to the link which you are reviewing.
2

Please have a look at my Markdown Previewer

Project Link - https://codepen.io/d33con/full/reJKxj/

I used SCSS instead of Sass, does this matter?

This is my first project in React, any comments on the code or design appreciated!

3

SCSS and Sass are part of the same preprocessor so I suppose it’s OK.

4

Hello,

This is my markdown previewer : http://codepen.io/David44/pen/gMraXY

I’m not too worried about the sass part but since I started react only a few days ago, it’s the best time to avoid taking bad habits.
So, if someone can have a look at it and tell me if it’s ok, or if I’ve done something wrong, please go for it.

Cheers

5

Well, you shouldn’t render body.
reasons

6

That makes sense, thanks for the advice and the article.

7

http://codepen.io/jacobBogers/pen/ezJgJG check it out

8

I checked out your app. The theme looks really cool. :slight_smile:

It seems like bullet points aren’t displayed in the output box. Also, there’s no margin on the left of the output box so it’s a little hard to read.

The syntax highlighting is sweet, too.

9

Hey guys,

I made a real basic markdown app using skeleton framework. I’d love some feedback on my React code because my js is only 35 lines and it seems a little too simple. :slight_smile:

MarkdownApp - http://codepen.io/willgriffiths/pen/zBKPmw/

10

Yes, the standard markup of the html is cleaned out, (css reset) I need to add it back maybe someday when I have more time.

11

Codepen here

12

Project link - http://codepen.io/perlhax27/pen/vKjYwW

13

Project Link - https://codepen.io/bsandusky/full/WxJoOR/

14

Project Link - https://jenovs.github.io/fcc-markdown/

15

Project Link - https://codepen.io/FaizAhmadF/full/EyzZWP/

16

Project Link ─ FreeCodeCamp : Build a Markdown Previewer

17

My project link is - http://codepen.io/ubershibs/full/QKEYgw/ - It’s my first React project, so any feedback on approach would be great. I think it’s pretty much like the bulk of the others posted here, so that’s probably a good sign?

18

Nicely done! Better than my attempt.

A few minor items: It’s worth noting that createClass is superseded by ES6 Class keyword. In practice that means a few changes, most notably that you’ll need to define a constructor() wherein this.state is set directly, rather than getInitialState().

Also, you may wish to explore stateless function components in future challenges. OutputBox is then simply:

const OutputBox = ({value}) => {
    return (
      <div className="output">
        <h2>Output</h2>
        <div id="outputbox" dangerouslySetInnerHTML={{ __html: value }} />
      </div>
    );
};

And notice de-structuring in the function definition. A variable by the same name as the object passed in as an argument is created, eliminating the need to explicitly set a variable to props.value.

19

Thanks for the feedback! I really need to get my head wrapped around ES6… Any chance you (or anyone) knows a good place to get started with that?

20

Hello, Campers!
My Project Link - http://codepen.io/AleksandrSidorov/full/BLdqGQ/.
I used PostCSS instead of SASS. Higlight.js library for code snippets highligting with Solarized Dark style. Any feedback is welcome.