public/views/help-modal.ejs


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

<!-- help modal -->
<div class="modal fade help-modal" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="mySmallModalLabel"><i class="fa fa-question-circle"></i> Help</h4>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-lg-3">
                        <div class="panel panel-default">
                            <div class="panel-heading">
                                <h3 class="panel-title">Contacts</h3>
                            </div>
                            <div class="panel-body">
                                <a href="https://github.com/hackmdio/hackmd/issues" title="Report an issue" target="_blank"><i class="fa fa-tag fa-fw"></i> Report an issue</a> 
                                <br>
                                <a href="mailto:hackmdio@gmail.com" title="Send us email"><i class="fa fa-envelope fa-fw"></i> Send us email</a>
                            </div>
                        </div>
                        <div class="panel panel-default">
                            <div class="panel-heading">
                                <h3 class="panel-title">Documents</h3>
                            </div>
                            <div class="panel-body">
                                <a href="./features" title="Features" target="_blank"><i class="fa fa-dot-circle-o fa-fw"></i> Features</a>
                                <br>
                                <a href="./yaml-metadata" title="YAML Metadata" target="_blank"><i class="fa fa-dot-circle-o fa-fw"></i> YAML Metadata</a>
                                <br>
                                <a href="./slide-example" title="Slide Example" target="_blank"><i class="fa fa-dot-circle-o fa-fw"></i> Slide Example</a>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-9">
                        <div class="panel panel-default">
                            <div class="panel-heading">
                                <h3 class="panel-title">Cheatsheet</h3>
                            </div>
                            <div class="panel-body" style="height: calc(100vh - 215px); overflow: auto;">
                                <table class="table table-condensed">
                                    <thead>
                                        <tr>
                                            <th>Example</th>
                                            <th>Syntax</th>
                                        </tr>
                                    </thead>
                                    <tbody class="markdown-body" style="font-family: inherit; font-size: 14px; padding: 0; max-width: inherit;">
                                        <tr>
                                            <td>Header</td>
                                            <td># Header</td>
                                        </tr>
                                        <tr>
                                            <td><ul><li>Unordered List</li></ul></td>
                                            <td>- Unordered List</td>
                                        </tr>
                                        <tr>
                                            <td><ol><li>Ordered List</li></ol></td>
                                            <td>1. Ordered List</td>
                                        </tr>
                                        <tr>
                                            <td><ul><li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled><label></label>Todo List</li></ul></td>
                                            <td>- [ ] Todo List</td>
                                        </tr>
                                        <tr>
                                            <td><blockquote> Blockquote</blockquote></td>
                                            <td>> Blockquote</td>
                                        </tr>
                                        <tr>
                                            <td><strong>Bold font</strong></td>
                                            <td>**Bold font**</td>
                                        </tr>
                                        <tr>
                                            <td><i>Italics font</i></td>
                                            <td>*Italics font*</td>
                                        </tr>
                                        <tr>
                                            <td><s>Strikethrough</s></td>
                                            <td>~~strikethrough~~</td>
                                        </tr>
                                        <tr>
                                            <td>19<sup>th</sup></td>
                                            <td>19^th^</td>
                                        </tr>
                                        <tr>
                                            <td>H<sub>2</sub>O</td>
                                            <td>H~2~O</td>
                                        </tr>
                                        <tr>
                                            <td><ins>Inserted text</ins></td>
                                            <td>++Inserted text++</td>
                                        </tr>
                                        <tr>
                                            <td><mark>Marked text</mark></td>
                                            <td>==Marked text==</td>
                                        </tr>
                                        <tr>
                                            <td><a>Link</a></td>
                                            <td>[link text](https:// "title")</td>
                                        </tr>
                                        <tr>
                                            <td>Image</td>
                                            <td>![image alt](https:// "title")</td>
                                        </tr>
                                        <tr>
                                            <td><code>Code</code></td>
                                            <td>`code`</td>
                                        </tr>
                                        <tr>
                                            <td><pre style="border:none !important;"><code class="javascript hljs"><div class="wrapper"><div class="gutter linenumber"><span data-linenumber="1"></span></div><div class="code"><span class="hljs-keyword">var</span> i = <span class="hljs-number">0</span>;
</div></div></code></pre></td>
                                            <td>```javascript<br>var i = 0;<br>```</td>
                                        </tr>
                                        <tr>
                                            <td><img align="absmiddle" alt=":smile:" class="emoji" src="./vendor/emojify/images/smile.png" title=":smile:"></img></td>
                                            <td>:smile:</td>
                                        </tr>
                                        <tr>
                                            <td>Externals</td>
                                            <td>{%youtube youtube_id %}</td>
                                        </tr>
                                        <tr>
                                            <td>L<sup>a</sup>T<sub>e</sub>X</td>
                                            <td>$L^aT_eX$</td>
                                        </tr>
                                        <tr>
                                            <td><div class="alert alert-info"><p>This is a alert area.</p></div></td>
                                            <td>:::info<br>This is a alert area.<br>:::</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>