Your HTML

HTML markup

HTML HAML Markdown

<div data-ng-app="MarkdownEditor"> <div data-ng-controller="MainCtrl"> <div class="col"> <h2>Your Markdown</h2> <textarea class="input" data-ng-model="input" data-ng-change="convert()"> </textarea> </div> <div class="col"> <h2>Your preview</h2> <div class="output" data-ng-bind-html-unsafe="output"></div> </div> </div> </div> <script src="http://bphogan.com/lib/markdown.js"></script>

Your CSS

CSS Markup

CSS Sass SCSS

.col{ float: left; width: 45%; margin-right: 2%; } .input, .output{ width: 99%; border:1px solid #ddd; min-height: 300px; }

Your Javascript (no script tags needed)

Script Markup

JS CoffeeScript ES6

var MarkdownEditor = angular.module('MarkdownEditor', []); // The service for converting Markdown. MarkdownEditor.service('MarkdownConverter', function() { this.convert = function(input) { return markdown.toHTML(input); }; }); // The controller var MainCtrl = function($scope, MarkdownConverter){ // set the initial value so it's not blank $scope.input = "Hi there!\n===\n\nThis is content filled in by the Angular controller.\n\nAdd some new text and see the live preview change."; // Make the conversion available to the scope so the // change event can use it. $scope.convert = function(){ $scope.output = MarkdownConverter.convert($scope.input); }; };

Examples

Each example will load HTML, CSS, and Javascript into the editor tabs. If you're running this with Javascript enabled, we'll also automatically render the examples.

CSS

• CSS Cascade example (All browsers)
• Multiple border colors on boxes (Firefox 3.5+)
• Horizontal menu from a list (All browsers)
• Shutterfly Button (IE10, Firefix, Chrome, Safari)
• Shadows on boxes (Firefox 3.5+, Safari 4, Chrome)
• Rounding Text Fields (Firefox 3.5+, Safari 4, Chrome)
• Shadows on headings (Firefox 3.5+, Safari 4, Chrome)
• Striping tables with CSS 3 (Firefox 3.5+, Safari 4, Chrome)
• Columns in CSS3 (Firefox 3.5+, Safari 4, Chrome)
• HTML 4 Floated 2-column Layout (All Browsers)
• HTML 5 Floated 2-column Layout (All Browsers)

CoffeeScript

• CoffeeScript and jQuery Alerts (All browsers)
• jQuery AJAX GET with CoffeeScript (All browsers)
• jQuery Append and Wrap with CoffeeScript (All browsers)
• Compound Interest Calculator with AngularJS (All browsers)
• Geolocation (Firefox, Chrome, Safari)

HAML and SASS

• Rounded Corners with Sass (Firefox, Chrome, Opera, Safari)
• Simple Sass example (All browsers)
• Simple HAML example (All browsers)
• Advanced HAML and SASS (All browsers)

HTML

• HTML headings (All browsers)
• Basic Elements (All Browsers)
• Some images from Flickr (All browsers)
• HTML5 Audio (Firefox 3.5+, Safari 4+, Chrome)
• A simple table (All browsers)
• Canvas simle shapes (Firefox, Chrome, Safari, IE9)
• New HTML form fields (Firefox, Chrome, Safari, Safari on iOS, IE10)
• In place editing with ContentEditable (Firefox 3.5+, Safari 4+, Chrome)
• Placeholder text on forms (Safari 4, Chrome)

JavaScript

• Document.write (All browsers)
• Simple input and output (All browsers)
• Better input and output (All browsers)

JavaScript - AngularJS

• Simple databinding (All browsers)
• Simple databinding with Controller (All browsers)
• Markdown Live Preview (All browsers)

Other APIs

• LocalStorage (IE8, Firefox 3.5, Chrome 4, Safari 4, Opera 10.5)
• Geolocation (Firefox, Chrome, Safari)

jQuery

• Append and Wrap (All browsers)
• Simple AJAX GET request to grab the time. (All browsers)
• jQuery dialog (All browsers)

Rendera makes learning HTML5 and CSS3 easy!

Type in your HTML and CSS to see it rendered. Each time you press the Enter key, the live preview will update.

You can save your results to a file - just look under the export tab.

Learn By Example

I'm adding HTML5 and CSS examples so you can start playing around with all of the neat stuff you'll be able to use. Just click the examples tab, choose an example, and see it rendered immediately.

Javascript Support

You can try out some Javascript too. We've even loaded jQuery, jQuery Tools and jQuery UI so you can experiment with those libraries too!

Other Markup

I use HAML and SASS in a lot of the web work I do. You can use HAML and SASS instead of HTML and CSS if you'd like. This is where the source tab comes in handy - you can see your HAML and SASS converted to HTML and CSS in real-time. This is a great way to learn how to use these new markup languages to quickly develop web pages.

Security and Safety First

We've disabled Ruby evaluation in HAML markup, so you can only use HAML to generate HTML tags. You can't use it to do complex Ruby expressions.

Finally, we save people's code here, but it's not private, it's not secure, and it could damage your computer if you followed a link here. We're not responsible, and if people can't behave themselves we'll take the permalink feature away. So be nice to this service and be nice to your fellow web users.

Have fun learning, and go build something awesome.