Markdown Previewer

Developer
Zac Clemans
Size
3,771 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?

A simple Markdown previewer built for freeCodeCamp. Uses React to render the preview.. What is a markdown previewer? How do you make a markdown previewer? This script and codes were developed by Zac Clemans on 14 January 2023, Saturday.

Markdown Previewer Previews
IQ Test

Markdown Previewer - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Markdown Previewer</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <h1 id="title">Markdown Previewer</h1>
<div id="app"></div> <script src='http://cdnjs.cloudflare.com/ajax/libs/react/0.14.3/react.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.5/marked.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Markdown Previewer - Script Codes CSS Codes

body { width: 1000px; margin: 0 auto;
}
@media screen and (max-width: 500px) { body { width: 300px; }
}
#title { text-align: center;
}
.raw-input { float: left; width: 500px; height: 700px; resize: none;
}
@media screen and (max-width: 500px) { .raw-input { float: none; width: 300px; height: 200px; }
}
.formatted-output { float: left; margin-left: 10px; vertical-align: top;
}
@media screen and (max-width: 500px) { .formatted-output { float: none; }
}

Markdown Previewer - Script Codes JS Codes

"use strict";
var MarkdownInput = React.createClass({ displayName: "MarkdownInput", getInitialState: function getInitialState() { return { rawText: "Heading\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 \nline break\nText attributes *italic*, **bold**,\n`monospace`, ~~strikethrough~~ .\n\nShopping list:\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*[Zac Clemans](https://freecodecamp.com/zaclem01)*" }; }, handleTextChange: function handleTextChange(e) { this.setState({ rawText: e.target.value }); this.props.onUserInput(e.target.value); }, render: function render() { return React.createElement( "textarea", { className: "raw-input", onChange: this.handleTextChange }, this.state.rawText ); }
});
var MarkdownOutput = React.createClass({ displayName: "MarkdownOutput", rawMarkup: function rawMarkup() { var rawMarkup = marked(this.props.toFormat.toString(), { sanitize: true }); return { __html: rawMarkup }; }, render: function render() { return React.createElement( "div", { className: "formatted-output" }, React.createElement("span", { dangerouslySetInnerHTML: this.rawMarkup() }) ); }
});
var Previewer = React.createClass({ displayName: "Previewer", getInitialState: function getInitialState() { return { text: "Heading\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 \nline break\nText attributes *italic*, **bold**,\n`monospace`, ~~strikethrough~~ .\n\nShopping list:\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*[Zac Clemans](https://freecodecamp.com/zaclem01)*" }; }, handleUserInput: function handleUserInput(input) { this.setState({ text: input }); }, render: function render() { return React.createElement( "div", null, React.createElement(MarkdownInput, { onUserInput: this.handleUserInput }), React.createElement(MarkdownOutput, { toFormat: this.state.text }) ); }
});
React.render(React.createElement(Previewer, null), document.getElementById("app"));
Markdown Previewer - Script Codes
Markdown Previewer - Script Codes
Home Page Home
Developer Zac Clemans
Username thalpha
Uploaded January 14, 2023
Rating 3
Size 3,771 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!

Zac Clemans (thalpha) Script Codes
Name
JQuery Calculator
OOLO Calculator - Vanilla JS
Simon Says
D3 Map Project
Local Weather App - Refactor
Hero arrow test
FCC Camper Leaderboard
Camper News
D3 Scatterplot Project
Recipe Box Redux Refactor
Create amazing art & images 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!