support markdown in comments

js/react/entry.js

@@ -1,6 +1,7 @@
// following along http://facebook.github.io/react/docs/tutorial.html
import React from "react";
import marked from "marked";
require('./style.css');
@@ -16,13 +17,17 @@ class CommentForm extends React.Component {
class CommentList extends React.Component {
	render() {
		let commentNodes = this.props.data.map((comment) => {
			return (
				<Comment author={comment.author}>
					{comment.text}
				</Comment>
			);
		});
		return (
			<div className="comment-list">
				<Comment author="Alice">Down the... halfpipe!</Comment>
				<Comment author="PP">Alice, what blasphemy!</Comment>
				<Comment author="Maybe Not Lewis">Let her be herself, Peter,
					we let you jump around all the time as well...
				</Comment>
				{commentNodes}
			</div>
		);
	}
@@ -33,7 +38,7 @@ class CommentBox extends React.Component {
		return (
			<div className="comment-box">
				<h1>Comments</h1>
				<CommentList />
				<CommentList data={this.props.data} />
				<CommentForm />
			</div>
		);
@@ -42,13 +47,20 @@ class CommentBox extends React.Component {
class Comment extends React.Component {
	render() {
		let rawMarkup = marked(this.props.children.toString());
		return (
			<div className="comment">
				<h2 className="comment-author">{this.props.author}</h2>
				{this.props.children}
				<span dangerouslySetInnerHTML={{__html: rawMarkup}} />
			</div>
		);
	}
}
React.render(<CommentBox />, document.getElementById("content"));
var data = [
	{author: "Alice", text: "Down the... halfpipe!"},
	{author: "PP", text: "Alice, what **blasphemy**!"},
	{author: "Maybe Not Lewis", text: "Let her be herself, Peter, we let *you* jump around all the time as well..."}
];
React.render(<CommentBox data={data} />, document.getElementById("content"));

js/react/package.json

@@ -6,6 +6,7 @@
    "6to5-core": "^3.5.3",
    "6to5-loader": "^3.0.0",
    "css-loader": "^0.9.1",
    "marked": "^0.3.3",
    "react": "^0.13.0-beta.1",
    "style-loader": "^0.8.3",
    "webpack": "^1.5.3"