Markdown Editor Reactjs

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 🙂:

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;
}

Now install react-markdown
in your CLI (I use yarn but also npm is fine):

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'))

Our markdown editor is now ready. Have fun 🙂!

Comments

[Peter]

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?