/
index_dev.html
119 lines (115 loc) · 4.04 KB
/
index_dev.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
<!DOCTYPE html>
<html>
<head>
<title>GFMarkdownEditor</title>
<meta charset="UTF-8">
<link type="text/css" rel="stylesheet" href="style.css" />
<script type="text/javascript" src="components/jquery/jquery.min.js"></script>
<script type="text/javascript" src="components/ace-builds/src-min/ace.js"></script>
<!-- our application modules -->
<script type="text/javascript" src="src/gfmeditor.js"></script>
<script type="text/javascript" src="src/gfmpreviewloader.js"></script>
<script type="text/javascript" src="src/gapipreview.js"></script>
<script type="text/javascript" src="src/gfmgithubauth.js"></script>
<script type="text/javascript" src="src/gfmbackup.js"></script>
<script type="text/javascript" src="src/gfmcheatsheet.js"></script>
<!-- lastly, the bootstrap script -->
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<div id="parent">
<div class="editor-pane">
<div class="editor" id="editor"></div>
</div>
<div class="preview-pane">
<iframe class="preview" id="preview" src="preview.html"></iframe>
</div>
</div>
<div class="footer">
<div class="toolbar" id="toolbar">
<a href="#" id="preview-button">Preview</a>
</div>
<span class="grey-text">
- GFMarkdownEditor, an online editor of <a href="http://github.github.com/github-flavored-markdown/">Github Flavored Markdown</a>.
Fork me on <a href="https://github.com/romaricdrigon/GFMarkdownEditor">Github</a>!
</span>
</div>
<div id="cheat-sheet" class="cheat-sheet">
<div class="content cheatsheet">
<h2>Markdown Cheat Sheet</h2>
<div class="cheatsheet-content">
<div class="mod">
<div class="col">
<h3>Format Text</h3>
<p>Headers</p>
<pre># This is an <h1> tag
## This is an <h2> tag
###### This is an <h6> tag</pre>
<p>Text styles</p>
<pre>*This text will be italic*
_This will also be italic_
**This text will be bold**
__This will also be bold__
*You **can** combine them*
</pre>
</div>
<div class="col">
<h3>Lists</h3>
<p>Unordered</p>
<pre>* Item 1
* Item 2
* Item 2a
* Item 2b</pre>
<p>Ordered</p>
<pre>1. Item 1
2. Item 2
3. Item 3
* Item 3a
* Item 3b</pre>
</div>
<div class="col">
<h3>Miscellaneous</h3>
<p>Images</p>
<pre>
Format: 
</pre>
<p>Links</p>
<pre>http://github.com - automatic!
[GitHub](http://github.com)</pre>
<p>Blockquotes</p>
<pre>As Kanye West said:
> We're living the future so
> the present is our past.
</pre>
</div>
</div>
<div class="rule"></div>
<h3>Code Examples in Markdown</h3>
<div class="col">
<p>Syntax highlighting with <a href="http://github.github.com/github-flavored-markdown/" title="GitHub Flavored Markdown" target="_blank">GFM</a></p>
<pre>```javascript
function fancyAlert(arg) {
if(arg) {
$.facebox({div:'#foo'})
}
}
```</pre>
</div>
<div class="col">
<p>Or, indent your code 4 spaces</p>
<pre>Here is a Python code example
without syntax highlighting:
def foo:
if not bar:
return true</pre>
</div>
<div class="col">
<p>Inline code for comments</p>
<pre>I think you should use an
`<addr>` element here instead.</pre>
</div>
</div>
</div>
</div>
</body>
</html>