Markdown Previewer

Developer
Adam
Size
3,929 Kb
Views
6,072
  1. Markdown Previewer Previews
  2. Markdown Previewer HTML Codes
  3. Markdown Previewer CSS Codes
  4. Markdown Previewer JS Codes

How do I make an markdown previewer?

Markdown Previewer made using React for free code camp. What is a markdown previewer? How do you make a markdown previewer? This script and codes were developed by Adam on 28 November 2022, Monday.

Markdown Previewer Previews
IQ Test

Markdown Previewer - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Markdown Previewer</title> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="root"></div> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>
<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.6/marked.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Markdown Previewer - Script Codes CSS Codes

body { font-family: 'Verdana', sans-serif; background: #111;
}
.container { display: flex; width: 100%; margin: 1em;
}
.input { width: 50%; height: 600px;
}
.input textarea { width: 100%; height: 100%; background: #333; border-color: orange; padding: 0.5em; color: #fff;
}
.output { width: 50%; margin-left: 3em; padding: 1em; color: #ff7505;
}

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 placeholder = 'Markdown Previewer\n======\nHeading\n=======\n\nSub-heading\n-----------\n \n### Deeper heading\n\nText attributes *italic*, **bold**, \n`monospace`, ~~strikethrough~~ .\n \nSeparate paragraphs with\nby a blank line.\n\nLeave 2 spaces at the end of a line to do a \nline break\n\nUnordered list:\n\n * Red\n * Yellow\n * Blue\n\nNumbered list:\n\n 1. Red\n 2. Yellow\n 3. Blue\n';
var App = function (_React$Component) { _inherits(App, _React$Component); function App(props) { _classCallCheck(this, App); var _this = _possibleConstructorReturn(this, _React$Component.call(this, props)); _this.state = { input: placeholder }; return _this; } App.prototype.update = function update(e) { this.setState({ input: e.target.value }); }; App.prototype.output = function output(text) { var result = marked(text, { sanitize: true }); return { __html: result }; }; App.prototype.render = function render() { return React.createElement( "div", { className: "container" }, React.createElement( "div", { className: "input" }, React.createElement("textarea", { value: this.state.input, onChange: this.update.bind(this) }) ), React.createElement( "div", { className: "output" }, React.createElement("div", { dangerouslySetInnerHTML: this.output(this.state.input) }) ) ); }; return App;
}(React.Component);
ReactDOM.render(React.createElement(App, null), document.querySelector('#root'));
Markdown Previewer - Script Codes
Markdown Previewer - Script Codes
Home Page Home
Developer Adam
Username rzencoder
Uploaded November 28, 2022
Rating 3
Size 3,929 Kb
Views 6,072
Do you need developer help for 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!

Adam (rzencoder) Script Codes
Name
Scrolling Effects Practice
HTML Canvas Paint App
Wikipedia Viewer
Whack-a-Mole and Simon Game
React Betting App
Scatterplot Graph D3
React Leaderboard
Random Movie Quote Generator
React Game of Life
Calculator
Create amazing sales emails 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!