First I want to thank @chrisoncode that created the beautiful course 20reactapps where I’m learning a lot by doing.
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 🙂!
Top comments (1)
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?