forked from rhiokim/markdown-css
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
278 lines (263 loc) · 14.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
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<title>less theme for standard markdown</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="assets/gh-pages.css">
<link rel="stylesheet" href="assets/css/markdown.css">
<link rel="stylesheet" href="assets/css/clearness-dark/clearness-dark.css">
<link rel="stylesheet" href="assets/css/clearness/clearness.css">
<link rel="stylesheet" href="assets/css/github/github.css">
<link rel="stylesheet" href="assets/css/haroopad/haroopad.css">
<link rel="stylesheet" href="assets/css/solarized-dark/solarized-dark.css">
<link rel="stylesheet" href="assets/css/solarized-light/solarized-light.css">
<link rel="stylesheet" href="assets/css/node-dark/node-dark.css">
<link rel="stylesheet" href="assets/css/metro-vibes/metro-vibes.css">
<link rel="stylesheet" href="assets/css/metro-vibes-dark/metro-vibes-dark.css">
<link rel="stylesheet" href="assets/css/wood/wood.css">
<link rel="stylesheet" href="assets/css/wood-ri/wood-ri.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
$(document.body).ready(function() {
$('ul.inner-menu li').click(function() {
var label = $(this).text();
label = label.toLowerCase();
label = label.replace(/ /g, '-');
$('#markdown').removeClass();
$('#markdown').addClass('markdown');
$('#markdown').addClass(label);
$('ul.inner-menu li').removeClass();
$(this).addClass('active');
});
});
</script>
</head>
<body>
<a href="https://github.com/rhiokim/markdown-css"><img style="position: fixed; top: 0; right: 0; border: 0; z-index: 10;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub"></a>
<ul class="inner-menu">
<li>Clearness Dark</li>
<li>Clearness</li>
<li>Github</li>
<li>Haroopad</li>
<li>Solarized Dark</li>
<li>Solarized Light</li>
<li>Node Dark</li>
<li>Metro Vibes</li>
<li>Metro Vibes Dark</li>
<li>Wood</li>
<li>Wood Ri</li>
</ul>
<i class="clear"></i>
<div id="markdown" class="markdown">
<h1>Typography & paragraph styles (h1)</h1>
<p>Est urna sit amet arcu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed molestie augue sit amet leo consequat posuere. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin vel ante a orci tempus eleifend ut et magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<h2>Subtitle of the paragraph (h2)</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in dui mauris. Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus. Mauris iaculis</p>
<h3>Example of another tag (h3)</h3>
<p>Nulla at nulla justo, eget luctus tortor. Nulla facilisi. Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas est urna sit amet arcu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed molestie augue sit amet leo consequat posuere.</p>
<pre><code>이것은 인라인 수학 표현법은 달러 사인($)을 3개로 감싸면 됩니다.
'Double angle formula for Cosines' 룰 표현하는 $$$cos(θ+φ)=cos(θ)cos(φ)−sin(θ)sin(φ)$$$ 표현 구문입니다.
블럭 표현은 다음과 같이 달러 사인 2개로 감싸주면 됩니다.
$$
cos(θ+φ)=cos(θ)cos(φ)−sin(θ)sin(φ)
$$
</code></pre><p> <strong>결과</strong></p>
<p>이것은 인라인 수학 표현법은 달러 사인($)을 3개로 감싸면 됩니다.
‘Double angle formula for Cosines’ 를 표현하는 $$$cos(θ+φ)=cos(θ)cos(φ)−sin(θ)sin(φ)$$$ 표현 구문입니다.</p>
<p>블럭 표현은 다음과 같이 달러 사인 2개로 감싸주면 됩니다.</p>
<p>$$
cos(θ+φ)=cos(θ)cos(φ)−sin(θ)sin(φ)
$$</p>
<table>
<thead>
<tr>
<th align="right">Issue Number</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td align="right"><strong>New Features</strong></td>
<td></td>
</tr>
<tr>
<td align="right">#10</td>
<td><strong class="highlight">Added</strong> <strong>Mathematical Expression</strong> based on MathJax</td>
</tr>
<tr>
<td align="right">#63, #212</td>
<td><strong class="highlight">Added</strong> Font Size Option</td>
</tr>
<tr>
<td align="right">#183</td>
<td><strong class="highlight">Added</strong> Copy inline styled html for WYSWIG</td>
</tr>
<tr>
<td align="right">#214</td>
<td><strong class="highlight">Added</strong> Shortcuts for inserting date & time</td>
</tr>
<tr>
<td align="right">#215</td>
<td><strong class="highlight">Added</strong> Toggle Vim-mode menu</td>
</tr>
<tr>
<td align="right">#217</td>
<td><strong class="highlight">Added</strong> Shortcut for Print</td>
</tr>
<tr>
<td align="right"><strong>Bugs</strong></td>
<td></td>
</tr>
<tr>
<td align="right">#196</td>
<td>Set email title when seding email using by clicking menu item</td>
</tr>
<tr>
<td align="right"><strong>Enhancements</strong></td>
<td></td>
</tr>
<tr>
<td align="right">#209</td>
<td>Enhance embeded contents look when sending email</td>
</tr>
</tbody>
</table>
<h1>A First Level Header</h1>
<h2>A Second Level Header</h2>
<p>Now is the time for all good men to come to
the aid of their country. This is just a
regular paragraph.</p>
<p>The quick brown fox jumped over the lazy
dog's back.</p>
<h2>Other language</h2>
<p>멀티마크다운을 지원하는 마크다운 에디터 <strong>하루패드</strong>!! 한글은 어떻게 작성될까요?</p>
<h3>Header 3</h3>
<blockquote>
<p>This is a blockquote.</p>
<p>This is the second paragraph in the blockquote.</p>
<h2>This is an H2 in a blockquote</h2>
</blockquote>
<h3>PHRASE EMPHASIS</h3>
<p><strong>Markdown</strong></p>
<p>Some of these <code>words</code> <em>are emphasized</em>.
Some of these words <em>are emphasized also</em>.</p>
<p>Use two asterisks for <strong>strong emphasis</strong>.
Or, if you prefer, <strong>use two underscores instead</strong>.</p>
<p><strong>Output</strong></p>
<pre><code class="xml"><span class="tag"><<span class="title">p</span>></span>Some of these words <span class="tag"><<span class="title">em</span>></span>are emphasized<span class="tag"></<span class="title">em</span>></span>.
Some of these words <span class="tag"><<span class="title">em</span>></span>are emphasized also<span class="tag"></<span class="title">em</span>></span>.<span class="tag"></<span class="title">p</span>></span>
<span class="tag"><<span class="title">p</span>></span>Use two asterisks for <span class="tag"><<span class="title">strong</span>></span>strong emphasis<span class="tag"></<span class="title">strong</span>></span>.
Or, if you prefer, <span class="tag"><<span class="title">strong</span>></span>use two underscores instead<span class="tag"></<span class="title">strong</span>></span>.<span class="tag"></<span class="title">p</span>></span></code></pre>
<h3>LISTS</h3>
<p>Unordered (bulleted) lists use asterisks, pluses, and hyphens (*, +, and -) as list markers. These three markers are interchangable; this:</p>
<ul>
<li>Candy.</li>
<li>Gum.</li>
<li>Booze.</li>
</ul>
<p>this:</p>
<ul>
<li>Candy.</li>
<li>Gum.</li>
<li>Booze.</li>
</ul>
<p>and this:</p>
<ul>
<li>Candy.</li>
<li>Gum.</li>
<li>Booze.</li>
</ul>
<p>all produce the same output:</p>
<pre><code class="xml"><span class="tag"><<span class="title">ul</span>></span>
<span class="tag"><<span class="title">li</span>></span>Candy.<span class="tag"></<span class="title">li</span>></span>
<span class="tag"><<span class="title">li</span>></span>Gum.<span class="tag"></<span class="title">li</span>></span>
<span class="tag"><<span class="title">li</span>></span>Booze.<span class="tag"></<span class="title">li</span>></span>
<span class="tag"></<span class="title">ul</span>></span></code></pre>
<p>Ordered (numbered) lists use regular numbers, followed by periods, as list markers:</p>
<pre><code>1. Red
2. Green
3. Blue</code></pre>
<p>Output:</p>
<pre><code class="xml"><span class="tag"><<span class="title">ol</span>></span>
<span class="tag"><<span class="title">li</span>></span>Red<span class="tag"></<span class="title">li</span>></span>
<span class="tag"><<span class="title">li</span>></span>Green<span class="tag"></<span class="title">li</span>></span>
<span class="tag"><<span class="title">li</span>></span>Blue<span class="tag"></<span class="title">li</span>></span>
<span class="tag"></<span class="title">ol</span>></span></code></pre>
<p>If you put blank lines between items, you’ll get <p> tags for the list item text. You can create multi-paragraph list items by indenting the paragraphs by 4 spaces or 1 tab:</p>
<ul>
<li><p>A list item.</p>
<p>With multiple paragraphs.</p>
</li>
<li><p>Another item in the list.</p>
</li>
</ul>
<ul>
<li>aaa
<ul>
<li>bbb</li>
<li>ccc
<ul>
<li>ddd</li>
<li>eee
<ul>
<li>ddd</li>
<li>ccc
<ol>
<li> aaa</li>
<li> bbb</li>
</ol>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
<p>Output:</p>
<pre><code class="xml"><span class="tag"><<span class="title">ul</span>></span>
<span class="tag"><<span class="title">li</span>></span><span class="tag"><<span class="title">p</span>></span>A list item.<span class="tag"></<span class="title">p</span>></span>
<span class="tag"><<span class="title">p</span>></span>With multiple paragraphs.<span class="tag"></<span class="title">p</span>></span><span class="tag"></<span class="title">li</span>></span>
<span class="tag"><<span class="title">li</span>></span><span class="tag"><<span class="title">p</span>></span>Another item in the list.<span class="tag"></<span class="title">p</span>></span><span class="tag"></<span class="title">li</span>></span>
<span class="tag"></<span class="title">ul</span>></span></code></pre>
<h3>LINKS</h3>
<p>Markdown supports two styles for creating links: inline and reference. With both styles, you use square brackets to delimit the text you want to turn into a link.</p>
<p>Inline-style links use parentheses immediately after the link text. For example:</p>
<p>This is an <a href="http://example.com/">example link</a>.</p>
<p>Output:</p>
<pre><code class="xml"><span class="tag"><<span class="title">p</span>></span>This is an <span class="tag"><<span class="title">a</span> <span class="attribute">href</span>=<span class="value">"http://example.com/"</span>></span>
example link<span class="tag"></<span class="title">a</span>></span>.<span class="tag"></<span class="title">p</span>></span></code></pre>
<p>Optionally, you may include a title attribute in the parentheses:</p>
<p>This is an <a href="http://example.com/" title="With a Title">example link</a>.</p>
<p>Output:</p>
<pre><code class="xml"><span class="tag"><<span class="title">p</span>></span>This is an <span class="tag"><<span class="title">a</span> <span class="attribute">href</span>=<span class="value">"http://example.com/"</span> <span class="attribute">title</span>=<span class="value">"With a Title"</span>></span>
example link<span class="tag"></<span class="title">a</span>></span>.<span class="tag"></<span class="title">p</span>></span></code></pre>
<p>Reference-style links allow you to refer to your links by names, which you define elsewhere in your document:</p>
<p>I get 10 times more traffic from <a href="http://google.com/" title="Google">Google</a> than from
<a href="http://search.yahoo.com/" title="Yahoo Search">Yahoo</a> or <a href="http://search.msn.com/" title="MSN Search">MSN</a>.</p>
<p>Output:</p>
<pre><code class="xml"><span class="tag"><<span class="title">p</span>></span>I get 10 times more traffic from <span class="tag"><<span class="title">a</span> <span class="attribute">href</span>=<span class="value">"http://google.com/"</span>
<span class="attribute">title</span>=<span class="value">"Google"</span>></span>Google<span class="tag"></<span class="title">a</span>></span> than from <span class="tag"><<span class="title">a</span> <span class="attribute">href</span>=<span class="value">"http://search.yahoo.com/"</span>
<span class="attribute">title</span>=<span class="value">"Yahoo Search"</span>></span>Yahoo<span class="tag"></<span class="title">a</span>></span> or <span class="tag"><<span class="title">a</span> <span class="attribute">href</span>=<span class="value">"http://search.msn.com/"</span>
<span class="attribute">title</span>=<span class="value">"MSN Search"</span>></span>MSN<span class="tag"></<span class="title">a</span>></span>.<span class="tag"></<span class="title">p</span>></span></code></pre>
<p>The title attribute is optional. Link names may contain letters, numbers and spaces, but are not case sensitive:</p>
<p>I start my morning with a cup of coffee and</p>
<p><a href="http://www.nytimes.com/">The New York Times</a>.</p>
<p>Output:</p>
<pre><code><p>I start my morning with a cup of coffee and
<a href="http://www.nytimes.com/">The New York Times</a>.</p></code></pre>
<h3>IMAGES</h3>
<p>Image syntax is very much like link syntax.</p>
<p>Inline (titles are optional):</p>
<p><img src="http://lorempixel.com/400/200/" alt="alt text" title="Title"></p>
<p>Reference-style:</p>
<pre><code class="markdown">![alt text][id]
[id]: http://lorempixel.com/400/200/ "Title"</code></pre>
<p>Both of the above examples produce the same output:</p>
<pre><code class="xml"><span class="tag"><<span class="title">img</span> <span class="attribute">src</span>=<span class="value">"/path/to/img.jpg"</span> <span class="attribute">alt</span>=<span class="value">"alt text"</span> <span class="attribute">title</span>=<span class="value">"Title"</span> /></span></code></pre>
<mark>mark tag</mark>
</body>
</div>
</body>
</html>