--- title: (GitHub-Flavored) Markdown Editor with YAML front matter support --- Features List --- * Ctrl/Cmd + S to save the file * Title front matter becomes filename * Drag and drop a file into here to load it * File contents are saved in the URL so you can share files Examples from [GitHub Flavored Markdown](https://help.github.com/articles/github-flavored-markdown/) --- ### Multiple underscores in words "Normal" Markdown transforms underscores (_) into italics, such that wow_great_stuff becomes wow
great
stuff. It is not reasonable to italicize just part of a word, especially when you're dealing with code and names often appear with multiple underscores. Therefore, GFM ignores underscores in words, like this: * wow_great_stuff * do_this_and_do_that_and_another_thing. ### URL autolinking GFM will autolink standard URLs, so if you want to link to a URL (instead of setting link text), you can simply enter the URL and it will be turned into a link to that URL. So that ```http://example.com``` becomes http://example.com ### Strikethrough GFM adds syntax to create strikethrough text, which is missing from standard Markdown. So that ```~~Mistaken text.~~``` becomes ~~Mistaken text.~~ ### Fenced code blocks Standard Markdown converts text with four spaces at the beginning of each line into a code block; GFM also supports fenced blocks. Just wrap your code in ``` (as shown below) and you won't need to indent it by four spaces. Note that although fenced code blocks don't have to be preceded by a blank line—unlike indented code blocks—we recommend placing a blank line before them to make the raw Markdown easier to read. Here's an example: ``` function test() { console.log("notice the blank line before this function?"); } ``` Keep in mind that, within lists, you must indent non-fenced code blocks eight spaces to render them properly. ### Syntax highlighting Code blocks can be taken a step further by adding syntax highlighting. In your fenced block, add an optional language identifier and we'll run it through syntax highlighting. For example, to syntax highlight Ruby code: ```ruby require 'redcarpet' markdown = Redcarpet.new("Hello World!") puts markdown.to_html ``` We use Linguist to perform language detection and syntax highlighting. You can find out which keywords are valid by perusing the languages YAML file. And here's some javascript code! ```javascript $(function(){ $('div').html('I am a div.'); }); ``` ### Tables You can create tables by assembling a list of words and dividing them with hyphens - (for the first row), and then separating each column with a pipe | , and you can also add extra pipes on the ends: | First Header | Second Header | | ------------- | ------------- | | Content Cell | Content Cell | | Content Cell | Content Cell | You can also include inline Markdown such as links, bold, italics, or strikethrough: | Name | Description | | ------------- | ----------- | | Help | ~~Display the~~ help window.| | Close | _Closes_ a window | Finally, by including colons : within the header row, you can define text to be left-aligned, right-aligned, or center-aligned: | Left-Aligned | Center Aligned | Right Aligned | | :------------ |:---------------:| -----:| | col 3 is | some wordy text | $1600 | | col 2 is | centered | $12 | | zebra stripes | are neat | $1 | A colon on the left-most side indicates a left-aligned column; a colon on the right-most side indicates a right-aligned column; a colon on both sides indicates a center-aligned column. This fork is [on GitHub](https://github.com/monoman/markdown-editor). Thanks --- Thanks to [James Taylor](https://github.com/jbt) who created this thing. :) Props to Mr. Doob and his [code editor](http://mrdoob.com/projects/code-editor/), from which the inspiration to this, and some handy implementation hints, came to James. ### Stuff used to make this: * [marked](https://github.com/markedjs/marked) for Markdown parsing * [CodeMirror](http://codemirror.net/) for the awesome syntax-highlighted editor * [highlight.js](http://softwaremaniacs.org/soft/highlight/en/) for syntax highlighting in output code blocks * [js-deflate](https://github.com/dankogai/js-deflate) for gzipping of data to make it fit in URLs