React Markdown Previewer
How do I make an react markdown previewer?
Build a Markdown Previewer using React. A freeCodeCamp Data Visualization Project: https://www.freecodecamp.com/challenges/build-a-markdown-previewer. What is a react markdown previewer? How do you make a react markdown previewer? This script and codes were developed by Tyler Moeller on 06 November 2022, Sunday.
React Markdown Previewer - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>React Markdown Previewer</title> <meta name="viewport" content="width=device-width, initial-scale=1">
<link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.2.0/styles/tomorrow-night-bright.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <!-- **** *** *** *** *** **** * Copyright (C) 2016 Tyler Moeller. All rights reserved. * * All trademarks, product names, and logos on this site * * are the property of their respective owners. * **** *** *** *** *** ****
Assignment Details: - Developed for the freeCodeCamp React Project: Build a Markdown Previewer - Details: https://www.freecodecamp.com/challenges/build-a-markdown-previewer
Requirements for this assignment: - Objective: Build a CodePen.io app that is functionally similar to this: https://codepen.io/FreeCodeCamp/full/obYYqW. - Rule #1: Don't look at the example project's code. Figure it out for yourself. - Rule #2: Fulfill the below user stories. Use whichever libraries or APIs you need. Give it your own personal style. - Rule #3: You must use both Sass and React to build this project. - User Story: I can type GitHub-flavored Markdown into a text area. - User Story: I can see a preview of the output of my markdown that is updated as I type. - Hint: You don't need to interpret Markdown yourself - you can import the Marked library for this: https://cdnjs.com/libraries/marked
Assignment Completed. v1.0 03/28/2016: - Responsive design using HTML5, Font-Awesome, Sass, and React with JSX syntax - All required user stories fulfilled. - Added highlight.js support for nicer code-block styling
To Do: - emoji support -->
<div id="textbox"></div>
<div id="previewer"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react-dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.5/marked.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.2.0/highlight.min.js"></script> <script src="js/index.js"></script>
</body>
</html>
React Markdown Previewer - Script Codes CSS Codes
html { min-height: 100%; position: relative; min-width: 300px; max-width: 1280px; margin: 0 auto;
}
body, textarea { font-family: "Roboto", sans-serif;
}
#mdInput, #mdViewer { float: left; width: 48%;
}
@media screen and (max-width: 768px) { #mdInput, #mdViewer { width: 100%; }
}
#mdInput { resize: none; margin-top: 1%; white-space: pre;
}
@media screen and (max-width: 768px) { #mdInput { height: 50vh; resize: vertical; }
}
#mdViewer { margin-bottom: 5%; background-color: white;
}
@media screen and (min-width: 768px) { #mdViewer { margin-left: 3%; }
}
#mdViewer img { width: 100%;
}
/* inline code comments */
code { background-color: #F0F0F0;
}
#mdViewer .fa { color: #222222; font-size: 1.5em; margin: 0.25em 0.45em 0 0;
}
React Markdown Previewer - Script Codes JS Codes
'use strict';
// Options for marked.js markdown converter
marked.setOptions({ breaks: false, langPrefix: 'hljs ', highlight: function highlight(code) { return hljs.highlightAuto(code).value; }
});
// Viewer for converted markdown
var MDView = React.createClass({ displayName: 'MDView', render: function render() { return React.createElement('div', { id: 'mdViewer', dangerouslySetInnerHTML: { __html: marked(document.getElementById('mdInput').value) } }); }
});
// <textarea> input for text to be converted to markdown
var MDInput = React.createClass({ displayName: 'MDInput', getInitialState: function getInitialState() { var defaultText = '# Markdown Previewer!' + '\n\n### Pictures: ' + '\n\n![alt text](https://placehold.it/900x320/B3DCE6?text=Blue Image)' + '\n\n### Headings:\n# H1\n## H2\n### H3\netc...\n###### H6' + '\n\n### Code blocks:' + '\n```javascript\nfunction hello() {\n console.log(\'Hello!\');\n}\n\nhello();\n```' + '\n\n### Text Decoration:\n' + '*italic*, \n**bold**, \n~~strikethrough~~, \n`inline code or monospace text`' + '\n\n### Unordered lists:\n* item 1\n* item 2\n* item 3' + '\n\n### Ordered lists:\n1. item 1\n2. item 2\n3. item 3' + '\n\n### Hyperlinks: ' + '\n\n*[HyperLink](https://#)*' + '\n\n##### Most markdown engines also allow HTML:\n\n' + '<a href="https://freecodecamp.com/TylerMoeller" target="blank">Developed by Tyler Moeller</a><br>' + '\n<a href="https://twitter.com/Tyler_Moeller" target="_blank"><i class="fa fa-twitter footer"></i></a>' + '\n<a href="https://www.linkedin.com/in/tylermoeller" target="_blank"><i class="fa fa-linkedin footer"></i></a>' + '\n<a href="https://github.com/TylerMoeller" target="_blank"><i class="fa fa-github footer"></i></a>' + '\n<a href="https://freecodecamp.com/tylermoeller" target="_blank"><i class="fa fa-fire footer"></i></a>' + '\n<a href="https://codepen.io/TylerMoeller/pens/public" target="_blank"><i class="fa fa-codepen footer"></i></a>' + '\n<a href="https://tylermoeller.net" target="_blank"><i class="fa fa-wordpress footer"></i></a>'; return { value: defaultText, height: defaultText.split('\n').length + 1 }; }, // Display the default textarea value converted to markdown componentDidMount: function componentDidMount() { ReactDOM.render(React.createElement(MDView, null), document.getElementById('previewer')); }, // Update the markdown preview whenever textarea changes // Adjust the height of the element if needed handleChange: function handleChange(event) { var textAreaHeight = document.getElementById('mdInput').value.split('\n').length; this.setState({ height: textAreaHeight }); this.setState({ value: event.target.value }); ReactDOM.render(React.createElement(MDView, null), document.getElementById('previewer')); }, render: function render() { var markdown = null; markdown = React.createElement('textarea', { id: 'mdInput', autofocus: true, rows: this.state.height, maxLength: '2000', value: this.state.value, onChange: this.handleChange }); return React.createElement( 'div', { className: 'mdInput' }, markdown ); }
});
ReactDOM.render(React.createElement(MDInput, null), document.getElementById('textbox'));
Developer | Tyler Moeller |
Username | TylerMoeller |
Uploaded | November 06, 2022 |
Rating | 3 |
Size | 6,124 Kb |
Views | 10,120 |
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 |
Simon Says | 7,086 Kb |
Local Weather App v1.0 | 5,098 Kb |
Wikipedia Search Engine | 5,311 Kb |
Random Quote Machine | 5,843 Kb |
Build a Tribute Page | 4,756 Kb |
Cheesy Motivational Posters | 4,418 Kb |
Basic Website - Materialize | 0 Kb |
Boostrap Grid Examples | 2,511 Kb |
Show the Local Weather v2 | 5,713 Kb |
JavaScript Calculator | 6,601 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 |
Slides-07-1 POSITION | Exhtml | 1,909 Kb |
Awesome | Samarthpd | 2,901 Kb |
After America | Jonathangarner | 2,686 Kb |
Gulpfile | Aimhigherwebdesign-amy | 1,765 Kb |
Virtual vinyl | Davidpanik | 3,474 Kb |
Welcome | Nakome | 6,076 Kb |
CSS Variables | Jdsteinbach | 4,759 Kb |
CMP5-Opdracht15 | SannevanGastel | 2,733 Kb |
Android Logo with HTML and CSS | Wifi | 2,000 Kb |
STIKHOI | Denmch | 7,122 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!