Helloworld,

这将是一篇独具特色的分享记录

此文档采用Typora编写

Typora是一款简洁的markdown编辑器、写作软件。它去除了预览窗口，模式切换器，语法符号以及所有其他不必要的干扰。将它们替换为真实的实时预览功能，以帮助您专注于内容本身。

下载链接移步:点此下载

前端

本文采用Typora一键生成的前端骨架和样式,导出简介方便

出于学习目的,将此文使用Typora生成的前端HTML代码生成如下:


92
1
<!doctype html>
2
<html>
3

4
<head>
5
    <meta charset='UTF-8'>
6
    <meta name='viewport' content='width=device-width initial-scale=1'>
7
    <title>学习分享</title>
8
</head>
9

10
<body>
11
    <h1 id='helloworld'>Helloworld,</h1>
12
    <h2 id='这将是一篇独具特色的分享记录'>这将是一篇独具特色的分享记录</h2>
13
    <hr />
14
    <h2 id='此文档采用typora编写'>此文档采用Typora编写</h2>
15
    <p>Typora是一款简洁的markdown编辑器、写作软件。它去除了预览窗口，模式切换器，语法符号以及所有其他不必要的干扰。将它们替换为真实的实时预览功能，以帮助您专注于内容本身。</p>
16
    <p>下载链接移步:<a href='https://www.typora.io/'>点此下载</a></p>
17
    <h2 id='前端'>前端</h2>
18
    <p>本文采用Typora一键生成的前端骨架和样式,导出简介方便</p>
19
    <p>出于学习目的,将此文使用Typora生成的前端代码生成如下:</p>
20
    <p>&nbsp;</p>
21
    <p>&nbsp;</p>
22
    <h2 id='项目部署'>项目部署</h2>
23
    <p>此项目部署在腾讯云服务器上</p>
24
    <p>服务器系统:CentOS 7.9.2009(Py3.7.9)</p>
25
    <p>服务器管理使用宝塔面板,环境套件为Nginx+PHP7.3+phpMyAdmin4.4+MySQL5.6.50</p>
26
    <p><strong>安装要求：</strong></p>
27
    <p>内存：512M以上，推荐768M以上（纯面板约占系统60M内存）</p>
28
    <p>硬盘：300M以上可用硬盘空间（纯面板约占20M磁盘空间）</p>
29
    <p>系统：CentOS 7.1+ (Ubuntu16.04+.、Debian9.0+)，<strong>确保是干净的操作系统，</strong>没有安装过其它环境带的Apache/Nginx/php/MySQL/pgsql/gitlab/java<strong>（已有环境不可安装）</strong></p>
30
    <p>架构：x86_64（主流服务器均是此架构），ARM不完整兼容（面板环境安装慢，部分软件可能安装不上）</p>
31
    <p><strong>宝塔Linux面板7.6.0版本是基于Centos/Debian/Ubuntu开发的，为了最好的兼容性，请使用以上系统</strong></p>
32
    <p>系统兼容性顺序：</p>
33
    <p>Centos7.x &gt; Debian10 &gt; Ubuntu 20.04 &gt; Cenots8.x &gt; Ubuntu 18.04 &gt; 其它系统</p>
34
    <p>提示：Centos官方已宣布在2020年停止对Centos6的维护更新，各大软件开发商也逐渐停止对Centos6的兼容，新服务器不建议使用Centos6</p>
35
    <p>Centos安装命令：</p>
36
    <ol>
37
        <li><code>yum install -y wget &amp;&amp; wget -O install.sh http://download.bt.cn/install/install_6.0.sh &amp;&amp; sh install.sh</code></li>
38
    </ol>
39
    <p><a href='https://www.bt.cn/offline'>咨询离线安装版本</a></p>
40
    <p><strong>试验性Centos/Ubuntu/Debian安装命令</strong> <strong>独立运行环境（py3.7） 可能存在少量兼容性问题 不断优化中</strong> </p>
41
    <ol>
42
        <li><code>curl -sSO http://download.bt.cn/install/install_panel.sh &amp;&amp; bash install_panel.sh</code></li>
43
    </ol>
44
    <p><strong>Ubuntu/Deepin安装命令：</strong></p>
45
    <ol>
46
        <li><code>wget -O install.sh http://download.bt.cn/install/install-ubuntu_6.0.sh &amp;&amp; sudo bash install.sh</code></li>
47
    </ol>
48
    <p><strong>Debian安装命令：</strong></p>
49
    <ol>
50
        <li><code>wget -O install.sh http://download.bt.cn/install/install-ubuntu_6.0.sh &amp;&amp; bash install.sh</code></li>
51
    </ol>
52
    <p><strong>Fedora安装命令:</strong></p>
53
    <ol>
54
        <li><code>wget -O install.sh http://download.bt.cn/install/install_6.0.sh &amp;&amp; bash install.sh</code></li>
55
    </ol>
56
    <p>&nbsp;</p>
57
    <p>以上节点无法使用的情况下，请使用下面的备用节点：</p>
58
    <p><strong>备用节点【香港】：（宝塔推荐使用CN2 双程GIA高品质，免备案的</strong><a href='https://www.zun.com/server/buy.html?lineid=1671157323431053'><strong>尊云zun.com</strong></a><strong>香港云服务器安装）</strong></p>
59
    <ol>
60
        <li><code>yum install -y wget &amp;&amp; wget -O install.sh http://103.224.251.67:5880/install/install_6.0.sh &amp;&amp; sh install.sh</code></li>
61
    </ol>
62
    <p><strong>备用节点【美国】：（宝塔推荐使用价格厚道，高性能v4的</strong><a href='https://www.zun.com/server/buy.html?lineid=1680521327852585&amp;u=D794A5'><strong>尊云zun.com</strong></a><strong>KVM云服务器安装）</strong></p>
63
    <ol>
64
        <li><code>yum install -y wget &amp;&amp; wget -O install.sh http://128.1.164.196:5880/install/install_6.0.sh &amp;&amp; sh install.sh</code></li>
65
    </ol>
66
    <p><strong>面板特色功能：</strong></p>
67
    <ul>
68
        <li>一键配置服务器环境（LAMP/LNMP）</li>
69
        <li>一键安全重启</li>
70
        <li>一键创建管理网站、ftp、数据库</li>
71
        <li>一键部署SSL证书</li>
72
        <li>一键部署源码（discuz、wordpress、dedecms、z-blog、微擎等等）</li>
73
        <li>一键配置（定期备份、数据导入、伪静态、301、SSL、子目录、反向代理、切换PHP版本）</li>
74
        <li>一键安装常用PHP扩展(fileinfo、intl、opcache、imap、memcache、apc、redis、ioncube、imagick)</li>
75
        <li>数据库一键导入导出</li>
76
        <li>系统监控（CPU、内存、磁盘IO、网络IO）</li>
77
        <li>防火墙端口放行</li>
78
        <li>SSH开启与关闭及SSH端口更改</li>
79
        <li>禁PING开启或关闭</li>
80
        <li>方便高效的文件管理器（上传、下载、压缩、解压、查看、编辑等等）</li>
81
        <li>计划任务（定期备份、日志切割、shell脚本）</li>
82
        <li>软件管理（一键安装、卸载、版本切换）</li>
83
    </ul>
84
    <p>宝塔面板部署详情移步:<a href='https://bt.cn'>宝塔官网</a></p>
85
    <p>&nbsp;</p>
86
    <hr />
87
    <center>© DoffChen | Powered by DoffChen <a href="https://beian.miit.gov.cn/">豫ICP备19020491号-2</a></center>
88
    <p>&nbsp;</p>
89
    <p>&nbsp;</p>
90
</body>
91

92
</html>

CSS代码如下:


xxxxxxxxxx
2289
1
html {
2
        overflow-x: initial !important;
3
    }
4

5
    :root {
6
        --bg-color: #ffffff;
7
        --text-color: #333333;
8
        --select-text-bg-color: #B5D6FC;
9
        --select-text-font-color: auto;
10
        --monospace: "Lucida Console", Consolas, "Courier", monospace;
11
        --title-bar-height: 20px;
12
    }
13

14
    .mac-os-11 {
15
        --title-bar-height: 28px;
16
    }
17

18
    html {
19
        font-size: 14px;
20
        background-color: var(--bg-color);
21
        color: var(--text-color);
22
        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
23
        -webkit-font-smoothing: antialiased;
24
    }
25

26
    body {
27
        margin: 0px;
28
        padding: 0px;
29
        height: auto;
30
        bottom: 0px;
31
        top: 0px;
32
        left: 0px;
33
        right: 0px;
34
        font-size: 1rem;
35
        line-height: 1.42857143;
36
        overflow-x: hidden;
37
        background-image: inherit;
38
        background-size: inherit;
39
        background-attachment: inherit;
40
        background-origin: inherit;
41
        background-clip: inherit;
42
        background-color: inherit;
43
        tab-size: 4;
44
        background-position: inherit inherit;
45
        background-repeat: inherit inherit;
46
    }
47

48
    iframe {
49
        margin: auto;
50
    }
51

52
    a.url {
53
        word-break: break-all;
54
    }
55

56
    a:active,
57
    a:hover {
58
        outline: 0px;
59
    }
60

61
    .in-text-selection,
62
    ::selection {
63
        text-shadow: none;
64
        background: var(--select-text-bg-color);
65
        color: var(--select-text-font-color);
66
    }
67

68
    #write {
69
        margin: 0px auto;
70
        height: auto;
71
        width: inherit;
72
        word-break: normal;
73
        word-wrap: break-word;
74
        position: relative;
75
        white-space: normal;
76
        overflow-x: visible;
77
        padding-top: 36px;
78
    }
79

80
    #write.first-line-indent p {
81
        text-indent: 2em;
82
    }
83

84
    #write.first-line-indent li p,
85
    #write.first-line-indent p * {
86
        text-indent: 0px;
87
    }
88

89
    #write.first-line-indent li {
90
        margin-left: 2em;
91
    }
92

93
    .for-image #write {
94
        padding-left: 8px;
95
        padding-right: 8px;
96
    }
97

98
    body.typora-export {
99
        padding-left: 30px;
100
        padding-right: 30px;
101
    }
102

103
    .typora-export .footnote-line,
104
    .typora-export li,
105
    .typora-export p {
106
        white-space: pre-wrap;
107
    }
108

109
    .typora-export .task-list-item input {
110
        pointer-events: none;
111
    }
112

113
    @media screen and (max-width: 500px) {
114
        body.typora-export {
115
            padding-left: 0px;
116
            padding-right: 0px;
117
        }
118

119
        #write {
120
            padding-left: 20px;
121
            padding-right: 20px;
122
        }
123

124
        .CodeMirror-sizer {
125
            margin-left: 0px !important;
126
        }
127

128
        .CodeMirror-gutters {
129
            display: none !important;
130
        }
131
    }
132

133
    #write li>figure:last-child {
134
        margin-bottom: 0.5rem;
135
    }
136

137
    #write ol,
138
    #write ul {
139
        position: relative;
140
    }
141

142
    img {
143
        max-width: 100%;
144
        vertical-align: middle;
145
        image-orientation: from-image;
146
    }
147

148
    button,
149
    input,
150
    select,
151
    textarea {
152
        color: inherit;
153
        font-family: inherit;
154
        font-size: inherit;
155
        font-style: inherit;
156
        font-variant-caps: inherit;
157
        font-weight: inherit;
158
        font-stretch: inherit;
159
        line-height: inherit;
160
    }
161

162
    input[type="checkbox"],
163
    input[type="radio"] {
164
        line-height: normal;
165
        padding: 0px;
166
    }
167

168
    *,
169
    ::after,
170
    ::before {
171
        box-sizing: border-box;
172
    }
173

174
    #write h1,
175
    #write h2,
176
    #write h3,
177
    #write h4,
178
    #write h5,
179
    #write h6,
180
    #write p,
181
    #write pre {
182
        width: inherit;
183
    }
184

185
    #write h1,
186
    #write h2,
187
    #write h3,
188
    #write h4,
189
    #write h5,
190
    #write h6,
191
    #write p {
192
        position: relative;
193
    }
194

195
    p {
196
        line-height: inherit;
197
    }
198

199
    h1,
200
    h2,
201
    h3,
202
    h4,
203
    h5,
204
    h6 {
205
        break-after: avoid-page;
206
        break-inside: avoid;
207
        orphans: 4;
208
    }
209

210
    p {
211
        orphans: 4;
212
    }
213

214
    h1 {
215
        font-size: 2rem;
216
    }
217

218
    h2 {
219
        font-size: 1.8rem;
220
    }
221

222
    h3 {
223
        font-size: 1.6rem;
224
    }
225

226
    h4 {
227
        font-size: 1.4rem;
228
    }
229

230
    h5 {
231
        font-size: 1.2rem;
232
    }
233

234
    h6 {
235
        font-size: 1rem;
236
    }
237

238
    .md-math-block,
239
    .md-rawblock,
240
    h1,
241
    h2,
242
    h3,
243
    h4,
244
    h5,
245
    h6,
246
    p {
247
        margin-top: 1rem;
248
        margin-bottom: 1rem;
249
    }
250

251
    .hidden {
252
        display: none;
253
    }
254

255
    .md-blockmeta {
256
        color: rgb(204, 204, 204);
257
        font-weight: 700;
258
        font-style: italic;
259
    }
260

261
    a {
262
        cursor: pointer;
263
    }
264

265
    sup.md-footnote {
266
        padding: 2px 4px;
267
        background-color: rgba(238, 238, 238, 0.7);
268
        color: rgb(85, 85, 85);
269
        border-top-left-radius: 4px;
270
        border-top-right-radius: 4px;
271
        border-bottom-right-radius: 4px;
272
        border-bottom-left-radius: 4px;
273
        cursor: pointer;
274
    }
275

276
    sup.md-footnote a,
277
    sup.md-footnote a:hover {
278
        color: inherit;
279
        text-transform: inherit;
280
        text-decoration: inherit;
281
    }
282

283
    #write input[type="checkbox"] {
284
        cursor: pointer;
285
        width: inherit;
286
        height: inherit;
287
    }
288

289
    figure {
290
        overflow-x: auto;
291
        margin: 1.2em 0px;
292
        max-width: calc(100% + 16px);
293
        padding: 0px;
294
    }
295

296
    figure>table {
297
        margin: 0px;
298
    }
299

300
    tr {
301
        break-inside: avoid;
302
        break-after: auto;
303
    }
304

305
    thead {
306
        display: table-header-group;
307
    }
308

309
    table {
310
        border-collapse: collapse;
311
        border-spacing: 0px;
312
        width: 100%;
313
        overflow: auto;
314
        break-inside: auto;
315
        text-align: left;
316
    }
317

318
    table.md-table td {
319
        min-width: 32px;
320
    }
321

322
    .CodeMirror-gutters {
323
        border-right-width: 0px;
324
        background-color: inherit;
325
    }
326

327
    .CodeMirror-linenumber {}
328

329
    .CodeMirror {
330
        text-align: left;
331
    }
332

333
    .CodeMirror-placeholder {
334
        opacity: 0.3;
335
    }
336

337
    .CodeMirror pre {
338
        padding: 0px 4px;
339
    }
340

341
    .CodeMirror-lines {
342
        padding: 0px;
343
    }
344

345
    div.hr:focus {
346
        cursor: none;
347
    }
348

349
    #write pre {
350
        white-space: pre-wrap;
351
    }
352

353
    #write.fences-no-line-wrapping pre {
354
        white-space: pre;
355
    }
356

357
    #write pre.ty-contain-cm {
358
        white-space: normal;
359
    }
360

361
    .CodeMirror-gutters {
362
        margin-right: 4px;
363
    }
364

365
    .md-fences {
366
        font-size: 0.9rem;
367
        display: block;
368
        break-inside: avoid;
369
        text-align: left;
370
        overflow: visible;
371
        white-space: pre;
372
        background-image: inherit;
373
        background-size: inherit;
374
        background-attachment: inherit;
375
        background-origin: inherit;
376
        background-clip: inherit;
377
        background-color: inherit;
378
        position: relative !important;
379
        background-position: inherit inherit;
380
        background-repeat: inherit inherit;
381
    }
382

383
    .md-fences-adv-panel {
384
        width: 100%;
385
        margin-top: 10px;
386
        text-align: center;
387
        padding-top: 0px;
388
        padding-bottom: 8px;
389
        overflow-x: auto;
390
    }
391

392
    #write .md-fences.mock-cm {
393
        white-space: pre-wrap;
394
    }
395

396
    .md-fences.md-fences-with-lineno {
397
        padding-left: 0px;
398
    }
399

400
    #write.fences-no-line-wrapping .md-fences.mock-cm {
401
        white-space: pre;
402
        overflow-x: auto;
403
    }
404

405
    .md-fences.mock-cm.md-fences-with-lineno {
406
        padding-left: 8px;
407
    }
408

409
    .CodeMirror-line,
410
    twitterwidget {
411
        break-inside: avoid;
412
    }
413

414
    .footnotes {
415
        opacity: 0.8;
416
        font-size: 0.9rem;
417
        margin-top: 1em;
418
        margin-bottom: 1em;
419
    }
420

421
    .footnotes+.footnotes {
422
        margin-top: 0px;
423
    }
424

425
    .md-reset {
426
        margin: 0px;
427
        padding: 0px;
428
        border: 0px;
429
        outline: 0px;
430
        vertical-align: top;
431
        text-decoration: none;
432
        text-shadow: none;
433
        float: none;
434
        position: static;
435
        width: auto;
436
        height: auto;
437
        white-space: nowrap;
438
        cursor: inherit;
439
        line-height: normal;
440
        font-weight: 400;
441
        text-align: left;
442
        box-sizing: content-box;
443
        direction: ltr;
444
        background-position: 0px 0px;
445
        background-repeat: initial initial;
446
    }
447

448
    li div {
449
        padding-top: 0px;
450
    }
451

452
    blockquote {
453
        margin: 1rem 0px;
454
    }
455

456
    li .mathjax-block,
457
    li p {
458
        margin: 0.5rem 0px;
459
    }
460

461
    li blockquote {
462
        margin: 1rem 0px;
463
    }
464

465
    li {
466
        margin: 0px;
467
        position: relative;
468
    }
469

470
    blockquote> :last-child {
471
        margin-bottom: 0px;
472
    }
473

474
    blockquote> :first-child,
475
    li> :first-child {
476
        margin-top: 0px;
477
    }
478

479
    .footnotes-area {
480
        color: rgb(136, 136, 136);
481
        margin-top: 0.714rem;
482
        padding-bottom: 0.143rem;
483
        white-space: normal;
484
    }
485

486
    #write .footnote-line {
487
        white-space: pre-wrap;
488
    }
489

490
    @media print {
491

492
        body,
493
        html {
494
            border: 1px solid transparent;
495
            height: 99%;
496
            break-after: avoid;
497
            break-before: avoid;
498
            font-variant-ligatures: no-common-ligatures;
499
        }
500

501
        #write {
502
            margin-top: 0px;
503
            padding-top: 0px;
504
            border-color: transparent !important;
505
        }
506

507
        .typora-export * {
508
            -webkit-print-color-adjust: exact;
509
        }
510

511
        .typora-export #write {
512
            break-after: avoid;
513
        }
514

515
        .typora-export #write::after {
516
            height: 0px;
517
        }
518

519
        .is-mac table {
520
            break-inside: avoid;
521
        }
522

523
        .typora-export-show-outline .typora-export-sidebar {
524
            display: none;
525
        }
526
    }
527

528
    .footnote-line {
529
        margin-top: 0.714em;
530
        font-size: 0.7em;
531
    }
532

533
    a img,
534
    img a {
535
        cursor: pointer;
536
    }
537

538
    pre.md-meta-block {
539
        font-size: 0.8rem;
540
        min-height: 0.8rem;
541
        white-space: pre-wrap;
542
        background-color: rgb(204, 204, 204);
543
        display: block;
544
        overflow-x: hidden;
545
        background-position: initial initial;
546
        background-repeat: initial initial;
547
    }
548

549
    p>.md-image:only-child:not(.md-img-error) img,
550
    p>img:only-child {
551
        display: block;
552
        margin: auto;
553
    }
554

555
    #write.first-line-indent p>.md-image:only-child:not(.md-img-error) img {
556
        left: -2em;
557
        position: relative;
558
    }
559

560
    p>.md-image:only-child {
561
        display: inline-block;
562
        width: 100%;
563
    }
564

565
    #write .MathJax_Display {
566
        margin: 0.8em 0px 0px;
567
    }
568

569
    .md-math-block {
570
        width: 100%;
571
    }
572

573
    .md-math-block:not(:empty)::after {
574
        display: none;
575
    }
576

577
    .MathJax_ref {
578
        fill: currentcolor;
579
    }
580

581
    [contenteditable="true"]:active,
582
    [contenteditable="true"]:focus,
583
    [contenteditable="false"]:active,
584
    [contenteditable="false"]:focus {
585
        outline: 0px;
586
        box-shadow: none;
587
    }
588

589
    .md-task-list-item {
590
        position: relative;
591
        list-style-type: none;
592
    }
593

594
    .task-list-item.md-task-list-item {
595
        padding-left: 0px;
596
    }
597

598
    .md-task-list-item>input {
599
        position: absolute;
600
        top: 0px;
601
        left: 0px;
602
        margin-left: -1.2em;
603
        margin-top: calc(1em - 10px);
604
        border: none;
605
    }
606

607
    .math {
608
        font-size: 1rem;
609
    }
610

611
    .md-toc {
612
        min-height: 3.58rem;
613
        position: relative;
614
        font-size: 0.9rem;
615
        border-top-left-radius: 10px;
616
        border-top-right-radius: 10px;
617
        border-bottom-right-radius: 10px;
618
        border-bottom-left-radius: 10px;
619
    }
620

621
    .md-toc-content {
622
        position: relative;
623
        margin-left: 0px;
624
    }
625

626
    .md-toc-content::after,
627
    .md-toc::after {
628
        display: none;
629
    }
630

631
    .md-toc-item {
632
        display: block;
633
        color: rgb(65, 131, 196);
634
    }
635

636
    .md-toc-item a {
637
        text-decoration: none;
638
    }
639

640
    .md-toc-inner:hover {
641
        text-decoration: underline;
642
    }
643

644
    .md-toc-inner {
645
        display: inline-block;
646
        cursor: pointer;
647
    }
648

649
    .md-toc-h1 .md-toc-inner {
650
        margin-left: 0px;
651
        font-weight: 700;
652
    }
653

654
    .md-toc-h2 .md-toc-inner {
655
        margin-left: 2em;
656
    }
657

658
    .md-toc-h3 .md-toc-inner {
659
        margin-left: 4em;
660
    }
661

662
    .md-toc-h4 .md-toc-inner {
663
        margin-left: 6em;
664
    }
665

666
    .md-toc-h5 .md-toc-inner {
667
        margin-left: 8em;
668
    }
669

670
    .md-toc-h6 .md-toc-inner {
671
        margin-left: 10em;
672
    }
673

674
    @media screen and (max-width: 48em) {
675
        .md-toc-h3 .md-toc-inner {
676
            margin-left: 3.5em;
677
        }
678

679
        .md-toc-h4 .md-toc-inner {
680
            margin-left: 5em;
681
        }
682

683
        .md-toc-h5 .md-toc-inner {
684
            margin-left: 6.5em;
685
        }
686

687
        .md-toc-h6 .md-toc-inner {
688
            margin-left: 8em;
689
        }
690
    }
691

692
    a.md-toc-inner {
693
        font-size: inherit;
694
        font-style: inherit;
695
        font-weight: inherit;
696
        line-height: inherit;
697
    }
698

699
    .footnote-line a:not(.reversefootnote) {
700
        color: inherit;
701
    }
702

703
    .md-attr {
704
        display: none;
705
    }
706

707
    .md-fn-count::after {
708
        content: ".";
709
    }
710

711
    code,
712
    pre,
713
    samp,
714
    tt {
715
        font-family: var(--monospace);
716
    }
717

718
    kbd {
719
        margin: 0px 0.1em;
720
        padding: 0.1em 0.6em;
721
        font-size: 0.8em;
722
        color: rgb(36, 39, 41);
723
        background-color: rgb(255, 255, 255);
724
        border: 1px solid rgb(173, 179, 185);
725
        border-top-left-radius: 3px;
726
        border-top-right-radius: 3px;
727
        border-bottom-right-radius: 3px;
728
        border-bottom-left-radius: 3px;
729
        box-shadow: rgba(12, 13, 14, 0.2) 0px 1px 0px, rgb(255, 255, 255) 0px 0px 0px 2px inset;
730
        white-space: nowrap;
731
        vertical-align: middle;
732
        background-position: initial initial;
733
        background-repeat: initial initial;
734
    }
735

736
    .md-comment {
737
        color: rgb(162, 127, 3);
738
        opacity: 0.8;
739
        font-family: var(--monospace);
740
    }
741

742
    code {
743
        text-align: left;
744
    }
745

746
    a.md-print-anchor {
747
        white-space: pre !important;
748
        border: none !important;
749
        display: inline-block !important;
750
        position: absolute !important;
751
        width: 1px !important;
752
        right: 0px !important;
753
        outline: 0px !important;
754
        text-shadow: initial !important;
755
        background-position: 0px 0px !important;
756
        background-repeat: initial initial !important;
757
    }
758

759
    .os-windows.monocolor-emoji .md-emoji {
760
        font-family: "Segoe UI Symbol", sans-serif;
761
    }
762

763
    .md-diagram-panel>svg {
764
        max-width: 100%;
765
    }
766

767
    [lang="flow"] svg,
768
    [lang="mermaid"] svg {
769
        max-width: 100%;
770
        height: auto;
771
    }
772

773
    [lang="mermaid"] .node text {
774
        font-size: 1rem;
775
    }
776

777
    table tr th {
778
        border-bottom-width: 0px;
779
    }
780

781
    video {
782
        max-width: 100%;
783
        display: block;
784
        margin: 0px auto;
785
    }
786

787
    iframe {
788
        max-width: 100%;
789
        width: 100%;
790
        border: none;
791
    }
792

793
    .highlight td,
794
    .highlight tr {
795
        border: 0px;
796
    }
797

798
    mark {
799
        background-color: rgb(255, 255, 0);
800
        color: rgb(0, 0, 0);
801
        background-position: initial initial;
802
        background-repeat: initial initial;
803
    }
804

805
    .md-html-inline .md-plain,
806
    .md-html-inline strong,
807
    mark .md-inline-math,
808
    mark strong {
809
        color: inherit;
810
    }
811

812
    .md-expand mark .md-meta {
813
        opacity: 0.3 !important;
814
    }
815

816
    mark .md-meta {
817
        color: rgb(0, 0, 0);
818
    }
819

820
    @media print {
821

822
        .typora-export h1,
823
        .typora-export h2,
824
        .typora-export h3,
825
        .typora-export h4,
826
        .typora-export h5,
827
        .typora-export h6 {
828
            break-inside: avoid;
829
        }
830
    }
831

832
    .md-diagram-panel .messageText {
833
        stroke: none !important;
834
    }
835

836
    .md-diagram-panel .start-state {
837
        fill: var(--node-fill);
838
    }
839

840
    .md-diagram-panel .edgeLabel rect {
841
        opacity: 1 !important;
842
    }
843

844
    .md-require-zoom-fix {
845
        height: auto;
846
        margin-top: 16px;
847
        margin-bottom: 16px;
848
    }
849

850
    .md-require-zoom-fix foreignObject {
851
        font-size: var(--mermaid-font-zoom);
852
    }
853

854
    .md-fences.md-fences-math {
855
        font-size: 1em;
856
    }
857

858
    .md-fences-advanced:not(.md-focus) {
859
        padding: 0px;
860
        white-space: nowrap;
861
        border: 0px;
862
    }
863

864
    .md-fences-advanced:not(.md-focus) {
865
        background-image: inherit;
866
        background-size: inherit;
867
        background-attachment: inherit;
868
        background-origin: inherit;
869
        background-clip: inherit;
870
        background-color: inherit;
871
        background-position: inherit inherit;
872
        background-repeat: inherit inherit;
873
    }
874

875
    .typora-export-show-outline .typora-export-content {
876
        max-width: 1440px;
877
        margin: auto;
878
        display: flex;
879
        flex-direction: row;
880
    }
881

882
    .typora-export-sidebar {
883
        width: 300px;
884
        font-size: 0.8rem;
885
        margin-top: 80px;
886
        margin-right: 18px;
887
    }
888

889
    .typora-export-show-outline #write {
890
        --webkit-flex: 2;
891
        flex: 2 1 0%;
892
    }
893

894
    .typora-export-sidebar .outline-content {
895
        position: fixed;
896
        top: 0px;
897
        max-height: 100%;
898
        overflow: hidden auto;
899
        padding-bottom: 30px;
900
        padding-top: 60px;
901
        width: 300px;
902
    }
903

904
    @media screen and (max-width: 1024px) {
905

906
        .typora-export-sidebar,
907
        .typora-export-sidebar .outline-content {
908
            width: 240px;
909
        }
910
    }
911

912
    @media screen and (max-width: 800px) {
913
        .typora-export-sidebar {
914
            display: none;
915
        }
916
    }
917

918
    .outline-content li,
919
    .outline-content ul {
920
        margin-left: 0px;
921
        margin-right: 0px;
922
        padding-left: 0px;
923
        padding-right: 0px;
924
        list-style: none;
925
    }
926

927
    .outline-content ul {
928
        margin-top: 0px;
929
        margin-bottom: 0px;
930
    }
931

932
    .outline-content strong {
933
        font-weight: 400;
934
    }
935

936
    .outline-expander {
937
        width: 1rem;
938
        height: 1.428571429rem;
939
        position: relative;
940
        display: table-cell;
941
        vertical-align: middle;
942
        cursor: pointer;
943
        padding-left: 4px;
944
    }
945

946
    .outline-expander::before {
947
        content: '';
948
        position: relative;
949
        font-family: Ionicons;
950
        display: inline-block;
951
        font-size: 8px;
952
        vertical-align: middle;
953
    }
954

955
    .outline-item {
956
        padding-top: 3px;
957
        padding-bottom: 3px;
958
        cursor: pointer;
959
    }
960

961
    .outline-expander:hover::before {
962
        content: '';
963
    }
964

965
    .outline-h1>.outline-item {
966
        padding-left: 0px;
967
    }
968

969
    .outline-h2>.outline-item {
970
        padding-left: 1em;
971
    }
972

973
    .outline-h3>.outline-item {
974
        padding-left: 2em;
975
    }
976

977
    .outline-h4>.outline-item {
978
        padding-left: 3em;
979
    }
980

981
    .outline-h5>.outline-item {
982
        padding-left: 4em;
983
    }
984

985
    .outline-h6>.outline-item {
986
        padding-left: 5em;
987
    }
988

989
    .outline-label {
990
        cursor: pointer;
991
        display: table-cell;
992
        vertical-align: middle;
993
        text-decoration: none;
994
        color: inherit;
995
    }
996

997
    .outline-label:hover {
998
        text-decoration: underline;
999
    }
1000

1001
    .outline-item:hover {
1002
        border-color: rgb(245, 245, 245);
1003
        background-color: var(--item-hover-bg-color);
1004
    }
1005

1006
    .outline-item:hover {
1007
        margin-left: -28px;
1008
        margin-right: -28px;
1009
        border-left-width: 28px;
1010
        border-left-style: solid;
1011
        border-left-color: transparent;
1012
        border-right-width: 28px;
1013
        border-right-style: solid;
1014
        border-right-color: transparent;
1015
    }
1016

1017
    .outline-item-single .outline-expander::before,
1018
    .outline-item-single .outline-expander:hover::before {
1019
        display: none;
1020
    }
1021

1022
    .outline-item-open>.outline-item>.outline-expander::before {
1023
        content: '';
1024
    }
1025

1026
    .outline-children {
1027
        display: none;
1028
    }
1029

1030
    .info-panel-tab-wrapper {
1031
        display: none;
1032
    }
1033

1034
    .outline-item-open>.outline-children {
1035
        display: block;
1036
    }
1037

1038
    .typora-export .outline-item {
1039
        padding-top: 1px;
1040
        padding-bottom: 1px;
1041
    }
1042

1043
    .typora-export .outline-item:hover {
1044
        margin-right: -8px;
1045
        border-right-width: 8px;
1046
        border-right-style: solid;
1047
        border-right-color: transparent;
1048
    }
1049

1050
    .typora-export .outline-expander::before {
1051
        content: "+";
1052
        font-family: inherit;
1053
        top: -1px;
1054
    }
1055

1056
    .typora-export .outline-expander:hover::before,
1057
    .typora-export .outline-item-open>.outline-item>.outline-expander::before {
1058
        content: '−';
1059
    }
1060

1061
    .typora-export-collapse-outline .outline-children {
1062
        display: none;
1063
    }
1064

1065
    .typora-export-collapse-outline .outline-item-open>.outline-children,
1066
    .typora-export-no-collapse-outline .outline-children {
1067
        display: block;
1068
    }
1069

1070
    .typora-export-no-collapse-outline .outline-expander::before {
1071
        content: "" !important;
1072
    }
1073

1074
    .typora-export-show-outline .outline-item-active>.outline-item .outline-label {
1075
        font-weight: 700;
1076
    }
1077

1078
    .md-inline-math-container mjx-container {
1079
        zoom: 0.95;
1080
    }
1081

1082

1083
    :root {
1084
        --mermaid-theme: night;
1085
    }
1086

1087
    [lang='mermaid'] .label {
1088
        color: #333;
1089
    }
1090

1091
    /* CSS Document */
1092

1093
    /** code highlight */
1094

1095
    .cm-s-inner .cm-variable,
1096
    .cm-s-inner .cm-operator,
1097
    .cm-s-inner .cm-property {
1098
        color: #b8bfc6;
1099
    }
1100

1101
    .cm-s-inner .cm-keyword {
1102
        color: #C88FD0;
1103
    }
1104

1105
    .cm-s-inner .cm-tag {
1106
        color: #7DF46A;
1107
    }
1108

1109
    .cm-s-inner .cm-attribute {
1110
        color: #7575E4;
1111
    }
1112

1113
    .CodeMirror div.CodeMirror-cursor {
1114
        border-left: 1px solid #b8bfc6;
1115
        z-index: 3;
1116
    }
1117

1118
    .cm-s-inner .cm-string {
1119
        color: #D26B6B;
1120
    }
1121

1122
    .cm-s-inner .cm-comment,
1123
    .cm-s-inner.cm-comment {
1124
        color: #DA924A;
1125
    }
1126

1127
    .cm-s-inner .cm-header,
1128
    .cm-s-inner .cm-def,
1129
    .cm-s-inner.cm-header,
1130
    .cm-s-inner.cm-def {
1131
        color: #8d8df0;
1132
    }
1133

1134
    .cm-s-inner .cm-quote,
1135
    .cm-s-inner.cm-quote {
1136
        color: #57ac57;
1137
    }
1138

1139
    .cm-s-inner .cm-hr {
1140
        color: #d8d5d5;
1141
    }
1142

1143
    .cm-s-inner .cm-link {
1144
        color: #d3d3ef;
1145
    }
1146

1147
    .cm-s-inner .cm-negative {
1148
        color: #d95050;
1149
    }
1150

1151
    .cm-s-inner .cm-positive {
1152
        color: #50e650;
1153
    }
1154

1155
    .cm-s-inner .cm-string-2 {
1156
        color: #f50;
1157
    }
1158

1159
    .cm-s-inner .cm-meta,
1160
    .cm-s-inner .cm-qualifier {
1161
        color: #b7b3b3;
1162
    }
1163

1164
    .cm-s-inner .cm-builtin {
1165
        color: #f3b3f8;
1166
    }
1167

1168
    .cm-s-inner .cm-bracket {
1169
        color: #997;
1170
    }
1171

1172
    .cm-s-inner .cm-atom,
1173
    .cm-s-inner.cm-atom {
1174
        color: #84B6CB;
1175
    }
1176

1177
    .cm-s-inner .cm-number {
1178
        color: #64AB8F;
1179
    }
1180

1181
    .cm-s-inner .cm-variable {
1182
        color: #b8bfc6;
1183
    }
1184

1185
    .cm-s-inner .cm-variable-2 {
1186
        color: #9FBAD5;
1187
    }
1188

1189
    .cm-s-inner .cm-variable-3 {
1190
        color: #1cc685;
1191
    }
1192

1193
    .CodeMirror-selectedtext,
1194
    .CodeMirror-selected {
1195
        background: #4a89dc;
1196
        color: #fff !important;
1197
        text-shadow: none;
1198
    }
1199

1200
    .CodeMirror-gutters {
1201
        border-right: none;
1202
    }
1203

1204
    /* CSS Document */
1205

1206
    /** markdown source **/
1207
    .cm-s-typora-default .cm-header,
1208
    .cm-s-typora-default .cm-property {
1209
        color: #cebcca;
1210
    }
1211

1212
    .CodeMirror.cm-s-typora-default div.CodeMirror-cursor {
1213
        border-left: 3px solid #b8bfc6;
1214
    }
1215

1216
    .cm-s-typora-default .cm-comment {
1217
        color: #9FB1FF;
1218
    }
1219

1220
    .cm-s-typora-default .cm-string {
1221
        color: #A7A7D9
1222
    }
1223

1224
    .cm-s-typora-default .cm-atom,
1225
    .cm-s-typora-default .cm-number {
1226
        color: #848695;
1227
        font-style: italic;
1228
    }
1229

1230
    .cm-s-typora-default .cm-link {
1231
        color: #95B94B;
1232
    }
1233

1234
    .cm-s-typora-default .CodeMirror-activeline-background {
1235
        background: rgba(51, 51, 51, 0.72);
1236
    }
1237

1238
    .cm-s-typora-default .cm-comment,
1239
    .cm-s-typora-default .cm-code {
1240
        color: #8aa1e1;
1241
    }
1242

1243
    @import "";
1244
    @import "";
1245
    @import "";
1246

1247
    :root {
1248
        --bg-color: #363B40;
1249
        --side-bar-bg-color: #2E3033;
1250
        --text-color: #b8bfc6;
1251

1252
        --select-text-bg-color: #4a89dc;
1253

1254
        --item-hover-bg-color: #0a0d16;
1255
        --control-text-color: #b7b7b7;
1256
        --control-text-hover-color: #eee;
1257
        --window-border: 1px solid #555;
1258

1259
        --active-file-bg-color: rgb(34, 34, 34);
1260
        --active-file-border-color: #8d8df0;
1261

1262
        --primary-color: #a3d5fe;
1263

1264
        --active-file-text-color: white;
1265
        --item-hover-bg-color: #70717d;
1266
        --item-hover-text-color: white;
1267
        --primary-color: #6dc1e7;
1268

1269
        --rawblock-edit-panel-bd: #333;
1270

1271
        --search-select-bg-color: #428bca;
1272
    }
1273

1274
    html {
1275
        font-size: 16px;
1276
        -webkit-font-smoothing: antialiased;
1277
    }
1278

1279
    html,
1280
    body {
1281
        -webkit-text-size-adjust: 100%;
1282
        -ms-text-size-adjust: 100%;
1283
        background: #363B40;
1284
        background: var(--bg-color);
1285
        fill: currentColor;
1286
        line-height: 1.625rem;
1287
    }
1288

1289
    #write {
1290
        max-width: 914px;
1291
    }
1292

1293

1294
    @media only screen and (min-width: 1400px) {
1295
        #write {
1296
            max-width: 1024px;
1297
        }
1298
    }
1299

1300
    @media only screen and (min-width: 1800px) {
1301
        #write {
1302
            max-width: 1200px;
1303
        }
1304
    }
1305

1306
    html,
1307
    body,
1308
    button,
1309
    input,
1310
    select,
1311
    textarea,
1312
    div.code-tooltip-content {
1313
        color: #b8bfc6;
1314
        border-color: transparent;
1315
    }
1316

1317
    div.code-tooltip,
1318
    .md-hover-tip .md-arrow:after {
1319
        background: #333;
1320
    }
1321

1322
    .native-window #md-notification {
1323
        border: 1px solid #70717d;
1324
    }
1325

1326
    .popover.bottom>.arrow:after {
1327
        border-bottom-color: #333;
1328
    }
1329

1330
    html,
1331
    body,
1332
    button,
1333
    input,
1334
    select,
1335
    textarea {
1336
        font-family: "Helvetica Neue", Helvetica, Arial, 'Segoe UI Emoji', sans-serif;
1337
    }
1338

1339
    hr {
1340
        height: 2px;
1341
        border: 0;
1342
        margin: 24px 0 !important;
1343
    }
1344

1345
    h1,
1346
    h2,
1347
    h3,
1348
    h4,
1349
    h5,
1350
    h6 {
1351
        font-family: "Lucida Grande", "Corbel", sans-serif;
1352
        font-weight: normal;
1353
        clear: both;
1354
        -ms-word-wrap: break-word;
1355
        word-wrap: break-word;
1356
        margin: 0;
1357
        padding: 0;
1358
        color: #DEDEDE
1359
    }
1360

1361
    h1 {
1362
        font-size: 2.5rem;
1363
        /* 36px */
1364
        line-height: 2.75rem;
1365
        /* 40px */
1366
        margin-bottom: 1.5rem;
1367
        /* 24px */
1368
        letter-spacing: -1.5px;
1369
    }
1370

1371
    h2 {
1372
        font-size: 1.63rem;
1373
        /* 24px */
1374
        line-height: 1.875rem;
1375
        /* 30px */
1376
        margin-bottom: 1.5rem;
1377
        /* 24px */
1378
        letter-spacing: -1px;
1379
        font-weight: bold;
1380
    }
1381

1382
    h3 {
1383
        font-size: 1.17rem;
1384
        /* 18px */
1385
        line-height: 1.5rem;
1386
        /* 24px */
1387
        margin-bottom: 1.5rem;
1388
        /* 24px */
1389
        letter-spacing: -1px;
1390
        font-weight: bold;
1391
    }
1392

1393
    h4 {
1394
        font-size: 1.12rem;
1395
        /* 16px */
1396
        line-height: 1.375rem;
1397
        /* 22px */
1398
        margin-bottom: 1.5rem;
1399
        /* 24px */
1400
        color: white;
1401
    }
1402

1403
    h5 {
1404
        font-size: 0.97rem;
1405
        /* 16px */
1406
        line-height: 1.25rem;
1407
        /* 22px */
1408
        margin-bottom: 1.5rem;
1409
        /* 24px */
1410
        font-weight: bold;
1411
    }
1412

1413
    h6 {
1414
        font-size: 0.93rem;
1415
        /* 16px */
1416
        line-height: 1rem;
1417
        /* 16px */
1418
        margin-bottom: 0.75rem;
1419
        color: white;
1420
    }
1421

1422
    @media (min-width: 980px) {
1423

1424
        h3.md-focus:before,
1425
        h4.md-focus:before,
1426
        h5.md-focus:before,
1427
        h6.md-focus:before {
1428
            color: #ddd;
1429
            border: 1px solid #ddd;
1430
            border-radius: 3px;
1431
            position: absolute;
1432
            left: -1.642857143rem;
1433
            top: .357142857rem;
1434
            float: left;
1435
            font-size: 9px;
1436
            padding-left: 2px;
1437
            padding-right: 2px;
1438
            vertical-align: bottom;
1439
            font-weight: normal;
1440
            line-height: normal;
1441
        }
1442

1443
        h3.md-focus:before {
1444
            content: 'h3';
1445
        }
1446

1447
        h4.md-focus:before {
1448
            content: 'h4';
1449
        }
1450

1451
        h5.md-focus:before {
1452
            content: 'h5';
1453
            top: 0px;
1454
        }
1455

1456
        h6.md-focus:before {
1457
            content: 'h6';
1458
            top: 0px;
1459
        }
1460
    }
1461

1462
    a {
1463
        text-decoration: none;
1464
        outline: 0;
1465
    }
1466

1467
    a:hover {
1468
        outline: 0;
1469
    }
1470

1471
    a:focus {
1472
        outline: thin dotted;
1473
    }
1474

1475
    sup.md-footnote {
1476
        background-color: #555;
1477
        color: #ddd;
1478
    }
1479

1480
    p {
1481
        -ms-word-wrap: break-word;
1482
        word-wrap: break-word;
1483
    }
1484

1485
    p,
1486
    ul,
1487
    dd,
1488
    ol,
1489
    hr,
1490
    address,
1491
    pre,
1492
    table,
1493
    iframe,
1494
    .wp-caption,
1495
    .wp-audio-shortcode,
1496
    .wp-video-shortcode {
1497
        margin-top: 0;
1498
        margin-bottom: 1.5rem;
1499
        /* 24px */
1500
    }
1501

1502
    audio:not([controls]) {
1503
        display: none;
1504
    }
1505

1506
    [hidden] {
1507
        display: none;
1508
    }
1509

1510
    ::-moz-selection {
1511
        background: #4a89dc;
1512
        color: #fff;
1513
        text-shadow: none;
1514
    }
1515

1516
    *.in-text-selection,
1517
    ::selection {
1518
        background: #4a89dc;
1519
        color: #fff;
1520
        text-shadow: none;
1521
    }
1522

1523
    ul,
1524
    ol {
1525
        padding: 0 0 0 1.875rem;
1526
        /* 30px */
1527
    }
1528

1529
    ul {
1530
        list-style: square;
1531
    }
1532

1533
    ol {
1534
        list-style: decimal;
1535
    }
1536

1537
    ul ul,
1538
    ol ol,
1539
    ul ol,
1540
    ol ul {
1541
        margin: 0;
1542
    }
1543

1544
    b,
1545
    th,
1546
    dt,
1547
    strong {
1548
        font-weight: bold;
1549
    }
1550

1551
    i,
1552
    em,
1553
    dfn,
1554
    cite {
1555
        font-style: italic;
1556
    }
1557

1558
    blockquote {
1559
        padding-left: 1.875rem;
1560
        margin: 0 0 1.875rem 1.875rem;
1561
        border-left: solid 2px #474d54;
1562
        padding-left: 30px;
1563
        margin-top: 35px;
1564
    }
1565

1566
    pre,
1567
    code,
1568
    kbd,
1569
    tt,
1570
    var {
1571
        font-size: 0.875em;
1572
        font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
1573
    }
1574

1575
    code,
1576
    tt,
1577
    var {
1578
        background: rgba(0, 0, 0, 0.05);
1579
    }
1580

1581
    kbd {
1582
        padding: 2px 4px;
1583
        font-size: 90%;
1584
        color: #fff;
1585
        background-color: #333;
1586
        border-radius: 3px;
1587
        box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .25);
1588
    }
1589

1590
    pre.md-fences {
1591
        padding: 10px 10px 10px 30px;
1592
        margin-bottom: 20px;
1593
        background: #333;
1594
    }
1595

1596
    .CodeMirror-gutters {
1597
        background: #333;
1598
        border-right: 1px solid transparent;
1599
    }
1600

1601
    .enable-diagrams pre.md-fences[lang="sequence"] .code-tooltip,
1602
    .enable-diagrams pre.md-fences[lang="flow"] .code-tooltip,
1603
    .enable-diagrams pre.md-fences[lang="mermaid"] .code-tooltip {
1604
        bottom: -2.2em;
1605
        right: 4px;
1606
    }
1607

1608
    code,
1609
    kbd,
1610
    tt,
1611
    var {
1612
        padding: 2px 5px;
1613
    }
1614

1615
    table {
1616
        max-width: 100%;
1617
        width: 100%;
1618
        border-collapse: collapse;
1619
        border-spacing: 0;
1620
    }
1621

1622
    th,
1623
    td {
1624
        padding: 5px 10px;
1625
        vertical-align: top;
1626
    }
1627

1628
    a {
1629
        -webkit-transition: all .2s ease-in-out;
1630
        transition: all .2s ease-in-out;
1631
    }
1632

1633
    hr {
1634
        background: #474d54;
1635
        /* variable */
1636
    }
1637

1638
    h1 {
1639
        margin-top: 2em;
1640
    }
1641

1642
    a {
1643
        color: #e0e0e0;
1644
        text-decoration: underline;
1645
    }
1646

1647
    a:hover {
1648
        color: #fff;
1649
    }
1650

1651
    .md-inline-math script {
1652
        color: #81b1db;
1653
    }
1654

1655
    b,
1656
    th,
1657
    dt,
1658
    strong {
1659
        color: #DEDEDE;
1660
        /* variable */
1661
    }
1662

1663
    mark {
1664
        background: #D3D40E;
1665
    }
1666

1667
    blockquote {
1668
        color: #9DA2A6;
1669
    }
1670

1671
    table a {
1672
        color: #DEDEDE;
1673
        /* variable */
1674
    }
1675

1676
    th,
1677
    td {
1678
        border: solid 1px #474d54;
1679
        /* variable */
1680
    }
1681

1682
    .task-list {
1683
        padding-left: 0;
1684
    }
1685

1686
    .md-task-list-item {
1687
        padding-left: 1.25rem;
1688
    }
1689

1690
    .md-task-list-item>input {
1691
        top: auto;
1692
    }
1693

1694
    .md-task-list-item>input:before {
1695
        content: "";
1696
        display: inline-block;
1697
        width: 0.875rem;
1698
        height: 0.875rem;
1699
        vertical-align: middle;
1700
        text-align: center;
1701
        border: 1px solid #b8bfc6;
1702
        background-color: #363B40;
1703
        margin-top: -0.4rem;
1704
    }
1705

1706
    .md-task-list-item>input:checked:before,
1707
    .md-task-list-item>input[checked]:before {
1708
        content: '\221A';
1709
        /*◘*/
1710
        font-size: 0.625rem;
1711
        line-height: 0.625rem;
1712
        color: #DEDEDE;
1713
    }
1714

1715
    /** quick open **/
1716
    .auto-suggest-container {
1717
        border: 0px;
1718
        background-color: #525C65;
1719
    }
1720

1721
    #typora-quick-open {
1722
        background-color: #525C65;
1723
    }
1724

1725
    #typora-quick-open input {
1726
        background-color: #525C65;
1727
        border: 0;
1728
        border-bottom: 1px solid grey;
1729
    }
1730

1731
    .typora-quick-open-item {
1732
        background-color: inherit;
1733
        color: inherit;
1734
    }
1735

1736
    .typora-quick-open-item.active,
1737
    .typora-quick-open-item:hover {
1738
        background-color: #4D8BDB;
1739
        color: white;
1740
    }
1741

1742
    .typora-quick-open-item:hover {
1743
        background-color: rgba(77, 139, 219, 0.8);
1744
    }
1745

1746
    .typora-search-spinner>div {
1747
        background-color: #fff;
1748
    }
1749

1750
    #write pre.md-meta-block {
1751
        border-bottom: 1px dashed #ccc;
1752
        background: transparent;
1753
        padding-bottom: 0.6em;
1754
        line-height: 1.6em;
1755
    }
1756

1757
    .btn,
1758
    .btn .btn-default {
1759
        background: transparent;
1760
        color: #b8bfc6;
1761
    }
1762

1763
    .ty-table-edit {
1764
        border-top: 1px solid gray;
1765
        background-color: #363B40;
1766
    }
1767

1768
    .popover-title {
1769
        background: transparent;
1770
    }
1771

1772
    .md-image>.md-meta {
1773
        color: #BBBBBB;
1774
        background: transparent;
1775
    }
1776

1777
    .md-expand.md-image>.md-meta {
1778
        color: #DDD;
1779
    }
1780

1781
    #write>h3:before,
1782
    #write>h4:before,
1783
    #write>h5:before,
1784
    #write>h6:before {
1785
        border: none;
1786
        border-radius: 0px;
1787
        color: #888;
1788
        text-decoration: underline;
1789
        left: -1.4rem;
1790
        top: 0.2rem;
1791
    }
1792

1793
    #write>h3.md-focus:before {
1794
        top: 2px;
1795
    }
1796

1797
    #write>h4.md-focus:before {
1798
        top: 2px;
1799
    }
1800

1801
    .md-toc-item {
1802
        color: #A8C2DC;
1803
    }
1804

1805
    #write div.md-toc-tooltip {
1806
        background-color: #363B40;
1807
    }
1808

1809
    .dropdown-menu .btn:hover,
1810
    .dropdown-menu .btn:focus,
1811
    .md-toc .btn:hover,
1812
    .md-toc .btn:focus {
1813
        color: white;
1814
        background: black;
1815
    }
1816

1817
    #toc-dropmenu {
1818
        background: rgba(50, 54, 59, 0.93);
1819
        border: 1px solid rgba(253, 253, 253, 0.15);
1820
    }
1821

1822
    #toc-dropmenu .divider {
1823
        background-color: #9b9b9b;
1824
    }
1825

1826
    .outline-expander:before {
1827
        top: 2px;
1828
    }
1829

1830
    #typora-sidebar {
1831
        box-shadow: none;
1832
        border-right: 1px dashed;
1833
        border-right: none;
1834
    }
1835

1836
    .sidebar-tabs {
1837
        border-bottom: 0;
1838
    }
1839

1840
    #typora-sidebar:hover .outline-title-wrapper {
1841
        border-left: 1px dashed;
1842
    }
1843

1844
    .outline-title-wrapper .btn {
1845
        color: inherit;
1846
    }
1847

1848
    .outline-item:hover {
1849
        border-color: #363B40;
1850
        background-color: #363B40;
1851
        color: white;
1852
    }
1853

1854
    h1.md-focus .md-attr,
1855
    h2.md-focus .md-attr,
1856
    h3.md-focus .md-attr,
1857
    h4.md-focus .md-attr,
1858
    h5.md-focus .md-attr,
1859
    h6.md-focus .md-attr,
1860
    .md-header-span .md-attr {
1861
        color: #8C8E92;
1862
        display: inline;
1863
    }
1864

1865
    .md-comment {
1866
        color: #5a95e3;
1867
        opacity: 1;
1868
    }
1869

1870
    .md-inline-math svg {
1871
        color: #b8bfc6;
1872
    }
1873

1874
    #math-inline-preview .md-arrow:after {
1875
        background: black;
1876
    }
1877

1878
    .modal-content {
1879
        background: var(--bg-color);
1880
        border: 0;
1881
    }
1882

1883
    .modal-title {
1884
        font-size: 1.5em;
1885
    }
1886

1887
    .modal-content input {
1888
        background-color: rgba(26, 21, 21, 0.51);
1889
        color: white;
1890
    }
1891

1892
    .modal-content .input-group-addon {
1893
        color: white;
1894
    }
1895

1896
    .modal-backdrop {
1897
        background-color: rgba(174, 174, 174, 0.7);
1898
    }
1899

1900
    .modal-content .btn-primary {
1901
        border-color: var(--primary-color);
1902
    }
1903

1904
    .md-table-resize-popover {
1905
        background-color: #333;
1906
    }
1907

1908
    .form-inline .input-group .input-group-addon {
1909
        color: white;
1910
    }
1911

1912
    #md-searchpanel {
1913
        border-bottom: 1px dashed grey;
1914
    }
1915

1916
    /** UI for electron */
1917

1918
    .context-menu,
1919
    #spell-check-panel,
1920
    #footer-word-count-info {
1921
        background-color: #42464A;
1922
    }
1923

1924
    .context-menu.dropdown-menu .divider,
1925
    .dropdown-menu .divider {
1926
        background-color: #777777;
1927
        opacity: 1;
1928
    }
1929

1930
    footer {
1931
        color: inherit;
1932
    }
1933

1934
    @media (max-width: 1000px) {
1935
        footer {
1936
            border-top: none;
1937
        }
1938

1939
        footer:hover {
1940
            color: inherit;
1941
        }
1942
    }
1943

1944
    #file-info-file-path .file-info-field-value:hover {
1945
        background-color: #555;
1946
        color: #dedede;
1947
    }
1948

1949
    .megamenu-content,
1950
    .megamenu-opened header {
1951
        background: var(--bg-color);
1952
    }
1953

1954
    .megamenu-menu-panel h2,
1955
    .megamenu-menu-panel h1,
1956
    .long-btn {
1957
        color: inherit;
1958
    }
1959

1960
    .megamenu-menu-panel input[type='text'] {
1961
        background: inherit;
1962
        border: 0;
1963
        border-bottom: 1px solid;
1964
    }
1965

1966
    #recent-file-panel-action-btn {
1967
        background: inherit;
1968
        border: 1px grey solid;
1969
    }
1970

1971
    .megamenu-menu-panel .dropdown-menu>li>a {
1972
        color: inherit;
1973
        background-color: #2F353A;
1974
        text-decoration: none;
1975
    }
1976

1977
    .megamenu-menu-panel table td:nth-child(1) {
1978
        color: inherit;
1979
        font-weight: bold;
1980
    }
1981

1982
    .megamenu-menu-panel tbody tr:hover td:nth-child(1) {
1983
        color: white;
1984
    }
1985

1986
    .modal-footer .btn-default,
1987
    .modal-footer .btn-primary,
1988
    .modal-footer .btn-default:not(:hover) {
1989
        border: 1px solid;
1990
        border-color: transparent;
1991
    }
1992

1993
    .btn-primary {
1994
        color: white;
1995
    }
1996

1997
    .btn-default:hover,
1998
    .btn-default:focus,
1999
    .btn-default.focus,
2000
    .btn-default:active,
2001
    .btn-default.active,
2002
    .open>.dropdown-toggle.btn-default {
2003
        color: white;
2004
        border: 1px solid #ddd;
2005
        background-color: inherit;
2006
    }
2007

2008
    .modal-header {
2009
        border-bottom: 0;
2010
    }
2011

2012
    .modal-footer {
2013
        border-top: 0;
2014
    }
2015

2016
    #recent-file-panel tbody tr:nth-child(2n-1) {
2017
        background-color: transparent !important;
2018
    }
2019

2020
    .megamenu-menu-panel tbody tr:hover td:nth-child(2) {
2021
        color: inherit;
2022
    }
2023

2024
    .megamenu-menu-panel .btn {
2025
        border: 1px solid #eee;
2026
        background: transparent;
2027
    }
2028

2029
    .mouse-hover .toolbar-icon.btn:hover,
2030
    #w-full.mouse-hover,
2031
    #w-pin.mouse-hover {
2032
        background-color: inherit;
2033
    }
2034

2035
    .typora-node::-webkit-scrollbar {
2036
        width: 5px;
2037
    }
2038

2039
    .typora-node::-webkit-scrollbar-thumb:vertical {
2040
        background: rgba(250, 250, 250, 0.3);
2041
    }
2042

2043
    .typora-node::-webkit-scrollbar-thumb:vertical:active {
2044
        background: rgba(250, 250, 250, 0.5);
2045
    }
2046

2047
    #w-unpin {
2048
        background-color: #4182c4;
2049
    }
2050

2051
    #top-titlebar,
2052
    #top-titlebar * {
2053
        color: var(--item-hover-text-color);
2054
    }
2055

2056
    .typora-sourceview-on #toggle-sourceview-btn,
2057
    #footer-word-count:hover,
2058
    .ty-show-word-count #footer-word-count {
2059
        background: #333333;
2060
    }
2061

2062
    #toggle-sourceview-btn:hover {
2063
        color: #eee;
2064
        background: #333333;
2065
    }
2066

2067
    /** focus mode */
2068
    .on-focus-mode .md-end-block:not(.md-focus):not(.md-focus-container) * {
2069
        color: #686868 !important;
2070
    }
2071

2072
    .on-focus-mode .md-end-block:not(.md-focus) img,
2073
    .on-focus-mode .md-task-list-item:not(.md-focus-container)>input {
2074
        opacity: #686868 !important;
2075
    }
2076

2077
    .on-focus-mode li[cid]:not(.md-focus-container) {
2078
        color: #686868;
2079
    }
2080

2081
    .on-focus-mode .md-fences.md-focus .CodeMirror-code>*:not(.CodeMirror-activeline) *,
2082
    .on-focus-mode .CodeMirror.cm-s-inner:not(.CodeMirror-focused) * {
2083
        color: #686868 !important;
2084
    }
2085

2086
    .on-focus-mode .md-focus,
2087
    .on-focus-mode .md-focus-container {
2088
        color: #fff;
2089
    }
2090

2091
    .on-focus-mode #typora-source .CodeMirror-code>*:not(.CodeMirror-activeline) * {
2092
        color: #686868 !important;
2093
    }
2094

2095

2096
    /*diagrams*/
2097
    #write .md-focus .md-diagram-panel {
2098
        border: 1px solid #ddd;
2099
        margin-left: -1px;
2100
        width: calc(100% + 2px);
2101
    }
2102

2103
    /*diagrams*/
2104
    #write .md-focus.md-fences-with-lineno .md-diagram-panel {
2105
        margin-left: auto;
2106
    }
2107

2108
    .md-diagram-panel-error {
2109
        color: #f1908e;
2110
    }
2111

2112
    .active-tab-files #info-panel-tab-file,
2113
    .active-tab-files #info-panel-tab-file:hover,
2114
    .active-tab-outline #info-panel-tab-outline,
2115
    .active-tab-outline #info-panel-tab-outline:hover {
2116
        color: #eee;
2117
    }
2118

2119
    .sidebar-footer-item:hover,
2120
    .footer-item:hover {
2121
        background: inherit;
2122
        color: white;
2123
    }
2124

2125
    .ty-side-sort-btn.active,
2126
    .ty-side-sort-btn:hover,
2127
    .selected-folder-menu-item a:after {
2128
        color: white;
2129
    }
2130

2131
    #sidebar-files-menu {
2132
        border: solid 1px;
2133
        box-shadow: 4px 4px 20px rgba(0, 0, 0, 0.79);
2134
        background-color: var(--bg-color);
2135
    }
2136

2137
    .file-list-item {
2138
        border-bottom: none;
2139
    }
2140

2141
    .file-list-item-summary {
2142
        opacity: 1;
2143
    }
2144

2145
    .file-list-item.active:first-child {
2146
        border-top: none;
2147
    }
2148

2149
    .file-node-background {
2150
        height: 32px;
2151
    }
2152

2153
    .file-library-node.active>.file-node-content,
2154
    .file-list-item.active {
2155
        color: white;
2156
        color: var(--active-file-text-color);
2157
    }
2158

2159
    .file-library-node.active>.file-node-background {
2160
        background-color: rgb(34, 34, 34);
2161
        background-color: var(--active-file-bg-color);
2162
    }
2163

2164
    .file-list-item.active {
2165
        background-color: rgb(34, 34, 34);
2166
        background-color: var(--active-file-bg-color);
2167
    }
2168

2169
    #ty-tooltip {
2170
        background-color: black;
2171
        color: #eee;
2172
    }
2173

2174
    .md-task-list-item>input {
2175
        margin-left: -1.3em;
2176
        margin-top: 0.3rem;
2177
        -webkit-appearance: none;
2178
    }
2179

2180
    .md-mathjax-midline {
2181
        background-color: #57616b;
2182
        border-bottom: none;
2183
    }
2184

2185
    footer.ty-footer {
2186
        border-color: #656565;
2187
    }
2188

2189
    .ty-preferences .btn-default {
2190
        background: transparent;
2191
    }
2192

2193
    .ty-preferences .btn-default:hover {
2194
        background: #57616b;
2195
    }
2196

2197
    .ty-preferences select {
2198
        border: 1px solid #989698;
2199
        height: 21px;
2200
    }
2201

2202
    .ty-preferences .nav-group-item.active,
2203
    .export-item.active,
2204
    .export-items-list-control,
2205
    .export-detail {
2206
        background: var(--item-hover-bg-color);
2207
    }
2208

2209
    .ty-preferences input[type="search"] {
2210
        border-color: #333;
2211
        background: #333;
2212
        line-height: 22px;
2213
        border-radius: 6px;
2214
        color: white;
2215
    }
2216

2217
    .ty-preferences input[type="search"]:focus {
2218
        box-shadow: none;
2219
    }
2220

2221
    [data-is-directory="true"] .file-node-content {
2222
        margin-bottom: 0;
2223
    }
2224

2225
    .file-node-title {
2226
        line-height: 22px;
2227
    }
2228

2229
    .html-for-mac .file-node-open-state,
2230
    .html-for-mac .file-node-icon {
2231
        line-height: 26px;
2232
    }
2233

2234
    ::-webkit-scrollbar-thumb {
2235
        background: rgba(230, 230, 230, 0.30);
2236
    }
2237

2238
    ::-webkit-scrollbar-thumb:active {
2239
        background: rgba(230, 230, 230, 0.50);
2240
    }
2241

2242
    #typora-sidebar:hover div.sidebar-content-content::-webkit-scrollbar-thumb:horizontal {
2243
        background: rgba(230, 230, 230, 0.30);
2244
    }
2245

2246
    .nav-group-item:active {
2247
        background-color: #474d54 !important;
2248
    }
2249

2250
    .md-search-hit {
2251
        background: rgba(199, 140, 60, 0.81);
2252
        color: #eee;
2253
    }
2254

2255
    .md-search-hit * {
2256
        color: #eee;
2257
    }
2258

2259
    #md-searchpanel input {
2260
        color: white;
2261
    }
2262

2263
    .modal-backdrop.in {
2264
        opacity: 1;
2265
        backdrop-filter: blur(1px);
2266
    }
2267

2268
    .clear-btn-icon {
2269
        top: 8px;
2270
    }
2271

2272
    :root {
2273
        --mermaid-font-zoom: 1em;
2274
    }
2275

2276
    @media print {
2277
        @page {
2278
            margin: 0 0 0 0;
2279
        }
2280

2281
        body.typora-export {
2282
            padding-left: 0;
2283
            padding-right: 0;
2284
        }
2285

2286
        #write {
2287
            padding: 0;
2288
        }
2289
    }

项目部署

此项目部署在腾讯云服务器上

服务器系统:CentOS 7.9.2009(Py3.7.9)

服务器管理使用宝塔面板,环境套件为Nginx+PHP7.3+phpMyAdmin4.4+MySQL5.6.50

安装要求：

内存：512M以上，推荐768M以上（纯面板约占系统60M内存）

硬盘：300M以上可用硬盘空间（纯面板约占20M磁盘空间）

系统：CentOS 7.1+ (Ubuntu16.04+.、Debian9.0+)，确保是干净的操作系统，没有安装过其它环境带的Apache/Nginx/php/MySQL/pgsql/gitlab/java（已有环境不可安装）

架构：x86_64（主流服务器均是此架构），ARM不完整兼容（面板环境安装慢，部分软件可能安装不上）

宝塔Linux面板7.6.0版本是基于Centos/Debian/Ubuntu开发的，为了最好的兼容性，请使用以上系统

系统兼容性顺序：

Centos7.x > Debian10 > Ubuntu 20.04 > Cenots8.x > Ubuntu 18.04 > 其它系统

提示：Centos官方已宣布在2020年停止对Centos6的维护更新，各大软件开发商也逐渐停止对Centos6的兼容，新服务器不建议使用Centos6

Centos安装命令：

yum install -y wget && wget -O install.sh http://download.bt.cn/install/install_6.0.sh && sh install.sh

咨询离线安装版本

试验性Centos/Ubuntu/Debian安装命令 独立运行环境（py3.7）可能存在少量兼容性问题不断优化中

curl -sSO http://download.bt.cn/install/install_panel.sh && bash install_panel.sh

Ubuntu/Deepin安装命令：

wget -O install.sh http://download.bt.cn/install/install-ubuntu_6.0.sh && sudo bash install.sh

Debian安装命令：

wget -O install.sh http://download.bt.cn/install/install-ubuntu_6.0.sh && bash install.sh

Fedora安装命令:

wget -O install.sh http://download.bt.cn/install/install_6.0.sh && bash install.sh

以上节点无法使用的情况下，请使用下面的备用节点：

备用节点【香港】：（宝塔推荐使用CN2 双程GIA高品质，免备案的尊云zun.com香港云服务器安装）

yum install -y wget && wget -O install.sh http://103.224.251.67:5880/install/install_6.0.sh && sh install.sh

备用节点【美国】：（宝塔推荐使用价格厚道，高性能v4的尊云zun.comKVM云服务器安装）

yum install -y wget && wget -O install.sh http://128.1.164.196:5880/install/install_6.0.sh && sh install.sh

面板特色功能：

一键配置服务器环境（LAMP/LNMP）
一键安全重启
一键创建管理网站、ftp、数据库
一键部署SSL证书
一键部署源码（discuz、wordpress、dedecms、z-blog、微擎等等）
一键配置（定期备份、数据导入、伪静态、301、SSL、子目录、反向代理、切换PHP版本）
一键安装常用PHP扩展(fileinfo、intl、opcache、imap、memcache、apc、redis、ioncube、imagick)
数据库一键导入导出
系统监控（CPU、内存、磁盘IO、网络IO）
防火墙端口放行
SSH开启与关闭及SSH端口更改
禁PING开启或关闭
方便高效的文件管理器（上传、下载、压缩、解压、查看、编辑等等）
计划任务（定期备份、日志切割、shell脚本）
软件管理（一键安装、卸载、版本切换）

宝塔面板部署详情移步:宝塔官网