Markdown Previewer concerning "marked" library

Markdown Previewer concerning "marked" library
0

#1

I’ve made previewer, not complete though, but it does markup previewing and it can also render html spiced up with some bootstrap. But i didn’t used “marked” library. Is it mandatory to use it? Is it preferably to use it? Does it prevent XSS attacks and that’s why is preferable/mandatory? Also what it means a “GitHub flavored markdown”?

My html:

<!DOCTYPE html>
<html>
<head>
<title>Markdown Previewer</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="UTF-8" />
</head>
<body>

<div id="root"></div>

</body>
</html>

My js:

import React from 'react';
import ReactDOM from 'react-dom';
import marked from 'marked';//Edit
import 'bootstrap/dist/css/bootstrap.min.css'

class DisplayMessages extends React.Component {
	constructor(props) {
		super(props);
		this.state = {
			input: "",
			messages: []
		}
		this.handleChange = this.handleChange.bind(this);
	}
	
	handleChange(event){

		this.setState({
			
			messages: [event.target.value]
			
		});
	console.log(this.state.messages);
	}
	
       getMarkdownText() {//Edit
		var message = this.state.messages.join("");
		var rawMarkup = marked(message, {sanitize: true});
		return { __html: rawMarkup };
	}

  render() {

    return (
			<div className="text-center">
				<h2>Type in a new Message:</h2>

				<div className="container text-center">
					<form>
						<div className="form-group">
							<label>Comment:</label>
							<textarea className="form-control" onChange={this.handleChange} defaultValue={this.state.value} placeholder="Enter message ..." id="editor"></textarea>
						</div>
					</form>
				</div>

				<!--<div id="preview" dangerouslySetInnerHTML={{__html: this.state.messages}}/>-->
<div id="preview" dangerouslySetInnerHTML={this.getMarkdownText()}/>//Edit

			</div>
    );
  }
};

ReactDOM.render(<DisplayMessages/>, document.getElementById('root'));

Link to codepen version.


#2

The user story says:

(HINT: You don’t need to parse Markdown yourself - you can import the Marked library for this: https://cdnjs.com/libraries/marked). [emphasis added]

To me that means that it is a suggested option. If you can get it to work otherwise, without breaking any other “rule”, then go for it.

But when I try your pen, it is not converting the markdown. For example, if I put *test* into the editor, it should show “test” in the display, in italics. It is just showing me exactly what is in the editor. Perhaps you are misunderstanding what the app is supposed to do.


#3

Hi,

I had one problem doing the markdown previewer. I built my code using webpack, so I imported marked.js using npm. When I tried to pass the tests, many of them failed because they didn’t find a variable marked even though it was already declared in my code.

What happened was that I needed to import the library via a CDN and all tests passed instantly.

Not a problem because that’s what I was going to do anyways when I pasted my code into Codepen, but what I mean by that is that I would be careful using my own implementation of the library because it might throw unexpected errors running the tests. Maybe not, but I just wanted to share my story so you and other campers could take it into consideration.

Happy coding.


#4

Yeah …
Didn’t read carefully, it converts, for example:

<b>abc</b>

to abc


#5

Check it out now(code) in js portion of it. Added/edited is marked(no pun intended) by “edit” beside it.
This is what i used to get marked running without cdn:
npm i marked
then npm install -g npm to update it.
Maybe you just needed to update it?
PS: Link to pen works also now.


#6

“Marked” is up and running. One question though: Not all markup is rendering as in exercise example. Does it have some styling for markup? Just checking or i didn’t do something right? Copy-pasted text from example’s editor to my editor and in preview certain elements aren’t the same.


#7

I don’t know, when I used the npm package it didn’t pas the tests bu it worked like a charm. Then I thought it could be an issue with the tests not being able to check the package, I used the CDN (right in Codepen) and everything was green.

Everything is being translated into HTML, but some things don’t have a default styling, so you need to do it your own. Table, pre, code and other tags won’t show any default styling, for example.


#8

Aha. So some styling, and if npm doesn’t work(for tests) use cdn … Will do. Thanks mate, just wanted to check out from someone who already done it.


#9

Actually I just checked your code and something “optional” is missing yet, so tables won’t work. Code tags and others will work because you used bootstrap, but if you miss something just check the styling and it will probably be that.


#10

I’m just going to do “inspect” on those in example’s preview to see what’s what. I just read task’s user stories, it doesn’t mention anything about styling, but heck, i’ll do it just for hell of it.