thusmiley/index.html

## index.html
//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>

## index.js
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"));

## style.sass
$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
	//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