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

<!-- 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="max-height: 470px; 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><ol><li>Ordered List</li></ol><ul><li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled><label></label>Todo List</li></ul></td>
                                            <td>- Unordered List<br>1. Ordered List<br>- [ ] 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>[title](http://)</td>
                                        </tr>
                                        <tr>
                                            <td>Image</td>
                                            <td>![alt](http:// 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>