@mryhryki/markdown-preview 0.7.0 → 0.7.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,10 +1,41 @@
1
+ .markdown-body {
2
+ --base-size-4: 0.25rem;
3
+ --base-size-8: 0.5rem;
4
+ --base-size-16: 1rem;
5
+ --base-text-weight-normal: 400;
6
+ --base-text-weight-medium: 500;
7
+ --base-text-weight-semibold: 600;
8
+ --fontStack-monospace: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace;
9
+ }
10
+
1
11
  @media (prefers-color-scheme: dark) {
2
12
  .markdown-body,
3
13
  [data-theme="dark"] {
4
14
  /*dark*/
5
15
  color-scheme: dark;
16
+ --focus-outlineColor: #1f6feb;
17
+ --fgColor-default: #e6edf3;
18
+ --fgColor-muted: #8d96a0;
19
+ --fgColor-accent: #4493f8;
20
+ --fgColor-success: #3fb950;
21
+ --fgColor-attention: #d29922;
22
+ --fgColor-danger: #f85149;
23
+ --fgColor-done: #ab7df8;
24
+ --bgColor-default: #0d1117;
25
+ --bgColor-muted: #161b22;
26
+ --bgColor-neutral-muted: #6e768166;
27
+ --bgColor-attention-muted: #bb800926;
28
+ --borderColor-default: #30363d;
29
+ --borderColor-muted: #30363db3;
30
+ --borderColor-neutral-muted: #6e768166;
31
+ --borderColor-accent-emphasis: #1f6feb;
32
+ --borderColor-success-emphasis: #238636;
33
+ --borderColor-attention-emphasis: #9e6a03;
34
+ --borderColor-danger-emphasis: #da3633;
35
+ --borderColor-done-emphasis: #8957e5;
6
36
  --color-prettylights-syntax-comment: #8b949e;
7
37
  --color-prettylights-syntax-constant: #79c0ff;
38
+ --color-prettylights-syntax-constant-other-reference-link: #a5d6ff;
8
39
  --color-prettylights-syntax-entity: #d2a8ff;
9
40
  --color-prettylights-syntax-storage-modifier-import: #c9d1d9;
10
41
  --color-prettylights-syntax-entity-tag: #7ee787;
@@ -12,6 +43,7 @@
12
43
  --color-prettylights-syntax-string: #a5d6ff;
13
44
  --color-prettylights-syntax-variable: #ffa657;
14
45
  --color-prettylights-syntax-brackethighlighter-unmatched: #f85149;
46
+ --color-prettylights-syntax-brackethighlighter-angle: #8b949e;
15
47
  --color-prettylights-syntax-invalid-illegal-text: #f0f6fc;
16
48
  --color-prettylights-syntax-invalid-illegal-bg: #8e1519;
17
49
  --color-prettylights-syntax-carriage-return-text: #f0f6fc;
@@ -30,28 +62,7 @@
30
62
  --color-prettylights-syntax-markup-ignored-text: #c9d1d9;
31
63
  --color-prettylights-syntax-markup-ignored-bg: #1158c7;
32
64
  --color-prettylights-syntax-meta-diff-range: #d2a8ff;
33
- --color-prettylights-syntax-brackethighlighter-angle: #8b949e;
34
65
  --color-prettylights-syntax-sublimelinter-gutter-mark: #484f58;
35
- --color-prettylights-syntax-constant-other-reference-link: #a5d6ff;
36
- --color-fg-default: #e6edf3;
37
- --color-fg-muted: #848d97;
38
- --color-fg-subtle: #6e7681;
39
- --color-canvas-default: #0d1117;
40
- --color-canvas-subtle: #161b22;
41
- --color-border-default: #30363d;
42
- --color-border-muted: #21262d;
43
- --color-neutral-muted: rgba(110,118,129,0.4);
44
- --color-accent-fg: #2f81f7;
45
- --color-accent-emphasis: #1f6feb;
46
- --color-success-fg: #3fb950;
47
- --color-success-emphasis: #238636;
48
- --color-attention-fg: #d29922;
49
- --color-attention-emphasis: #9e6a03;
50
- --color-attention-subtle: rgba(187,128,9,0.15);
51
- --color-danger-fg: #f85149;
52
- --color-danger-emphasis: #da3633;
53
- --color-done-fg: #a371f7;
54
- --color-done-emphasis: #8957e5;
55
66
  }
56
67
  }
57
68
 
@@ -60,15 +71,37 @@
60
71
  [data-theme="light"] {
61
72
  /*light*/
62
73
  color-scheme: light;
74
+ --focus-outlineColor: #0969da;
75
+ --fgColor-default: #1f2328;
76
+ --fgColor-muted: #636c76;
77
+ --fgColor-accent: #0969da;
78
+ --fgColor-success: #1a7f37;
79
+ --fgColor-attention: #9a6700;
80
+ --fgColor-danger: #d1242f;
81
+ --fgColor-done: #8250df;
82
+ --bgColor-default: #ffffff;
83
+ --bgColor-muted: #f6f8fa;
84
+ --bgColor-neutral-muted: #afb8c133;
85
+ --bgColor-attention-muted: #fff8c5;
86
+ --borderColor-default: #d0d7de;
87
+ --borderColor-muted: #d0d7deb3;
88
+ --borderColor-neutral-muted: #afb8c133;
89
+ --borderColor-accent-emphasis: #0969da;
90
+ --borderColor-success-emphasis: #1a7f37;
91
+ --borderColor-attention-emphasis: #bf8700;
92
+ --borderColor-danger-emphasis: #cf222e;
93
+ --borderColor-done-emphasis: #8250df;
63
94
  --color-prettylights-syntax-comment: #57606a;
64
95
  --color-prettylights-syntax-constant: #0550ae;
96
+ --color-prettylights-syntax-constant-other-reference-link: #0a3069;
65
97
  --color-prettylights-syntax-entity: #6639ba;
66
98
  --color-prettylights-syntax-storage-modifier-import: #24292f;
67
- --color-prettylights-syntax-entity-tag: #116329;
99
+ --color-prettylights-syntax-entity-tag: #0550ae;
68
100
  --color-prettylights-syntax-keyword: #cf222e;
69
101
  --color-prettylights-syntax-string: #0a3069;
70
102
  --color-prettylights-syntax-variable: #953800;
71
103
  --color-prettylights-syntax-brackethighlighter-unmatched: #82071e;
104
+ --color-prettylights-syntax-brackethighlighter-angle: #57606a;
72
105
  --color-prettylights-syntax-invalid-illegal-text: #f6f8fa;
73
106
  --color-prettylights-syntax-invalid-illegal-bg: #82071e;
74
107
  --color-prettylights-syntax-carriage-return-text: #f6f8fa;
@@ -87,28 +120,7 @@
87
120
  --color-prettylights-syntax-markup-ignored-text: #eaeef2;
88
121
  --color-prettylights-syntax-markup-ignored-bg: #0550ae;
89
122
  --color-prettylights-syntax-meta-diff-range: #8250df;
90
- --color-prettylights-syntax-brackethighlighter-angle: #57606a;
91
123
  --color-prettylights-syntax-sublimelinter-gutter-mark: #8c959f;
92
- --color-prettylights-syntax-constant-other-reference-link: #0a3069;
93
- --color-fg-default: #1F2328;
94
- --color-fg-muted: #656d76;
95
- --color-fg-subtle: #6e7781;
96
- --color-canvas-default: #ffffff;
97
- --color-canvas-subtle: #f6f8fa;
98
- --color-border-default: #d0d7de;
99
- --color-border-muted: hsla(210,18%,87%,1);
100
- --color-neutral-muted: rgba(175,184,193,0.2);
101
- --color-accent-fg: #0969da;
102
- --color-accent-emphasis: #0969da;
103
- --color-success-fg: #1a7f37;
104
- --color-success-emphasis: #1f883d;
105
- --color-attention-fg: #9a6700;
106
- --color-attention-emphasis: #9a6700;
107
- --color-attention-subtle: #fff8c5;
108
- --color-danger-fg: #d1242f;
109
- --color-danger-emphasis: #cf222e;
110
- --color-done-fg: #8250df;
111
- --color-done-emphasis: #8250df;
112
124
  }
113
125
  }
114
126
 
@@ -116,12 +128,13 @@
116
128
  -ms-text-size-adjust: 100%;
117
129
  -webkit-text-size-adjust: 100%;
118
130
  margin: 0;
119
- color: var(--color-fg-default);
120
- background-color: var(--color-canvas-default);
131
+ color: var(--fgColor-default);
132
+ background-color: var(--bgColor-default);
121
133
  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji";
122
134
  font-size: 16px;
123
135
  line-height: 1.5;
124
136
  word-wrap: break-word;
137
+ scroll-behavior: auto;
125
138
  }
126
139
 
127
140
  .markdown-body .octicon {
@@ -161,7 +174,7 @@
161
174
 
162
175
  .markdown-body a {
163
176
  background-color: transparent;
164
- color: var(--color-accent-fg);
177
+ color: var(--fgColor-accent);
165
178
  text-decoration: none;
166
179
  }
167
180
 
@@ -185,12 +198,12 @@
185
198
  font-weight: var(--base-text-weight-semibold, 600);
186
199
  padding-bottom: .3em;
187
200
  font-size: 2em;
188
- border-bottom: 1px solid var(--color-border-muted);
201
+ border-bottom: 1px solid var(--borderColor-muted);
189
202
  }
190
203
 
191
204
  .markdown-body mark {
192
- background-color: var(--color-attention-subtle);
193
- color: var(--color-fg-default);
205
+ background-color: var(--bgColor-attention-muted);
206
+ color: var(--fgColor-default);
194
207
  }
195
208
 
196
209
  .markdown-body small {
@@ -217,7 +230,7 @@
217
230
  border-style: none;
218
231
  max-width: 100%;
219
232
  box-sizing: content-box;
220
- background-color: var(--color-canvas-default);
233
+ background-color: var(--bgColor-default);
221
234
  }
222
235
 
223
236
  .markdown-body code,
@@ -236,11 +249,11 @@
236
249
  box-sizing: content-box;
237
250
  overflow: hidden;
238
251
  background: transparent;
239
- border-bottom: 1px solid var(--color-border-muted);
252
+ border-bottom: 1px solid var(--borderColor-muted);
240
253
  height: .25em;
241
254
  padding: 0;
242
255
  margin: 24px 0;
243
- background-color: var(--color-border-default);
256
+ background-color: var(--borderColor-default);
244
257
  border: 0;
245
258
  }
246
259
 
@@ -293,7 +306,7 @@
293
306
  }
294
307
 
295
308
  .markdown-body ::placeholder {
296
- color: var(--color-fg-subtle);
309
+ color: var(--fgColor-muted);
297
310
  opacity: 1;
298
311
  }
299
312
 
@@ -327,14 +340,14 @@
327
340
  }
328
341
 
329
342
  .markdown-body details:not([open])>*:not(summary) {
330
- display: none !important;
343
+ display: none;
331
344
  }
332
345
 
333
346
  .markdown-body a:focus,
334
347
  .markdown-body [role=button]:focus,
335
348
  .markdown-body input[type=radio]:focus,
336
349
  .markdown-body input[type=checkbox]:focus {
337
- outline: 2px solid var(--color-accent-fg);
350
+ outline: 2px solid var(--focus-outlineColor);
338
351
  outline-offset: -2px;
339
352
  box-shadow: none;
340
353
  }
@@ -350,7 +363,7 @@
350
363
  .markdown-body [role=button]:focus-visible,
351
364
  .markdown-body input[type=radio]:focus-visible,
352
365
  .markdown-body input[type=checkbox]:focus-visible {
353
- outline: 2px solid var(--color-accent-fg);
366
+ outline: 2px solid var(--focus-outlineColor);
354
367
  outline-offset: -2px;
355
368
  box-shadow: none;
356
369
  }
@@ -367,15 +380,15 @@
367
380
  .markdown-body kbd {
368
381
  display: inline-block;
369
382
  padding: 3px 5px;
370
- font: 11px ui-monospace,SFMono-Regular,SF Mono,Menlo,Consolas,Liberation Mono,monospace;
383
+ font: 11px var(--fontStack-monospace, ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace);
371
384
  line-height: 10px;
372
- color: var(--color-fg-default);
385
+ color: var(--fgColor-default);
373
386
  vertical-align: middle;
374
- background-color: var(--color-canvas-subtle);
375
- border: solid 1px var(--color-neutral-muted);
376
- border-bottom-color: var(--color-neutral-muted);
387
+ background-color: var(--bgColor-muted);
388
+ border: solid 1px var(--borderColor-neutral-muted);
389
+ border-bottom-color: var(--borderColor-neutral-muted);
377
390
  border-radius: 6px;
378
- box-shadow: inset 0 -1px 0 var(--color-neutral-muted);
391
+ box-shadow: inset 0 -1px 0 var(--borderColor-neutral-muted);
379
392
  }
380
393
 
381
394
  .markdown-body h1,
@@ -394,7 +407,7 @@
394
407
  font-weight: var(--base-text-weight-semibold, 600);
395
408
  padding-bottom: .3em;
396
409
  font-size: 1.5em;
397
- border-bottom: 1px solid var(--color-border-muted);
410
+ border-bottom: 1px solid var(--borderColor-muted);
398
411
  }
399
412
 
400
413
  .markdown-body h3 {
@@ -415,7 +428,7 @@
415
428
  .markdown-body h6 {
416
429
  font-weight: var(--base-text-weight-semibold, 600);
417
430
  font-size: .85em;
418
- color: var(--color-fg-muted);
431
+ color: var(--fgColor-muted);
419
432
  }
420
433
 
421
434
  .markdown-body p {
@@ -426,8 +439,8 @@
426
439
  .markdown-body blockquote {
427
440
  margin: 0;
428
441
  padding: 0 1em;
429
- color: var(--color-fg-muted);
430
- border-left: .25em solid var(--color-border-default);
442
+ color: var(--fgColor-muted);
443
+ border-left: .25em solid var(--borderColor-default);
431
444
  }
432
445
 
433
446
  .markdown-body ul,
@@ -456,14 +469,14 @@
456
469
  .markdown-body tt,
457
470
  .markdown-body code,
458
471
  .markdown-body samp {
459
- font-family: ui-monospace,SFMono-Regular,SF Mono,Menlo,Consolas,Liberation Mono,monospace;
472
+ font-family: var(--fontStack-monospace, ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace);
460
473
  font-size: 12px;
461
474
  }
462
475
 
463
476
  .markdown-body pre {
464
477
  margin-top: 0;
465
478
  margin-bottom: 0;
466
- font-family: ui-monospace,SFMono-Regular,SF Mono,Menlo,Consolas,Liberation Mono,monospace;
479
+ font-family: var(--fontStack-monospace, ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace);
467
480
  font-size: 12px;
468
481
  word-wrap: normal;
469
482
  }
@@ -511,7 +524,7 @@
511
524
  }
512
525
 
513
526
  .markdown-body .absent {
514
- color: var(--color-danger-fg);
527
+ color: var(--fgColor-danger);
515
528
  }
516
529
 
517
530
  .markdown-body .anchor {
@@ -551,7 +564,7 @@
551
564
  .markdown-body h4 .octicon-link,
552
565
  .markdown-body h5 .octicon-link,
553
566
  .markdown-body h6 .octicon-link {
554
- color: var(--color-fg-default);
567
+ color: var(--fgColor-default);
555
568
  vertical-align: middle;
556
569
  visibility: hidden;
557
570
  }
@@ -684,7 +697,7 @@
684
697
  .markdown-body table th,
685
698
  .markdown-body table td {
686
699
  padding: 6px 13px;
687
- border: 1px solid var(--color-border-default);
700
+ border: 1px solid var(--borderColor-default);
688
701
  }
689
702
 
690
703
  .markdown-body table td>:last-child {
@@ -692,12 +705,12 @@
692
705
  }
693
706
 
694
707
  .markdown-body table tr {
695
- background-color: var(--color-canvas-default);
696
- border-top: 1px solid var(--color-border-muted);
708
+ background-color: var(--bgColor-default);
709
+ border-top: 1px solid var(--borderColor-muted);
697
710
  }
698
711
 
699
712
  .markdown-body table tr:nth-child(2n) {
700
- background-color: var(--color-canvas-subtle);
713
+ background-color: var(--bgColor-muted);
701
714
  }
702
715
 
703
716
  .markdown-body table img {
@@ -730,7 +743,7 @@
730
743
  padding: 7px;
731
744
  margin: 13px 0 0;
732
745
  overflow: hidden;
733
- border: 1px solid var(--color-border-default);
746
+ border: 1px solid var(--borderColor-default);
734
747
  }
735
748
 
736
749
  .markdown-body span.frame span img {
@@ -742,7 +755,7 @@
742
755
  display: block;
743
756
  padding: 5px 0 0;
744
757
  clear: both;
745
- color: var(--color-fg-default);
758
+ color: var(--fgColor-default);
746
759
  }
747
760
 
748
761
  .markdown-body span.align-center {
@@ -812,7 +825,7 @@
812
825
  margin: 0;
813
826
  font-size: 85%;
814
827
  white-space: break-spaces;
815
- background-color: var(--color-neutral-muted);
828
+ background-color: var(--bgColor-neutral-muted);
816
829
  border-radius: 6px;
817
830
  }
818
831
 
@@ -857,8 +870,8 @@
857
870
  overflow: auto;
858
871
  font-size: 85%;
859
872
  line-height: 1.45;
860
- color: var(--color-fg-default);
861
- background-color: var(--color-canvas-subtle);
873
+ color: var(--fgColor-default);
874
+ background-color: var(--bgColor-muted);
862
875
  border-radius: 6px;
863
876
  }
864
877
 
@@ -888,7 +901,7 @@
888
901
  .markdown-body .csv-data .blob-num {
889
902
  padding: 10px 8px 9px;
890
903
  text-align: right;
891
- background: var(--color-canvas-default);
904
+ background: var(--bgColor-default);
892
905
  border: 0;
893
906
  }
894
907
 
@@ -898,7 +911,7 @@
898
911
 
899
912
  .markdown-body .csv-data th {
900
913
  font-weight: var(--base-text-weight-semibold, 600);
901
- background: var(--color-canvas-subtle);
914
+ background: var(--bgColor-muted);
902
915
  border-top: 0;
903
916
  }
904
917
 
@@ -912,8 +925,8 @@
912
925
 
913
926
  .markdown-body .footnotes {
914
927
  font-size: 12px;
915
- color: var(--color-fg-muted);
916
- border-top: 1px solid var(--color-border-default);
928
+ color: var(--fgColor-muted);
929
+ border-top: 1px solid var(--borderColor-default);
917
930
  }
918
931
 
919
932
  .markdown-body .footnotes ol {
@@ -938,12 +951,12 @@
938
951
  left: -24px;
939
952
  pointer-events: none;
940
953
  content: "";
941
- border: 2px solid var(--color-accent-emphasis);
954
+ border: 2px solid var(--borderColor-accent-emphasis);
942
955
  border-radius: 6px;
943
956
  }
944
957
 
945
958
  .markdown-body .footnotes li:target {
946
- color: var(--color-fg-default);
959
+ color: var(--fgColor-default);
947
960
  }
948
961
 
949
962
  .markdown-body .footnotes .data-footnote-backref g-emoji {
@@ -1070,6 +1083,20 @@
1070
1083
  color: var(--color-prettylights-syntax-constant-other-reference-link);
1071
1084
  }
1072
1085
 
1086
+ .markdown-body [role=button]:focus:not(:focus-visible),
1087
+ .markdown-body [role=tabpanel][tabindex="0"]:focus:not(:focus-visible),
1088
+ .markdown-body button:focus:not(:focus-visible),
1089
+ .markdown-body summary:focus:not(:focus-visible),
1090
+ .markdown-body a:focus:not(:focus-visible) {
1091
+ outline: none;
1092
+ box-shadow: none;
1093
+ }
1094
+
1095
+ .markdown-body [tabindex="0"]:focus:not(:focus-visible),
1096
+ .markdown-body details-dialog:focus:not(:focus-visible) {
1097
+ outline: none;
1098
+ }
1099
+
1073
1100
  .markdown-body g-emoji {
1074
1101
  display: inline-block;
1075
1102
  min-width: 1ch;
@@ -1099,7 +1126,7 @@
1099
1126
  }
1100
1127
 
1101
1128
  .markdown-body .task-list-item+.task-list-item {
1102
- margin-top: 4px;
1129
+ margin-top: var(--base-size-4);
1103
1130
  }
1104
1131
 
1105
1132
  .markdown-body .task-list-item .handle {
@@ -1134,9 +1161,9 @@
1134
1161
 
1135
1162
  .markdown-body .markdown-alert {
1136
1163
  padding: var(--base-size-8) var(--base-size-16);
1137
- margin-bottom: 16px;
1164
+ margin-bottom: var(--base-size-16);
1138
1165
  color: inherit;
1139
- border-left: .25em solid var(--color-border-default);
1166
+ border-left: .25em solid var(--borderColor-default);
1140
1167
  }
1141
1168
 
1142
1169
  .markdown-body .markdown-alert>:first-child {
@@ -1155,41 +1182,45 @@
1155
1182
  }
1156
1183
 
1157
1184
  .markdown-body .markdown-alert.markdown-alert-note {
1158
- border-left-color: var(--color-accent-emphasis);
1185
+ border-left-color: var(--borderColor-accent-emphasis);
1159
1186
  }
1160
1187
 
1161
1188
  .markdown-body .markdown-alert.markdown-alert-note .markdown-alert-title {
1162
- color: var(--color-accent-fg);
1189
+ color: var(--fgColor-accent);
1163
1190
  }
1164
1191
 
1165
1192
  .markdown-body .markdown-alert.markdown-alert-important {
1166
- border-left-color: var(--color-done-emphasis);
1193
+ border-left-color: var(--borderColor-done-emphasis);
1167
1194
  }
1168
1195
 
1169
1196
  .markdown-body .markdown-alert.markdown-alert-important .markdown-alert-title {
1170
- color: var(--color-done-fg);
1197
+ color: var(--fgColor-done);
1171
1198
  }
1172
1199
 
1173
1200
  .markdown-body .markdown-alert.markdown-alert-warning {
1174
- border-left-color: var(--color-attention-emphasis);
1201
+ border-left-color: var(--borderColor-attention-emphasis);
1175
1202
  }
1176
1203
 
1177
1204
  .markdown-body .markdown-alert.markdown-alert-warning .markdown-alert-title {
1178
- color: var(--color-attention-fg);
1205
+ color: var(--fgColor-attention);
1179
1206
  }
1180
1207
 
1181
1208
  .markdown-body .markdown-alert.markdown-alert-tip {
1182
- border-left-color: var(--color-success-emphasis);
1209
+ border-left-color: var(--borderColor-success-emphasis);
1183
1210
  }
1184
1211
 
1185
1212
  .markdown-body .markdown-alert.markdown-alert-tip .markdown-alert-title {
1186
- color: var(--color-success-fg);
1213
+ color: var(--fgColor-success);
1187
1214
  }
1188
1215
 
1189
1216
  .markdown-body .markdown-alert.markdown-alert-caution {
1190
- border-left-color: var(--color-danger-emphasis);
1217
+ border-left-color: var(--borderColor-danger-emphasis);
1191
1218
  }
1192
1219
 
1193
1220
  .markdown-body .markdown-alert.markdown-alert-caution .markdown-alert-title {
1194
- color: var(--color-danger-fg);
1221
+ color: var(--fgColor-danger);
1222
+ }
1223
+
1224
+ .markdown-body>*:first-child>.heading-element:first-child {
1225
+ margin-top: 0 !important;
1195
1226
  }