DEV Community

Cover image for Markdown Editor Reactjs
GiandoDev
GiandoDev

Posted on

Markdown Editor Reactjs

#react #beginners

First I want to thank @chrisoncode that created the beautiful course 20reactapps where I’m learning a lot by doing.

DEMO

In your CLI run this 🙂:
Alt Text

After write some Css in your index.css:

@import url('https://fonts.googleapis.com/css2?family=Bellota:ital,wght@1,700&display=swap'); body { background: #e8eaf1; font-family: 'Bellota', cursive; } .app { min-height: 100vh; display: grid; grid-template-columns: 1fr 1fr; grid-gap: 15px; } textarea { background: #eff1f5; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06); outline: none; border: none; border-radius: 5px; padding: 20px; font-size: 22px; } .preview { padding-left: 20px; padding-right: 20px; } blockquote { font-size: 30px; background: #efefef; border-left: 12px solid rgb(44, 163, 241); padding: 20px 30px; border-radius: 5px; margin: 0; }
Enter fullscreen mode Exit fullscreen mode

Now install react-markdown
in your CLI (I use yarn but also npm is fine):
Alt Text
And last but not least compile our index.js file like this:

import React, {useState} from 'react' import ReactMarkdown from "react-markdown"; import ReactDOM from 'react-dom' import './index.css' function MarkdownEditor() { const [markdown, setMarkdown] = useState('') function handleChange(e) { setMarkdown(e.target.value) } return ( <div className='app'> <textarea onChange={handleChange} value={markdown} />  <ReactMarkdown className="preview" source={markdown} />  </div>  ) } ReactDOM.render(<MarkdownEditor/>, document.querySelector('#root'))
Enter fullscreen mode Exit fullscreen mode

Our markdown editor is now ready. Have fun 🙂!

Top comments (1)

Collapse
 
petereasterbro1 profile image
Peter • • Edited

Greetings Giando,
I just ran your Markdown app with great interest though not all of the "traditional" options seem to be available.
i.e.:
Text Decoration Types:
Italic
Bold
Bold & Italic
Did I miss something?