Import Marked library into project

1

Extremely nooby question:

I just switched from coding in codepen to a local environment. I am trying to do the markdown previewer but can’t for the life of me figure out how to get access to the markdown stuff after I installed it in npm. How do I add it to and import it in my project?

Thanks

2

It depends on which which markdown package you installed. Have you looked at their documentation? Their landing pages should include few examples.

Anyways you would do something like this

const ReactMarkdown = require('react-markdown')

const input = '# This is a header\n\nAnd this is a paragraph'

ReactDOM.render(
  <ReactMarkdown source={input} />,
  document.getElementById('container')
)
1 Like
3

Sorry I should have been more specific I installed “markedjs”

I used the npm command to install it, but its not in my current create-react-app project files and I don’t know how to add and then import it.

Thanks for the help

4

Did you install it locally or globally? If it’s local, and you saved it as a dependency with npm install marked --save, it should be listed in your package.json file and it should be in your node modules.
If it’s global, it’s installed on your system like npm is.

5

If you did npm install --save marked in the project folder, then it will be in the node_modules folder.

You can check to see if you installed it properly by looking in the package.json file, in the dependencies section.

If it is installed, remember to require or import it at the top of the file you wish to use it in.

3 Likes
6

Agreed above and here is an example snippet from my code.

import React, { Component } from 'react';
import "./previewer.css";
import marked from 'marked';

class Previewer extends Component {
  render() {
    return (
        <div id = "preview" dangerouslySetInnerHTML={{__html:marked(this.props.text)}}></div>
    )
  }
}

export default Previewer;
4 Likes
7

Ah!

So it seems i used the install command npm install -g marked which installed it to my machine but not locally. So i tried the --save and got it to work.

Three follow up questions:

  1. if it was saved to my machine how would I have gotten it to work without redownloading it to the project?
  2. Why is the property called “dangerously set InnerHTML” (i realize that’s discussing why you shouldn’t set it, but how does it function?)
  3. My element refuses to update even though I’ve passed the input of the textarea from props. It gives it the initial state but isnt updating after textarea updates. Is there a trick to that?

Under the hood:

import React, { Component } from "react";
import TextInput from './TextInput';
import Preview from './Preview';

class MarkdownPreviewer extends Component {
  constructor(props) {
  super(props);
  this.state = {
    input: "test",
  };
  this.handleChange = this.handleChange.bind(this);
  }

  handleChange(e) {
    let newInput = e.target.value;
    this.setState({
      input: newInput
    });
  }

  render() {
  return (
    <div id="content">
    <div id="left">
    <TextInput change={this.handleChange} input={this.state.input}/>
    </div>
    <div id="right">
    <Preview input={this.state.input} />
    </div>
    </div>
  );
  }
}

export default MarkdownPreviewer;


import React, { Component } from "react";
import marked from "marked";

class Preview extends Component {
  constructor(props){
    super(props);
  }

  render() {
    return (
      <div>
      <h2>Preview</h2>
      <div id = "preview" dangerouslySetInnerHTML={{__html:marked(this.props.input)}}></div>
      </div>
    );
  }
}

export default Preview;

Edit: got it to work by using a self closing textarea instead of the two separate. Thanks everyone!