FreeCodeCamp - Markdown Previewer

Developer
Veronika
Size
3,759 Kb
Views
22,264
  1. FreeCodeCamp - Markdown Previewer Previews
  2. FreeCodeCamp - Markdown Previewer HTML Codes
  3. FreeCodeCamp - Markdown Previewer CSS Codes
  4. FreeCodeCamp - Markdown Previewer JS Codes

How do I make an freecodecamp - markdown previewer?

What is a freecodecamp - markdown previewer? How do you make a freecodecamp - markdown previewer? This script and codes were developed by Veronika on 30 November 2022, Wednesday.

FreeCodeCamp - Markdown Previewer Previews
IQ Test

FreeCodeCamp - Markdown Previewer - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>FreeCodeCamp - Markdown Previewer</title> <link href="https://fonts.googleapis.com/css?family=Space+Mono:400,400i,700,700i" rel="stylesheet"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="root"></div> <script src='https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react-dom.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.2/marked.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

FreeCodeCamp - Markdown Previewer - Script Codes CSS Codes

*, *:before, *:after { box-sizing: border-box;
}
.container { display: -webkit-box; display: -ms-flexbox; display: flex; width: 100%; min-height: 100vh; -ms-flex-flow: row wrap; flex-flow: row wrap; padding: 15px; background-color: rgb(235, 230, 200);
}
.input, .output { -webkit-box-flex: 1; -ms-flex: 1 1 0; flex: 1 1 0; padding: 20px; font-size: 12px; min-width: 300px; font-family: 'Space Mono', monospace;
}
.input { resize: none; border: none;
}
.output { padding-left: 35px;
}

FreeCodeCamp - Markdown Previewer - Script Codes JS Codes

"use strict";
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
var MarkDownPreviewer = function (_React$Component) { _inherits(MarkDownPreviewer, _React$Component); function MarkDownPreviewer(props) { _classCallCheck(this, MarkDownPreviewer); var _this = _possibleConstructorReturn(this, _React$Component.call(this, props)); var placeholder = "\nHeading\n=======\n\nSub-heading\n-----------\n \n### Another deeper heading\n \nParagraphs are separated\nby a blank line.\n\nLeave 2 spaces at the end of a line to do a \nline break\n\nText attributes *italic*, **bold**, \n`monospace`, ~~strikethrough~~ .\n\nShopping list:\n\n * apples\n * oranges\n * pears\n\nNumbered list:\n\n 1. apples\n 2. oranges\n 3. pears\n\nThe rain---not the reign---in\nSpain.\n\n *[Herman Fassett](https://freecodecamp.com/hermanfassett)*"; _this.state = { placeholder: placeholder, output: marked(placeholder) }; _this.handleOnChange = _this.handleOnChange.bind(_this); return _this; } MarkDownPreviewer.prototype.handleOnChange = function handleOnChange(event) { this.setState({ output: marked(event.currentTarget.value) }); }; MarkDownPreviewer.prototype.createMarkup = function createMarkup(str) { return { __html: str }; }; MarkDownPreviewer.prototype.render = function render() { var output = marked(this.state.output); return React.createElement( "div", { className: "container" }, React.createElement( "textarea", { className: "input", onChange: this.handleOnChange }, this.state.placeholder ), React.createElement("div", { className: "output", dangerouslySetInnerHTML: this.createMarkup(output) }) ); }; return MarkDownPreviewer;
}(React.Component);
ReactDOM.render(React.createElement(MarkDownPreviewer, null), document.getElementById('root'));
FreeCodeCamp - Markdown Previewer - Script Codes
FreeCodeCamp - Markdown Previewer - Script Codes
Home Page Home
Developer Veronika
Username ivhed
Uploaded November 30, 2022
Rating 3
Size 3,759 Kb
Views 22,264
Do you need developer help for FreeCodeCamp - Markdown Previewer?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Veronika (ivhed) Script Codes
Name
CSS Baby
CSS Filter Blur
FreeCodeCamp - Wikipedia Viewer
CSS Course - Fluid layout
FreeCodeCamp - Pomodoro Clock
React Pagination
Background blend mode
FreeCodeCamp - Tribute Page
FreeCodeCamp - Twitch.tv
CSS Course - Build-a-Kitty Workshop
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!