forked from markpluslabs/react-markplus
-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
135 lines (135 loc) · 8.53 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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Markdown Plus</title>
<link rel="stylesheet" href="bower_components/jquery-ui-layout-min/layout-default.css"/>
<link rel="stylesheet" href="bower_components/github-markdown-css/github-markdown.css"/>
<link rel="stylesheet" href="bower_components/prettify-min/prettify.min.css"/>
<link rel="stylesheet" href="bower_components/font-awesome-min/css/font-awesome.min.css"/>
<link rel="stylesheet" href="bower_components/remodal-min/jquery.remodal.css"/>
<link rel="stylesheet" href="bower_components/katex-build/katex.min.css"/>
<link rel="stylesheet" href="bower_components/ionicons-min/css/ionicons.min.css"/>
<link rel="stylesheet" href="bower_components/mermaid-min/mermaid.css"/>
<link rel="stylesheet" href="markdown-plus.css"/>
<link href="icon.png" rel="shortcut icon" type="image/png"/>
<script src="bower_components/underscore-min/underscore-min.js"></script>
<script src="bower_components/jquery-dist/jquery.min.js"></script>
<script src="bower_components/jquery-ui-min/jquery-ui.min.js"></script>
<script src="bower_components/jquery-ui-layout-min/jquery.layout.min.js"></script>
<script src="bower_components/ace-min-noconflict/ace.js" charset="utf-8"></script>
<script src="bower_components/marked-min/marked.min.js"></script>
<script src="bower_components/prettify-min/prettify.min.js"></script>
<script src="bower_components/remodal-min/jquery.remodal.min.js"></script>
<script src="bower_components/katex-build/katex.min.js"></script>
<script src="bower_components/mermaid-min/mermaid.full.min.js"></script>
<script src="markdown-plus.js"></script>
<script src="index.js"></script>
</head>
<body>
<div class="ui-layout-north">
<div id="toolbar" class="noselect" data-open-title="Hide Toolbar" data-closed-title="Show Toolbar"> <!-- 工具栏 -->
<i title="Bold" class="fa fa-bold styling-icon" data-modifier="**"></i>
<i title="Italic" class="fa fa-italic styling-icon" data-modifier="*"></i>
<i title="Strikethrough" class="fa fa-strikethrough styling-icon" data-modifier="~~"></i>
<i class="dividor">|</i>
<i title="Heading 1" class="fa heading-icon" data-level="1">h1</i>
<i title="Heading 2" class="fa heading-icon" data-level="2">h2</i>
<i title="Heading 3" class="fa heading-icon" data-level="3">h3</i>
<i title="Heading 4" class="fa heading-icon" data-level="4">h4</i>
<i title="Heading 5" class="fa heading-icon" data-level="5">h5</i>
<i title="Heading 6" class="fa heading-icon" data-level="6">h6</i>
<i class="dividor">|</i>
<i title="Horizontal rule" id="horizontal-rule" class="fa fa-minus"></i>
<i title="Quote" class="fa fa-quote-left list-icon" data-prefix="> "></i>
<i title="Unordered list" class="fa fa-list-ul list-icon" data-prefix="- "></i>
<i title="Ordered list" class="fa fa-list-ol list-icon" data-prefix="1. "></i>
<i title="Incomplete task list" class="fa fa-square-o list-icon" data-prefix="- [ ] "></i>
<i title="Complete task list" class="fa fa-check-square-o list-icon" data-prefix="- [x] "></i>
<i class="dividor">|</i>
<i title="Link" class="fa fa-link" id="link-icon" data-sample-text="link description" data-sample-url="http://example.com"></i>
<i title="Image" class="fa fa-image" id="image-icon" data-sample-text="image description" data-sample-url="http://example.com/example.png"></i>
<i title="Code" class="fa fa-code" id="code-icon" data-sample="print 'hello world'"></i>
<i title="Table" class="fa fa-table" id="table-icon" data-sample="header 1 | header 2
---|---
row 1 col 1 | row 1 col 2
row 2 col 1 | row 2 col 2"></i>
<i class="dividor">|</i>
<i title="Emoji" class="fa fa-smile-o" data-remodal-target="emoji-modal"></i>
<i title="Font Awesome" class="fa fa-flag-o" data-remodal-target="fa-modal"></i>
<i title="Ionicons" class="icon ion-ionic" data-remodal-target="ion-modal"></i>
<i class="dividor">|</i>
<i title="Mathematical formulae" class="fa fa-superscript" id="math-icon" data-sample="E = mc^2"></i>
<i title="Flowchart" class="fa fa-long-arrow-right mermaid-icon" data-sample="graph LR
A-->B"></i>
<i title="Sequence diagram" class="fa fa-exchange mermaid-icon" data-sample="sequenceDiagram
A->>B: How are you?
B->>A: Great!"></i>
<i title="Gantt diagram" class="fa fa-sliders mermaid-icon" data-sample="gantt
dateFormat YYYY-MM-DD
section S1
T1: 2014-01-01, 9d
section S2
T2: 2014-01-11, 9d
section S3
T3: 2014-01-02, 9d"></i>
<i class="dividor">|</i>
<i title="Help" class="fa fa-question-circle" id="help-icon" data-remodal-target="help-modal"></i>
<i title="About" class="fa fa-info-circle" id="about-icon" data-remodal-target="about-modal"></i>
</div>
</div>
<div class="ui-layout-center">
<div id="editor"></div> <!-- 编辑器 -->
<div class="remodal" id="emoji-modal" data-remodal-id="emoji-modal"> <!-- emoji 弹出框 -->
<h2>Please enter an emoji code:</h2>
<p>Examples: "smile", "whale", "santa", "panda_face", "dog", "truck" ...</p>
<p>For a complete list, please check <a href="http://www.emoji-cheat-sheet.com/" target="_blank">Emoji Cheat Sheet</a>.</p>
<p><input id="emoji-code" placeholder="smile"/></p>
<br/><a class="remodal-cancel">Cancel</a>
<a class="remodal-confirm" id="emoji-confirm">OK</a>
</div>
<div class="remodal" id="fa-modal" data-remodal-id="fa-modal"> <!-- Font Awesome 弹出框 -->
<h2>Please enter a Font Awesome code:</h2>
<p>Examples: "cloud", "flag", "car", "truck", "heart", "dollar" ...</p>
<p>For a complete list, please check <a href="http://fontawesome.io/icons/" target="_blank">Font Awesome Icons</a>.</p>
<p><input id="fa-code" placeholder="heart"/></p>
<br/><a class="remodal-cancel">Cancel</a>
<a class="remodal-confirm" id="fa-confirm">OK</a>
</div>
<div class="remodal" id="ion-modal" data-remodal-id="ion-modal"> <!-- Ionicons 弹出框 -->
<h2>Please enter an Ionicons code:</h2>
<p>Examples: "beer", "key", "locked", "location", "plane", "ios-eye" ...</p>
<p>For a complete list, please check <a href="http://ionicons.com/" target="_blank">Ionicons Website</a>.</p>
<p><input id="ion-code" placeholder="beer"/></p>
<br/><a class="remodal-cancel">Cancel</a>
<a class="remodal-confirm" id="ion-confirm">OK</a>
</div>
<div class="remodal" data-remodal-id="help-modal"> <!-- help 弹出框 -->
<img src="icon.png" width="64"/>
<h2>Markdown Plus help</h2>
<p><a href="https://github.com/ajaxorg/ace/wiki/Default-Keyboard-Shortcuts" target="_blank">Keyboard Shortcuts</a></p>
<p><a href="https://guides.github.com/features/mastering-markdown/" target="_blank">Markdown Basics</a></p>
<p><a href="https://help.github.com/articles/github-flavored-markdown/" target="_blank">GitHub Flavored Markdown</a></p>
<p><a href="http://www.emoji-cheat-sheet.com/" target="_blank">Emoji Cheat Sheet</a></p>
<p><a href="http://fontawesome.io/icons/" target="_blank">Font Awesome Icons</a></p>
<p><a href="http://ionicons.com/" target="_blank">Ionicons Website</a></p>
<p><a href="http://meta.wikimedia.org/wiki/Help:Displaying_a_formula" target="_blank">Mathematical Formulae</a></p>
<p><a href="http://knsv.github.io/mermaid/flowchart.html" target="_blank">Flowchart Syntax</a></p>
<p><a href="http://knsv.github.io/mermaid/sequenceDiagram.html" target="_blank">Sequence Diagram Syntax</a></p>
<p><a href="http://knsv.github.io/mermaid/gantt.html" target="_blank">Gantt Diagram Syntax</a></p>
<br/><a class="remodal-confirm">OK</a>
</div>
<div class="remodal" data-remodal-id="about-modal"> <!-- about 弹出框 -->
<img src="icon.png" width="64"/>
<h2>Markdown Plus</h2> Version 1.2.3
<p>Markdown editor with extra features.</p>
<p>Copyright © 2015 <a href="https://tylingsoft.com" target="_blank">Tylingsoft</a>. All rights reserved.</p>
<p>Home page: <a href="https://tylingsoft.com/mdp" target="_blank">https://tylingsoft.com/mdp</a>.</p>
<br/><a class="remodal-confirm">OK</a>
</div>
</div>
<div class="ui-layout-east">
<article class="markdown-body" id="preview" data-open-title="Hide Preview" data-closed-title="Show Preview"></article> <!-- 实时预览 -->
</div>
</body>
</html>