Last active
July 17, 2021 00:29
-
-
Save thusmiley/4e6eb0f63155b5987f0f2962d974b09e to your computer and use it in GitHub Desktop.
Markdown Previewer - freeCodeCamp (solution)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
//https://codepen.io/thudang211/full/gOWwNVJ | |
<!DOCTYPE html> | |
<html lang="en"> | |
<head> | |
<meta charset="UTF-8" /> | |
<meta http-equiv="X-UA-Compatible" content="IE=edge" /> | |
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
<script | |
crossorigin | |
src="https://unpkg.com/react@17/umd/react.development.js" | |
></script> | |
<script | |
crossorigin | |
src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" | |
></script> | |
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script> | |
<link | |
rel="stylesheet" | |
href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" | |
integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" | |
crossorigin="anonymous" | |
/> | |
<link | |
rel="stylesheet" | |
href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.2/css/bootstrap-reboot.min.css" | |
/> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.17/marked.min.js"></script> | |
<link rel="stylesheet" href="./style.css" /> | |
<title>Markdown Previewer</title> | |
</head> | |
<body> | |
<div id="app"></div> | |
<script type="text/babel" src="./index.js"></script> | |
</body> | |
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
marked.setOptions({ | |
breaks: true, | |
}); | |
const renderer = new marked.Renderer(); | |
function App() { | |
const [text, setText] = React.useState(placeholder); | |
return ( | |
<div className="row"> | |
<div className="editor "> | |
<h5 id="header">Editor</h5> | |
<textarea | |
name="text" | |
id="text" | |
rows="10" | |
value={text} | |
onChange={(event) => setText(event.target.value)} | |
className="textarea" | |
></textarea> | |
</div> | |
<div className="previewer"> | |
<h5 id="header">Previewer</h5> | |
<Preview markdown={text} /> | |
</div> | |
</div> | |
); | |
} | |
function Preview({ markdown }) { | |
return ( | |
<div | |
dangerouslySetInnerHTML={{ | |
__html: marked(markdown, { renderer: renderer }), | |
}} | |
id="preview" | |
></div> | |
); | |
} | |
const placeholder = `# Welcome to my React Markdown Previewer! | |
## This is a sub-heading... | |
### And here's some other cool stuff: | |
Heres some code, \`<div></div>\`, between 2 backticks. | |
\`\`\` | |
// this is multi-line code: | |
function anotherExample(firstLine, lastLine) { | |
if (firstLine == '\`\`\`' && lastLine == '\`\`\`') { | |
return multiLineCode; | |
} | |
} | |
\`\`\` | |
You can also make text **bold**... whoa! | |
Or _italic_. | |
Or... wait for it... **_both!_** | |
And feel free to go crazy ~~crossing stuff out~~. | |
There's also [links](https://www.freecodecamp.org), and | |
> Block Quotes! | |
And if you want to get really crazy, even tables: | |
Wild Header | Crazy Header | Another Header? | |
------------ | ------------- | ------------- | |
Your content can | be here, and it | can be here.... | |
And here. | Okay. | I think we get it. | |
- And of course there are lists. | |
- Some are bulleted. | |
- With different indentation levels. | |
- That look like this. | |
1. And there are numbered lists too. | |
1. Use just 1s if you want! | |
1. And last but not least, let's not forget embedded images: | |
![freeCodeCamp Logo](https://cdn.freecodecamp.org/testable-projects-fcc/images/fcc_secondary.svg)`; | |
ReactDOM.render(<App />, document.getElementById("app")); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
$text-bgcolor: #C0D8D8 | |
$header-color: #4AA3A3 | |
* | |
margin: 0 | |
padding: 0 | |
box-sizing: border-box | |
body | |
background-color: #87B5B6 | |
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif | |
font-size: 1em | |
height: 100vh | |
img | |
max-width: 300px | |
.row | |
display: flex | |
flex-direction: row | |
position: relative | |
justify-content: center | |
align-items: center | |
#header | |
display: block | |
background-color: $header-color | |
padding: 5px | |
textarea | |
border: none | |
#text, #preview | |
width: 47vw | |
overflow-y: scroll | |
padding: 10px | |
height: 85vh | |
background-color: $text-bgcolor | |
#text:focus, #text:active | |
outline: none | |
box-shadow: none | |
.editor, .previewer | |
max-width: 47vw | |
margin: 20px 10px | |
box-shadow: 5px 5px 15px 5px #203a3a | |
background-color: $text-bgcolor | |
.editor > h5 , .previewer > h5 | |
font-weight: bold | |
#preview code | |
background-color: white | |
padding: 3px | |
font-weight: bold |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment