-
Notifications
You must be signed in to change notification settings - Fork 145
/
index.html
executable file
·367 lines (305 loc) · 16.5 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="title" content="Markdown Edit">
<meta name="author" content="Takeharu.Oshida">
<meta name="email" content="georgeosddev@email.com">
<meta name="description" content="online markdown editor with realtime html preview.">
<meta name="keywords" content="markdown, github, github-flavored-markdown, FileAPI, codemirror, george_osd">
<title>Markdown Edit</title>
<link rel="shortcut icon" href="favicon.ico">
<link rel="stylesheet" href="bower_components/normalize-css/normalize.css">
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="bower_components/codemirror/lib/codemirror.css">
<link rel="stylesheet" href="bower_components/highlightjs/styles/github.css">
<link rel="stylesheet" href="css/github-style.css">
<link rel="stylesheet" href="css/style.css">
<link id = "htmlStyle" rel="stylesheet" href="css/empty.css">
<script src="bower_components/modernizr/modernizr.js"></script>
</head>
<body>
<header id="header">
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#"><i class="fa fa-pencil-square-o"></i> Markdown Edit</a>
</div>
<div class="collapse navbar-collapse">
<form class="navbar-form">
<div id="menu1" class="btn-group pull-left">
<button id="btnConv" class="btn btn-small btn-default" data-toggle="tooltip" title="convert <br>Mac : ⌘ + e<br>Win : ctrl + e"><i class="fa fa-caret-right"></i> convert</button>
<button id="btnRawMd" class="btn btn-small btn-default" data-toggle="tooltip" title="view Raw .md <br>Mac : ⌘ + m<br>Win : ctrl + m"><i class="fa fa-pencil-square-o"></i>Raw .md</button>
<button id="btnRawHtml" class="btn btn-small btn-default" data-toggle="tooltip" title="view Raw .html <br>Mac : ⌘ + h<br>Win : ctrl + h"><i class="fa fa-file-code-o"></i>Raw .html</button>
<button id="btnHtml" class="btn btn-small btn-default" data-toggle="tooltip" title="view html on other window <br>Mac : ⌘ + alt + h<br>Win : ctrl + alt + h"><i class="fa fa-html5"></i>.html</button>
</div>
<div id="menu5" class="input-group pull-left">
<!-- <div class="input-group">
<input id="externalCssUri" class="form-control col-xs-6" type="text" placeholder="external css uri">
<span id="applyCss" class="btn input-group-addon" type="button" data-toggle="tooltip" title="toggle css">+</span>
</div> -->
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="true">
Theme
<span class="caret"></span>
</button>
<ul class="dropdown-menu scrollable-drop" role="menu" aria-labelledby="dropdownMenu1">
<li><a class="select-theme active" href="#" data-theme="default">default</a></li>
<li><a class="select-theme" href="#" data-theme="3024-day">3024-day</a></li>
<li><a class="select-theme" href="#" data-theme="3024-night">3024-night</a></li>
<li><a class="select-theme" href="#" data-theme="ambiance-mobile">ambiance-mobile</a></li>
<li><a class="select-theme" href="#" data-theme="ambiance">ambiance</a></li>
<li><a class="select-theme" href="#" data-theme="base16-dark">base16-dark</a></li>
<li><a class="select-theme" href="#" data-theme="base16-light">base16-light</a></li>
<li><a class="select-theme" href="#" data-theme="blackboard">blackboard</a></li>
<li><a class="select-theme" href="#" data-theme="cobalt">cobalt</a></li>
<li><a class="select-theme" href="#" data-theme="eclipse">eclipse</a></li>
<li><a class="select-theme" href="#" data-theme="elegant">elegant</a></li>
<li><a class="select-theme" href="#" data-theme="erlang-dark">erlang-dark</a></li>
<li><a class="select-theme" href="#" data-theme="lesser-dark">lesser-dark</a></li>
<li><a class="select-theme" href="#" data-theme="mbo">mbo</a></li>
<li><a class="select-theme" href="#" data-theme="mdn-like">mdn-like</a></li>
<li><a class="select-theme" href="#" data-theme="midnight">midnight</a></li>
<li><a class="select-theme" href="#" data-theme="monokai">monokai</a></li>
<li><a class="select-theme" href="#" data-theme="neat">neat</a></li>
<li><a class="select-theme" href="#" data-theme="neo">neo</a></li>
<li><a class="select-theme" href="#" data-theme="nightnight">night</a></li>
<li><a class="select-theme" href="#" data-theme="paraiso-dark">paraiso-dark</a></li>
<li><a class="select-theme" href="#" data-theme="paraiso-light">paraiso-light</a></li>
<li><a class="select-theme" href="#" data-theme="pastel-on-dark">pastel-on-dark</a></li>
<li><a class="select-theme" href="#" data-theme="rubyblue">rubyblue</a></li>
<li><a class="select-theme" href="#" data-theme="solarized">solarized</a></li>
<li><a class="select-theme" href="#" data-theme="the-matrix">the-matrix</a></li>
<li><a class="select-theme" href="#" data-theme="tomorrow-night-eighties">tomorrow-night-eighties</a></li>
<li><a class="select-theme" href="#" data-theme="twilight">twilight</a></li>
<li><a class="select-theme" href="#" data-theme="vibrant-ink">vibrant-ink</a></li>
<li><a class="select-theme" href="#" data-theme="xq-dark">xq-dark</a></li>
<li><a class="select-theme" href="#" data-theme="xq-light">xq-light</a></li>
</ul>
</div>
</div>
<div id="menu2" class="input-group pull-left">
<input id="lefile" type="file" style="display:none">
<div class="input-group">
<input id="fileinput" class="form-control col-xs-6" type="text" placeholder="set your local file">
<span id="btnBrowse" class="input-group-addon" type="button" data-toggle="tooltip" title="browse file <br>Mac : ⌘ + o<br>Win : ctrl + o"><i class="fa fa-folder-open-o"></i></span>
<span id="btnRead" class="input-group-addon" type="button" data-toggle="tooltip" title="read file <br>Mac : ⌘ + r<br>Win : ctrl + r"><i class="fa fa-refresh"></i></span>
</div>
</div>
<div id="menu3" class="pull-left">
<div class="checkbox">
<label>
<input type="checkbox" id="autoReload"> Auto Reload
</label>
<br>
<label>
<input type="checkbox" id="enableShortcut"> Enable Shortcut Key
</label>
</div>
</div>
<div id="menu4" class="radio">
<label>
<input type="radio" name="optionsConverter" id="optionsConverter1" value="githubAPI">
Use Github API for converter
</label>
<br>
<label>
<input type="radio" name="optionsConverter" id="optionsConverter2" value="marked" checked>
Use <a href="https://github.com/chjj/marked" target="blank">marked</a> for conveter
</label>
</div>
</form>
</div>
</div>
</nav>
<a id="githubribbon" href="https://github.com/georgeosddev/markdown-edit" target="_blank"><img style="position: absolute; top: 0; right: 0; border: 0;z-index: 1040" src="https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png" alt="Fork me on GitHub"></a>
</header><!-- /header -->
<section id="main">
<div id="alertMessage" class="alert fade in display-none">
<a class="close" data-dismiss="alert" href="#">×</a>
<p></p>
</div>
<textarea id="in">
# [Markdown Edit](http://georgeosddev.github.com/markdown-edit)
This is a online markdown editor/viewer.<br>
This help you to edit markdown document with the power of web technology.
[](http://georgeosddev.github.com/markdown-edit)
## Quick Start
Try on [Demo](http://georgeosddev.github.com/markdown-edit) page.<br>
Or Install on your local PC. Check [Guide](#on-your-local-pc) to how to install.
## Feature
### Editor
Part of Editor is depend on [CodeMirror](http://codemirror.net/).It enabeles
* Display **line number**.
* **Match Brackets** in the document.
* Visible `Tab` key
* **Highlight syntax** of markdown.
* **Drag and Drop** file read.
For more option, see [programming API](http://codemirror.net/doc/manual.html) of CodeMirror, and Hack [Markdown Edit](http://github.com/georgeosddev/markdown-edit)
### Converter
To Convert markdown to html, Markdown-Edit Use [Github's API](http://developer.github.com/v3/markdown/#render-a-markdown-document-in-raw-mode) as default.<br>
For more infomation, See official Guide
* [GitHub API v3](http://developer.github.com/v3/markdown/)
* [github-flavored-markdown](http://github.github.com/github-flavored-markdown/)
*NOTICE* : [GitHub API v3](http://developer.github.com/v3/#rate-limiting) is limited 5000requests per hour.
#### Option: Use [marked](https://github.com/chjj/marked) as conveter.
If you checked radio `Use marked for conveter` **markdown-edit** use [marked](https://github.com/chjj/marked)
and [highlight.js](http://softwaremaniacs.org/soft/highlight/en/) instad of Github's API.
It is faster than API call and make you enable to use this app at offline.
*NOTICE* : [marked](https://github.com/chjj/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](https://github.com/gollum/gollum/blob/master/lib/gollum/public/gollum/css/template.css).
```html
<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](http://developer.github.com/v3/markdown/#render-a-markdown-document-in-raw-mode) responsed, click `Raw .html` button on navbar.
## Getting Started
### Install On your local PC
#### Download Sources
use git
```bash
git clone http://github.com/georegeosddev/markdown-edit.git
```
Or download from [Here](https://github.com/georgeOsdDev/markdown-edit/zipball/master)
#### Download dependencies
use [bower](http://bower.io/)
```bash
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,
```bash
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.
```bash
cd /path/to/markdown-edit
python -m SimpleHTTPServer 4567
```
Then access http://localhost:4567
*NOTICE* :[Google Chrome](https://www.google.com/intl/en/chrome/browser/) 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.<br>
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.<br>Document will convert into html per 5second if it was changed.
#### shortcut keys
If you **checked** Enable Shortcut Key.<br>These shortcut will be enable.
* Exec convert<br>
Mac : ```⌘ + e```
Win : ```ctrl + e```
* Browse local file<br>
Mac : ```⌘ + o```
Win : ```ctrl + o```
* Read local file<br>
Mac : ```⌘ + r```
Win : ```ctrl + r```
* View Raw .md file<br>
Mac : ```⌘ + m```
Win : ```ctrl + m```
* View Raw .html file<br>
Mac : ```⌘ + h```
Win : ```ctrl + h```
* View html in other window<br>
Mac : ```⌘ + alt + h```
Win : ```ctrl + alt + h```
If your are using chrome,
* Enter Full Screen Mode<br>
Mac : ```⌘ + shift + f```
Win : ```F11```
### Markdown Syntax
This app is based on [github-flavored-markdown](http://github.github.com/github-flavored-markdown/)<br>
If you're not already familiar with Markdown, you should spend 15 minutes and go over the excellent [Markdown Syntax Guide](http://daringfireball.net/projects/markdown/) 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
```html
<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
<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>
## Special Thanks
* [CodeMirror](http://codemirror.net/).
* [Github](http://developer.github.com/) for API and style.
* [marked](https://github.com/chjj/marked).
* [highlight.js](http://softwaremaniacs.org/soft/highlight/en/).
* [Twitter Bootstrap](http://twitter.github.com/bootstrap/) with [Font Awesome](http://fortawesome.github.com/Font-Awesome/).
* [HTML5 ★ BOILERPLATE](http://html5boilerplate.com/).
* [jQuery](http://jquery.com/).
* [HTML5 ROCKS](http://www.html5rocks.com/en/tutorials/file/xhr2/) for usage of BLOB.
* [balupton](https://github.com/balupton).
## Licence
Source code can be found on [github](https://github.com/georgeOsdDev/markdown-edit), licenced under [MIT](http://opensource.org/licenses/mit-license.php).
Developed by [Takeharu.Oshida](http://about.me/takeharu.oshida)
</textarea>
<div id="out" class="markdown-body"></div><!-- /converted html will be here -->
<div class="clear"></div>
</section>
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="bower_components/codemirror/lib/codemirror.js"></script>
<script src="bower_components/codemirror/addon/edit/closebrackets.js"></script>
<script src="bower_components/codemirror/addon/edit/matchbrackets.js"></script>
<script src="bower_components/codemirror/addon/selection/active-line.js"></script>
<script src="bower_components/codemirror/addon/mode/overlay.js"></script>
<script src="bower_components/codemirror/mode/xml/xml.js"></script>
<script src="bower_components/codemirror/mode/markdown/markdown.js"></script>
<script src="bower_components/codemirror/mode/gfm/gfm.js"></script>
<script src="bower_components/codemirror/mode/javascript/javascript.js"></script>
<script src="bower_components/marked/lib/marked.js"></script>
<script src="bower_components/highlightjs/highlight.pack.js"></script>
<script src="javascript/scrollTop.js"></script>
<script src="javascript/app.js"></script>
<!--script>var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-XXXXXXXX-XX']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script-->
</body>
</html>