-
Notifications
You must be signed in to change notification settings - Fork 16
/
演示demo.html
213 lines (206 loc) · 13 KB
/
演示demo.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
<!doctype html>
<html>
<head>
<meta charset='UTF-8'>
<meta name='viewport' content='width=device-width initial-scale=1'>
<title>Mdmdt主题演示demo</title>
<link rel="stylesheet" href="./dist/mdtht.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
<script>hljs.highlightAll();</script>
<script src="./dist/mdtht.min.js"></script>
</head>
<body><h1 id='关于mdmdt主题'>关于Mdmdt主题</h1>
<p><a href='./readme.md'>English Document</a></p>
<p><strong>Mdmdt</strong>是 markdown minimalism document theme 的缩写，意为：Markdown极简文档主题。</p>
<p><strong>Mdmdt</strong><sup class='md-footnote'><a href='#dfref-footnote-1' name='ref-footnote-1'>1</a></sup> 是轻度定制的个性化Typora主题 。<strong>Mdmdt</strong>主题的目的是打造一个风格极简的文档样式，让使用者在专注于文档内容本身的同时能更加直观地分辨出不同的区块内容。</p>
<div class="md-alert md-alert-note note"><p><strong class='md-alert-text md-alert-text-note'>Note</strong><br></p>
<p><strong>注意：</strong>mdmdd.css 文件中包含了亮色和暗色两者主题，会跟随系统模式自动切换亮暗主题 <code>this is code style</code></p>
</div>
<h1 id='文本'>文本</h1>
<p>这些是文本样式效果<sup class='md-footnote'><a href='#dfref-footnote-2' name='ref-footnote-2'>2</a></sup>： <a href='typora.io'>这是超链接</a>, <strong>这是加粗文本</strong>, <em>这是斜体字</em>, <code>this is code style</code> ， <u>这是下划线样式</u>,
<del>这是删除线效果</del>
,
<mark>这是文字高亮效果</mark>
， 上下标:
<mjx-container class="MathJax" jax="SVG" style="position: relative;">
<svg xmlns="http://www.w3.org/2000/svg" width="6.293ex" height="2.108ex" role="img" focusable="false" viewBox="0 -716.3 2781.3 931.8" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" style="vertical-align: -0.488ex;">
<defs>
<path id="MJX-3-TEX-I-1D43F" d="M228 637Q194 637 192 641Q191 643 191 649Q191 673 202 682Q204 683 217 683Q271 680 344 680Q485 680 506 683H518Q524 677 524 674T522 656Q517 641 513 637H475Q406 636 394 628Q387 624 380 600T313 336Q297 271 279 198T252 88L243 52Q243 48 252 48T311 46H328Q360 46 379 47T428 54T478 72T522 106T564 161Q580 191 594 228T611 270Q616 273 628 273H641Q647 264 647 262T627 203T583 83T557 9Q555 4 553 3T537 0T494 -1Q483 -1 418 -1T294 0H116Q32 0 32 10Q32 17 34 24Q39 43 44 45Q48 46 59 46H65Q92 46 125 49Q139 52 144 61Q147 65 216 339T285 628Q285 635 228 637Z"></path>
<path id="MJX-3-TEX-I-1D434" d="M208 74Q208 50 254 46Q272 46 272 35Q272 34 270 22Q267 8 264 4T251 0Q249 0 239 0T205 1T141 2Q70 2 50 0H42Q35 7 35 11Q37 38 48 46H62Q132 49 164 96Q170 102 345 401T523 704Q530 716 547 716H555H572Q578 707 578 706L606 383Q634 60 636 57Q641 46 701 46Q726 46 726 36Q726 34 723 22Q720 7 718 4T704 0Q701 0 690 0T651 1T578 2Q484 2 455 0H443Q437 6 437 9T439 27Q443 40 445 43L449 46H469Q523 49 533 63L521 213H283L249 155Q208 86 208 74ZM516 260Q516 271 504 416T490 562L463 519Q447 492 400 412L310 260L413 259Q516 259 516 260Z"></path>
<path id="MJX-3-TEX-I-1D447" d="M40 437Q21 437 21 445Q21 450 37 501T71 602L88 651Q93 669 101 677H569H659Q691 677 697 676T704 667Q704 661 687 553T668 444Q668 437 649 437Q640 437 637 437T631 442L629 445Q629 451 635 490T641 551Q641 586 628 604T573 629Q568 630 515 631Q469 631 457 630T439 622Q438 621 368 343T298 60Q298 48 386 46Q418 46 427 45T436 36Q436 31 433 22Q429 4 424 1L422 0Q419 0 415 0Q410 0 363 1T228 2Q99 2 64 0H49Q43 6 43 9T45 27Q49 40 55 46H83H94Q174 46 189 55Q190 56 191 56Q196 59 201 76T241 233Q258 301 269 344Q339 619 339 625Q339 630 310 630H279Q212 630 191 624Q146 614 121 583T67 467Q60 445 57 441T43 437H40Z"></path>
<path id="MJX-3-TEX-I-1D438" d="M492 213Q472 213 472 226Q472 230 477 250T482 285Q482 316 461 323T364 330H312Q311 328 277 192T243 52Q243 48 254 48T334 46Q428 46 458 48T518 61Q567 77 599 117T670 248Q680 270 683 272Q690 274 698 274Q718 274 718 261Q613 7 608 2Q605 0 322 0H133Q31 0 31 11Q31 13 34 25Q38 41 42 43T65 46Q92 46 125 49Q139 52 144 61Q146 66 215 342T285 622Q285 629 281 629Q273 632 228 634H197Q191 640 191 642T193 659Q197 676 203 680H757Q764 676 764 669Q764 664 751 557T737 447Q735 440 717 440H705Q698 445 698 453L701 476Q704 500 704 528Q704 558 697 578T678 609T643 625T596 632T532 634H485Q397 633 392 631Q388 629 386 622Q385 619 355 499T324 377Q347 376 372 376H398Q464 376 489 391T534 472Q538 488 540 490T557 493Q562 493 565 493T570 492T572 491T574 487T577 483L544 351Q511 218 508 216Q505 213 492 213Z"></path>
<path id="MJX-3-TEX-I-1D44B"
d="M42 0H40Q26 0 26 11Q26 15 29 27Q33 41 36 43T55 46Q141 49 190 98Q200 108 306 224T411 342Q302 620 297 625Q288 636 234 637H206Q200 643 200 645T202 664Q206 677 212 683H226Q260 681 347 681Q380 681 408 681T453 682T473 682Q490 682 490 671Q490 670 488 658Q484 643 481 640T465 637Q434 634 411 620L488 426L541 485Q646 598 646 610Q646 628 622 635Q617 635 609 637Q594 637 594 648Q594 650 596 664Q600 677 606 683H618Q619 683 643 683T697 681T738 680Q828 680 837 683H845Q852 676 852 672Q850 647 840 637H824Q790 636 763 628T722 611T698 593L687 584Q687 585 592 480L505 384Q505 383 536 304T601 142T638 56Q648 47 699 46Q734 46 734 37Q734 35 732 23Q728 7 725 4T711 1Q708 1 678 1T589 2Q528 2 496 2T461 1Q444 1 444 10Q444 11 446 25Q448 35 450 39T455 44T464 46T480 47T506 54Q523 62 523 64Q522 64 476 181L429 299Q241 95 236 84Q232 76 232 72Q232 53 261 47Q262 47 267 47T273 46Q276 46 277 46T280 45T283 42T284 35Q284 26 282 19Q279 6 276 4T261 1Q258 1 243 1T201 2T142 2Q64 2 42 0Z"></path>
</defs>
<g stroke="currentColor" fill="currentColor" stroke-width="0" transform="scale(1,-1)">
<g data-mml-node="math">
<g data-mml-node="mi">
<use data-c="1D43F" xlink:href="#MJX-3-TEX-I-1D43F"></use>
</g>
<g data-mml-node="mspace" transform="translate(681,0)"></g>
<g data-mml-node="mpadded" transform="translate(356,0)">
<g transform="translate(0,210)">
<g data-mml-node="TeXAtom" data-mjx-texclass="ORD">
<g data-mml-node="mstyle" transform="scale(0.707)">
<g data-mml-node="TeXAtom" data-mjx-texclass="ORD">
<g data-mml-node="mi">
<use data-c="1D434" xlink:href="#MJX-3-TEX-I-1D434"></use>
</g>
</g>
</g>
</g>
</g>
</g>
<g data-mml-node="mspace" transform="translate(886.3,0)"></g>
<g data-mml-node="mi" transform="translate(716.3,0)">
<use data-c="1D447" xlink:href="#MJX-3-TEX-I-1D447"></use>
</g>
<g data-mml-node="mspace" transform="translate(1420.3,0)"></g>
<g data-mml-node="mpadded" transform="translate(1280.3,0)">
<g transform="translate(0,-215.5)">
<g data-mml-node="TeXAtom" data-mjx-texclass="ORD">
<g data-mml-node="mi">
<use data-c="1D438" xlink:href="#MJX-3-TEX-I-1D438"></use>
</g>
</g>
</g>
</g>
<g data-mml-node="mspace" transform="translate(2044.3,0)"></g>
<g data-mml-node="mi" transform="translate(1929.3,0)">
<use data-c="1D44B" xlink:href="#MJX-3-TEX-I-1D44B"></use>
</g>
</g>
</g>
</svg>
</mjx-container>
<script type="math/tex">\LaTeX</script>
, X<sup>2</sup>, H<sub>2</sub>O, <span style='background:var(--color-2-0-c)'> 这是鼠标选中效果 </span>, <kbd>Command+Q</kbd> 🐳 😀 🇨🇳
</p>
<!-- 这是注释内容...... -->
<h1 id='图片'>图片</h1>
<p><img src="/Users/cayxc/Desktop/未命名文件夹/mdmdt-cover.png" alt="mdmdt-cover" style="zoom:80%;"/></p>
<h1 id='列表'>列表</h1>
<p>这是有序和无序列表样式：</p>
<ol start=''>
<li><p>这是有序列表 1</p>
</li>
<li><p>这是有序列表 2</p>
<ul>
<li><p>这是无序列表 1</p>
</li>
<li><p>这是无序列表 2</p>
<ul>
<li><input type='checkbox' checked/>
<p>Something is DONE.</p>
</li>
<li><input type='checkbox'/>
<p>Something is Not TODO.</p>
</li>
</ul>
</li>
</ul>
</li>
</ol>
<p>这是有序和无序列表样式：</p>
<ul>
<li><p>这是无序列表</p>
</li>
<li><p>这是无序列表</p>
</li>
<li><p>这是无序列表</p>
<ol start=''>
<li>这是有序列表 a</li>
<li>这是有序列表 b</li>
<li>这是有序列表 c</li>
</ol>
</li>
</ul>
<h1 id='code'>Code</h1>
<p>单行代码：<code>composer require --dev barryvdh/laravel-ide-helper</code></p>
<p>大段代码块：</p>
<pre><code class='language-javascript' lang='javascript'>/**
* ----------------------------------------
* 设置递增的 level 编号
* ----------------------------------------
* @param tag obj 标签对象
*
*/
setLevelNumber (tag) {
try {
if ((typeof tag) != 'object') {
throw 'setLevelNumber() 调用时参数类型错误，必须是一个h标签的对象集合！';
}
let str = tag.id;
if (str.lastIndexOf ('.') == - 1) { //如果是一级目录形式 level-1000
let newValue = parseInt (str.slice (6))+1;
return 'level-'+newValue;
} else {
// ...
}
} catch (err) {
return err;
}
}
</code></pre>
<h1 id='表格'>表格</h1>
<figure class='table-figure'>
<table>
<thead>
<tr>
<th style='text-align:left;'>Left-Aligned</th>
<th style='text-align:center;'>Center Aligned</th>
<th style='text-align:right;'>Right Aligned</th>
</tr>
</thead>
<tbody>
<tr>
<td style='text-align:left;'>This is the first line</td>
<td style='text-align:center;'><code>this is code</code> some wordy text and some code</td>
<td style='text-align:right;'>$160</td>
</tr>
<tr>
<td style='text-align:left;'>This is the second line</td>
<td style='text-align:center;'>some code: <code>this is code</code> centered</td>
<td style='text-align:right;'>$1200.99</td>
</tr>
<tr>
<td style='text-align:left;'>This is the third line</td>
<td style='text-align:center;'>are neat</td>
<td style='text-align:right;'>$1</td>
</tr>
</tbody>
</table>
</figure>
<h1 id='引用文本框'>引用文本框</h1>
<blockquote><p>This is a Normal text box ...... <code>this is code style</code></p>
</blockquote>
<div class="md-alert md-alert-note note"><p><strong class='md-alert-text md-alert-text-note'>Note</strong><br></p>
<p>This is a Note text box ......</p>
</div>
<div class="md-alert md-alert-tip tip"><p><strong class='md-alert-text md-alert-text-tip'>Tip</strong><br></p>
<p>This is a Tip text box ......</p>
</div>
<div class="md-alert md-alert-important important"><p><strong class='md-alert-text md-alert-text-important'>Important</strong><br></p>
<p>This is a Important text box ......</p>
</div>
<div class="md-alert md-alert-warning warning"><p><strong class='md-alert-text md-alert-text-warning'>Warning</strong><br></p>
<p>This is a Warning text box ......</p>
</div>
<div class="md-alert md-alert-caution caution"><p><strong class='md-alert-text md-alert-text-caution'>Caution</strong><br></p>
<p>This is a Caution text box ......</p>
</div>
<h1 id='title'>Title</h1>
<h2 id='this-is-h2'>This is H2</h2>
<h3 id='this-is-h3'>This is H3</h3>
<h4 id='this-is-h4'>This is H4</h4>
<h5 id='this-is-h5'>This is H5</h5>
<h6 id='this-is-h6'>This is h6</h6>
<div>[TOC]</div>
<p> </p>
<div class='footnotes-area'>
<hr/>
<div class='footnote-line'><span class='md-fn-count'>1</span> <em>Forked</em> from <a href='https://github.com/cayxc/mdmdt' target='_blank' class='url'>https://github.com/cayxc/mdmdt</a> <a name='dfref-footnote-1' href='#ref-footnote-1' title='回到文档' class='reversefootnote'>↩</a></div>
<div class='footnote-line'><span class='md-fn-count'>2</span> <em>Forked</em> from <a href='https://github.com/cayxc/mdmdt' target='_blank' class='url'>https://github.com/cayxc/mdmdt</a> <a name='dfref-footnote-2' href='#ref-footnote-2' title='回到文档' class='reversefootnote'>↩</a></div>
</div>
</body>
</html>