Markdown Edit

online markdown editor/viewer

Programming language: HTML

License: MIT License

Tags: Note-taking & Editors    

Latest version: v0.3

README

Markdown Edit

This is a online markdown editor/viewer. This help you to edit markdown document with the power of web technology.

Quick Start

Try on Demo page. Or Install on your local PC. Check Guide to how to install.

Feature

Editor

Part of Editor is depend on CodeMirror.It enabeles

• Display line number.
• Match Brackets in the document.
• Visible Tab key
• Highlight syntax of markdown.
• Drag and Drop file read.
• Switchable theme.

For more option, see programming API of CodeMirror, and Hack Markdown Edit

Converter

To Convert markdown to html, Markdown-Edit Use Github's API as default.

The raw API is not JSON-based. It takes a Markdown document as plaintext text/plain or text/x-markdown and renders it as plain Markdown without a repository context (just like a README.md file is rendered – this is the simplest way to preview a readme online).

For more infomation, See official Guide

• GitHub API v3
• github-flavored-markdown

NOTICE : GitHub API v3 is limited 5000requests per hour.

Option: Use marked as conveter.

If you checked radio Use marked for conveter markdown-edit use marked and highlight.js instad of Github's API. It is faster than API call and make you enable to use this app at offline. NOTICE : marked does not support anchor.

Viewer

To display converted HTML like Github, Markdown-Edit apply github.css from highlight.js and github-style.css inspired by gollum.

<link rel="stylesheet" href="bower_components/highlightjs/styles/github.css">
<link rel="stylesheet" href="css/github-style.css">

If you want to see raw html what Github's API responsed, click Raw .html button on navbar.

Getting Started

Install On your local PC

Download Sources

use git

git clone http://github.com/georegeosddev/markdown-edit.git

Or download from Here

Download dependencies

use bower

bower install

Deploy to some web server

To avoid ajax error yous should deploy whole files to some web server.

If you are using mac,

ln -s /path/to/markdown-edit ~/Sites/markdown-edit

Then access http://localhost/~usernamehere/markdown-edit

If you have installed python,this way is very easy.

cd /path/to/markdown-edit
python -m SimpleHTTPServer 4567

Then access http://localhost:4567

NOTICE :Google Chrome upper v22.0 is most desirable browser.

usage

Read local file

Only text file is enable to read.

Save to local

This feature is not implemented yet. So view file in Raw, and copy it to clipboard,then past it to your file by your self.

Auto Reload

If you checked Auto Reload.Document will convert into html per 5second if it was changed.

shortcut keys

If you checked Enable Shortcut Key.These shortcut will be enable.

• Exec convert Mac : ⌘ + e Win : ctrl + e
• Browse local file Mac : ⌘ + o Win : ctrl + o
• Read local file Mac : ⌘ + r Win : ctrl + r
• View Raw .md file Mac : ⌘ + m Win : ctrl + m
• View Raw .html file Mac : ⌘ + h Win : ctrl + h
• View html in other window Mac : ⌘ + alt + h Win : ctrl + alt + h

If your are using chrome,

• Enter Full Screen Mode Mac : ⌘ + shift + f Win : F11

Markdown Syntax

This app is based on github-flavored-markdown If you're not already familiar with Markdown, you should spend 15 minutes and go over the excellent Markdown Syntax Guide at Daring Fireball.

You can use markdown syntax and also pure html like this.

Sample of Table for two

---

ID  |Name|Rank
----|----|----
1   |Tom Preston-Werner |Awesome
2   |Albert Einstein |Nearly as awesome

become

ID	Name	Rank
1	Tom Preston-Werner	Awesome
2	Albert Einstein	Nearly as awesome

and

<table>
<tr>
<th>ID</th><th>Name</th><th>Rank</th>
</tr>
<tr>
<td>1</td><td>Tom Preston-Werner</td><td>Awesome</td>
</tr>
<tr>
<td>2</td><td>Albert Einstein</td><td>Nearly as awesome</td>
</tr>
</table>

also become

IDNameRank 1Tom Preston-WernerAwesome 2Albert EinsteinNearly as awesome

Special Thanks

• CodeMirror.
• Github for API and style.
• marked.
• highlight.js.
• Twitter Bootstrap with Font Awesome.
• HTML5 ★ BOILERPLATE.
• jQuery.
• HTML5 ROCKS for usage of BLOB.
• balupton.

Licence

Source code can be found on github, licenced under MIT.

Developed by Takeharu.Oshida