Markdown preview
How do I make an markdown preview?
In progress.. What is a markdown preview? How do you make a markdown preview? This script and codes were developed by Kevin on 20 August 2022, Saturday.
Markdown preview - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Markdown preview</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="app"></div> <script src='https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.6/marked.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react-dom.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Markdown preview - Script Codes CSS Codes
.flex-center { display: flex; flex-direction: row; justify-content: center;
}
textarea,
.container { box-sizing: border-box; width: 500px; max-width: 100%; height: 500px;
}
textarea { padding: 15px;
}
.container { padding: 0 15px 15px 15px;
}
Markdown preview - Script Codes JS Codes
"use strict";
var Markdown = React.createClass({ displayName: "Markdown", markedDown: function markedDown() { console.log(this.props.text); return { __html: marked(this.props.text) }; }, render: function render() { return React.createElement( "div", { className: "container" }, React.createElement("div", { dangerouslySetInnerHTML: this.markedDown() }) ); }
});
var TextInput = React.createClass({ displayName: "TextInput", getInitialState: function getInitialState() { return { text: "Hashtags determine a heading size, # will create an h1 element, and ## will create an h2, etc.\n\n# I am the mighty H1!\n###### I may be small, but i'm still a heading element!\n\nParagraphs are created by adding spaces between lines. That means this is a p element.\n\nAnd so is this.\n\nIf you want a line break, just add two spaces at the end of the line.\nNotice how this is still on the same line in the markdown preview? That's because there are no additional spaces.\n\nThere are two spaces at the end of this line. \nSo this line has a break element before it.\n\n1. Seven\n2. Reasons\n3. Numbered\n4. Lists\n5. Are\n6. Self\n7. Explanatory" }; }, handleChange: function handleChange(e) { return this.setState({ text: e.target.value }); }, render: function render() { return React.createElement( "div", { className: "flex-center" }, React.createElement( "textarea", { value: this.state.value, onChange: this.handleChange }, this.state.text ), React.createElement(Markdown, { text: this.state.text }) ); }
});
ReactDOM.render(React.createElement(TextInput, null), document.getElementById('app'));
Developer | Kevin |
Username | KevinBruland |
Uploaded | August 20, 2022 |
Rating | 3 |
Size | 3,250 Kb |
Views | 28,336 |
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!
Name | Size |
CSS Transform Sphere | 1,995 Kb |
Pixel Painter Current | 4,014 Kb |
Glossy Buttons | 3,228 Kb |
Local Weather | 3,638 Kb |
Canvas Mouse Position Radial Gradient | 2,031 Kb |
Simon | 5,318 Kb |
Memory | 4,680 Kb |
A Pen by Kevin | 3,135 Kb |
Pomodoro Clock | 4,580 Kb |
Canvas Optical Illusion | 2,148 Kb |
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!
Name | Username | Size |
Responsive Minimal Blog Layout | Hackthevoid | 5,261 Kb |
Reviews and Ratings Star | Zbnmstry | 1,591 Kb |
Brown by pure CSS, no image, no javascript | Aaronchuo | 2,652 Kb |
CSS Letter animations | Sladix | 2,116 Kb |
Bootstrap 3 Price Table | Honglio | 2,655 Kb |
Pure CSS Read More Arrow | Zephyr | 1,747 Kb |
A Pen by Kenny Mark | Kennymark | 5,574 Kb |
Faces SVG animation | ScavengerFrontend | 2,957 Kb |
Revolving Text Landing Page Trial | TimRuby | 2,976 Kb |
Pure CSS albums gallery | Renaudtertrais | 2,978 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!