Skip to content

Instantly share code, notes, and snippets.

@thusmiley
Last active Jul 17, 2021
Embed
What would you like to do?
Markdown Previewer - freeCodeCamp (solution)
//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>
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"));
$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