Git Markup Language Editor

Developer
Bob Sutton
Size
3,100 Kb
Views
28,336
  1. Git Markup Language Editor Previews
  2. Git Markup Language Editor HTML Codes
  3. Git Markup Language Editor CSS Codes
  4. Git Markup Language Editor JS Codes

How do I make an git markup language editor?

A simple Git Markup language editor that makes minimal use of SASS (because there is not much that can be done with it at this stage) and greater use of React.js.. What is a git markup language editor? How do you make a git markup language editor? This script and codes were developed by Bob Sutton on 11 September 2022, Sunday.

Git Markup Language Editor Previews
IQ Test

Git Markup Language Editor - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Git Markup Language Editor</title> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>
<link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Gloria+Hallelujah'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <h1 class="text-center headers">Git Markup Language Editor</h1>
<div class="container"> <div class="row first-row"> <div class="col-sm-6"> <h3 class="headers text-center">Put markup here</h3> <div id="left-panel"></div> </div> <div class="col-sm-6"> <h3 class="headers text-center">Rendered markup</h3> <div id="right-panel"></div> </div> </div>
</div> <script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/763768/marked.js'></script>
<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/763768/react.js'></script>
<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/763768/react-dom.js'></script> <script src="js/index.js"></script>
</body>
</html>

Git Markup Language Editor - Script Codes CSS Codes

body { background-color: #efffff; margin-bottom: 50px;
}
.headers { font-family: Gloria Hallelujah; font-weight: bold;
}
.row { margin-left: auto; margin-right: auto;
}
.first-row { margin-top: 50px; margin-bottom: 15px;
}
#left-panel { padding: 0px; height: 600px;
}
#right-panel { padding-left: 20px; padding-right: 5px; padding-bottom: 5px; height: 600px;
}
textarea { padding: 5px; width: 100%; height: 100%; resize: none;
}

Git Markup Language Editor - Script Codes JS Codes

var initText =
"Heading\n" +
"=======\n" +
"\n" +
"Sub-heading\n" +
"-----------\n" +
" \n" +
"### Another deeper heading\n" +
" \n" +
"Paragraphs are separated by a blank line.\n" +
"\n" +
"Leave 2 spaces at the end of a line to do a line break\n" +
"\n" +
"Text attributes *italic*, **bold**, `monospace`, ~~strikethrough~~ .\n" +
"\n" +
"Shopping list:\n" +
"\n" +
" * apples\n" +
" * oranges\n" +
" * pears\n" +
"\n" +
"Numbered list:\n" +
"\n" +
" 1. apples\n" +
" 2. oranges\n" +
" 3. pears\n" +
"\n" +
"The rain---not the reign---in Spain.\n" +
"\n" +
" *[Bob Sutton](https://freecodecamp.com/anischyros)*";
marked.setOptions(
{ renderer: new marked.Renderer(), gfm: true, tables: true, breaks: false, pedantic: false, sanitize: true, smartLists: true, smartypants: false
});
var TextField = React.createClass(
{ propType: { text: React.PropTypes.string }, getDefaultProps: function() { return { text: "" }; }, render: function() { return React.DOM.textarea( { value: this.state.text, onChange: this._textChange }); }, getInitialState: function() { return { text: this.props.text }; }, _textChange: function(event) { this.setState({ text: event.target.value }); document.getElementById("right-panel").innerHTML = marked(event.target.value); }
});
ReactDOM.render( React.createElement(TextField, {text: initText}), document.getElementById("left-panel"));
document.getElementById("right-panel").innerHTML = marked(initText);
Git Markup Language Editor - Script Codes
Git Markup Language Editor - Script Codes
Home Page Home
Developer Bob Sutton
Username anischyros
Uploaded September 11, 2022
Rating 3
Size 3,100 Kb
Views 28,336
Do you need developer help for Git Markup Language Editor?

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!

Bob Sutton (anischyros) Script Codes
Name
Web calculator
The Game of Life
FreeCodeCamp Leader Board
Worldwide Meteor Strikes Map
Contiguity Graph of Countries
Life in a Dungeon
Wikipedia Lookup Page
Pomodoro Clock
Generic Simon Game
The Mark Twain Random Quote Machine
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!