takumi-markdown 1.0.0 → 1.0.3
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.
- package/README.md +63 -14
- package/dist/components/MarkdownRenderer.d.ts +0 -2
- package/dist/takumi-markdown.cjs +28 -28
- package/dist/takumi-markdown.css +360 -1
- package/dist/takumi-markdown.mjs +6446 -4312
- package/package.json +12 -4
- package/dist/takumi-markdown.cjs.map +0 -1
- package/dist/takumi-markdown.mjs.map +0 -1
- package/dist/vite.svg +0 -1
package/dist/takumi-markdown.css
CHANGED
|
@@ -1 +1,360 @@
|
|
|
1
|
-
|
|
1
|
+
/**
|
|
2
|
+
* Takumi Markdown - Library CSS
|
|
3
|
+
* Include this in your project: import 'takumi-markdown/styles.css'
|
|
4
|
+
*/
|
|
5
|
+
|
|
6
|
+
/* === Typography Variables === */
|
|
7
|
+
@import url('https://fonts.googleapis.com/css2?family=BIZ+UDGothic:wght@400;700&family=BIZ+UDPGothic:wght@400;700&family=Manrope:wght@400;500;600&family=Fira+Code:wght@400;500&display=swap');
|
|
8
|
+
|
|
9
|
+
:root {
|
|
10
|
+
/* Typography */
|
|
11
|
+
--font-sans: 'Manrope', 'BIZ UDPGothic', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Yu Gothic Medium', 'Yu Gothic', sans-serif;
|
|
12
|
+
--font-mono: 'Fira Code', 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
|
|
13
|
+
|
|
14
|
+
--text-base: 16px;
|
|
15
|
+
--line-height-base: 1.65;
|
|
16
|
+
--line-height-heading: 1.25;
|
|
17
|
+
|
|
18
|
+
/* Colors - High Contrast "Crisp" Theme */
|
|
19
|
+
--c-bg: #ffffff;
|
|
20
|
+
--c-text: #1a1a1a;
|
|
21
|
+
--c-text-muted: #595959;
|
|
22
|
+
--c-accent: #0969da;
|
|
23
|
+
--c-border: #e1e4e8;
|
|
24
|
+
--c-code-bg: #f6f8fa;
|
|
25
|
+
|
|
26
|
+
/* Layout */
|
|
27
|
+
--max-width: 700px;
|
|
28
|
+
--spacing-unit: 8px;
|
|
29
|
+
--radius-sm: 4px;
|
|
30
|
+
--radius-md: 8px;
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
/* === Frontmatter Block === */
|
|
34
|
+
.frontmatter-block {
|
|
35
|
+
margin-bottom: 1.5em;
|
|
36
|
+
border: 1px solid var(--c-border);
|
|
37
|
+
border-radius: var(--radius-md, 4px);
|
|
38
|
+
background-color: var(--c-code-bg);
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
.frontmatter-block summary {
|
|
42
|
+
padding: 0.5em 1em;
|
|
43
|
+
cursor: pointer;
|
|
44
|
+
font-size: 0.85em;
|
|
45
|
+
color: var(--c-text-muted);
|
|
46
|
+
user-select: none;
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
.frontmatter-block pre {
|
|
50
|
+
margin: 0;
|
|
51
|
+
border-top: 1px solid var(--c-border);
|
|
52
|
+
border-radius: 0;
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
/* === Ruby (Furigana) === */
|
|
56
|
+
.markdown-body ruby {
|
|
57
|
+
ruby-position: over;
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
.markdown-body ruby rt {
|
|
61
|
+
font-size: 0.5em;
|
|
62
|
+
color: var(--c-text-muted, #666);
|
|
63
|
+
font-weight: 400;
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
/* === Main Typography === */
|
|
67
|
+
.markdown-body {
|
|
68
|
+
width: 100%;
|
|
69
|
+
max-width: var(--max-width);
|
|
70
|
+
margin: 0 auto;
|
|
71
|
+
padding: 0 var(--spacing-unit);
|
|
72
|
+
color: var(--c-text);
|
|
73
|
+
font-family: var(--font-sans);
|
|
74
|
+
font-feature-settings: "palt";
|
|
75
|
+
font-kerning: normal;
|
|
76
|
+
text-rendering: optimizeLegibility;
|
|
77
|
+
-webkit-font-smoothing: antialiased;
|
|
78
|
+
font-weight: 400;
|
|
79
|
+
-webkit-text-stroke-width: 0.15px;
|
|
80
|
+
-webkit-text-stroke-color: #000000;
|
|
81
|
+
color: #000000;
|
|
82
|
+
letter-spacing: 0.02em;
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
/* Headings */
|
|
86
|
+
.markdown-body h1,
|
|
87
|
+
.markdown-body h2,
|
|
88
|
+
.markdown-body h3,
|
|
89
|
+
.markdown-body h4,
|
|
90
|
+
.markdown-body h5,
|
|
91
|
+
.markdown-body h6 {
|
|
92
|
+
margin-top: 2em;
|
|
93
|
+
margin-bottom: 1em;
|
|
94
|
+
font-weight: 700;
|
|
95
|
+
line-height: var(--line-height-heading);
|
|
96
|
+
letter-spacing: 0.02em;
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
.markdown-body h1 {
|
|
100
|
+
font-size: 2.25em;
|
|
101
|
+
border-bottom: 1px solid var(--c-border);
|
|
102
|
+
padding-bottom: 0.3em;
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
.markdown-body h2 {
|
|
106
|
+
font-size: 1.75em;
|
|
107
|
+
border-bottom: 1px solid var(--c-border);
|
|
108
|
+
padding-bottom: 0.3em;
|
|
109
|
+
}
|
|
110
|
+
|
|
111
|
+
.markdown-body h3 {
|
|
112
|
+
font-size: 1.5em;
|
|
113
|
+
}
|
|
114
|
+
|
|
115
|
+
.markdown-body h4 {
|
|
116
|
+
font-size: 1.25em;
|
|
117
|
+
}
|
|
118
|
+
|
|
119
|
+
/* Text */
|
|
120
|
+
.markdown-body p {
|
|
121
|
+
margin-top: 0;
|
|
122
|
+
margin-bottom: 1.5em;
|
|
123
|
+
text-align: justify;
|
|
124
|
+
}
|
|
125
|
+
|
|
126
|
+
.markdown-body>*:first-child {
|
|
127
|
+
margin-top: 0 !important;
|
|
128
|
+
}
|
|
129
|
+
|
|
130
|
+
/* Blockquotes */
|
|
131
|
+
.markdown-body blockquote {
|
|
132
|
+
margin: 1.5em 0;
|
|
133
|
+
padding: 0.5em 1em;
|
|
134
|
+
color: var(--c-text-muted);
|
|
135
|
+
border-left: 0.25em solid var(--c-border);
|
|
136
|
+
background-color: transparent;
|
|
137
|
+
}
|
|
138
|
+
|
|
139
|
+
.markdown-body blockquote p:last-child {
|
|
140
|
+
margin-bottom: 0;
|
|
141
|
+
}
|
|
142
|
+
|
|
143
|
+
/* Lists */
|
|
144
|
+
.markdown-body ul,
|
|
145
|
+
.markdown-body ol {
|
|
146
|
+
padding-left: 2em;
|
|
147
|
+
margin-bottom: 1.5em;
|
|
148
|
+
}
|
|
149
|
+
|
|
150
|
+
.markdown-body li {
|
|
151
|
+
margin-bottom: 0.5em;
|
|
152
|
+
}
|
|
153
|
+
|
|
154
|
+
.markdown-body li>p {
|
|
155
|
+
margin-bottom: 0.5em;
|
|
156
|
+
}
|
|
157
|
+
|
|
158
|
+
/* Code */
|
|
159
|
+
.markdown-body pre {
|
|
160
|
+
padding: 1rem;
|
|
161
|
+
overflow: auto;
|
|
162
|
+
font-size: 0.9em;
|
|
163
|
+
line-height: 1.5;
|
|
164
|
+
background-color: var(--c-code-bg);
|
|
165
|
+
border-radius: var(--radius-md);
|
|
166
|
+
margin-bottom: 1.5em;
|
|
167
|
+
}
|
|
168
|
+
|
|
169
|
+
.markdown-body code {
|
|
170
|
+
padding: 0.2em 0.4em;
|
|
171
|
+
margin: 0;
|
|
172
|
+
font-size: 0.9em;
|
|
173
|
+
font-family: var(--font-mono);
|
|
174
|
+
background-color: var(--c-code-bg);
|
|
175
|
+
border-radius: var(--radius-sm);
|
|
176
|
+
}
|
|
177
|
+
|
|
178
|
+
.markdown-body pre code {
|
|
179
|
+
padding: 0;
|
|
180
|
+
margin: 0;
|
|
181
|
+
font-size: 100%;
|
|
182
|
+
word-break: normal;
|
|
183
|
+
white-space: pre;
|
|
184
|
+
background: transparent;
|
|
185
|
+
border: 0;
|
|
186
|
+
}
|
|
187
|
+
|
|
188
|
+
/* Tables */
|
|
189
|
+
.markdown-body table {
|
|
190
|
+
display: block;
|
|
191
|
+
width: 100%;
|
|
192
|
+
width: max-content;
|
|
193
|
+
max-width: 100%;
|
|
194
|
+
overflow: auto;
|
|
195
|
+
border-spacing: 0;
|
|
196
|
+
border-collapse: collapse;
|
|
197
|
+
margin-bottom: 1.5em;
|
|
198
|
+
}
|
|
199
|
+
|
|
200
|
+
.markdown-body tr {
|
|
201
|
+
background-color: var(--c-bg);
|
|
202
|
+
border-top: 1px solid var(--c-border);
|
|
203
|
+
}
|
|
204
|
+
|
|
205
|
+
.markdown-body tr:nth-child(2n) {
|
|
206
|
+
background-color: var(--c-code-bg);
|
|
207
|
+
}
|
|
208
|
+
|
|
209
|
+
.markdown-body th,
|
|
210
|
+
.markdown-body td {
|
|
211
|
+
padding: 0.8em 1em;
|
|
212
|
+
border: 1px solid var(--c-border);
|
|
213
|
+
}
|
|
214
|
+
|
|
215
|
+
.markdown-body th {
|
|
216
|
+
font-weight: 600;
|
|
217
|
+
background-color: var(--c-code-bg);
|
|
218
|
+
}
|
|
219
|
+
|
|
220
|
+
/* Links */
|
|
221
|
+
.markdown-body a {
|
|
222
|
+
color: var(--c-accent);
|
|
223
|
+
text-decoration: none;
|
|
224
|
+
}
|
|
225
|
+
|
|
226
|
+
.markdown-body a:hover {
|
|
227
|
+
text-decoration: underline;
|
|
228
|
+
}
|
|
229
|
+
|
|
230
|
+
/* Horizontal Rule */
|
|
231
|
+
.markdown-body hr {
|
|
232
|
+
height: 0.25em;
|
|
233
|
+
padding: 0;
|
|
234
|
+
margin: 2em 0;
|
|
235
|
+
background-color: var(--c-border);
|
|
236
|
+
border: 0;
|
|
237
|
+
}
|
|
238
|
+
|
|
239
|
+
/* === Syntax Highlighting (highlight.js GitHub theme) === */
|
|
240
|
+
/*!
|
|
241
|
+
Theme: GitHub
|
|
242
|
+
Description: Light theme as seen on github.com
|
|
243
|
+
Author: github.com
|
|
244
|
+
Maintainer: @Hirse
|
|
245
|
+
Updated: 2021-05-15
|
|
246
|
+
|
|
247
|
+
Outdated base version: https://github.com/primer/github-syntax-light
|
|
248
|
+
Current colors taken from GitHub's CSS
|
|
249
|
+
License: BSD-3-Clause
|
|
250
|
+
*/
|
|
251
|
+
pre code.hljs {
|
|
252
|
+
display: block;
|
|
253
|
+
overflow-x: auto;
|
|
254
|
+
padding: 1em;
|
|
255
|
+
}
|
|
256
|
+
|
|
257
|
+
code.hljs {
|
|
258
|
+
padding: 3px 5px;
|
|
259
|
+
}
|
|
260
|
+
|
|
261
|
+
.hljs {
|
|
262
|
+
color: #24292e;
|
|
263
|
+
background: #ffffff;
|
|
264
|
+
}
|
|
265
|
+
|
|
266
|
+
.hljs-doctag,
|
|
267
|
+
.hljs-keyword,
|
|
268
|
+
.hljs-meta .hljs-keyword,
|
|
269
|
+
.hljs-template-tag,
|
|
270
|
+
.hljs-template-variable,
|
|
271
|
+
.hljs-type,
|
|
272
|
+
.hljs-variable.language_ {
|
|
273
|
+
color: #d73a49;
|
|
274
|
+
}
|
|
275
|
+
|
|
276
|
+
.hljs-title,
|
|
277
|
+
.hljs-title.class_,
|
|
278
|
+
.hljs-title.class_.inherited__,
|
|
279
|
+
.hljs-title.function_ {
|
|
280
|
+
color: #6f42c1;
|
|
281
|
+
}
|
|
282
|
+
|
|
283
|
+
.hljs-attr,
|
|
284
|
+
.hljs-attribute,
|
|
285
|
+
.hljs-literal,
|
|
286
|
+
.hljs-meta,
|
|
287
|
+
.hljs-number,
|
|
288
|
+
.hljs-operator,
|
|
289
|
+
.hljs-variable,
|
|
290
|
+
.hljs-selector-attr,
|
|
291
|
+
.hljs-selector-class,
|
|
292
|
+
.hljs-selector-id {
|
|
293
|
+
color: #005cc5;
|
|
294
|
+
}
|
|
295
|
+
|
|
296
|
+
.hljs-regexp,
|
|
297
|
+
.hljs-string,
|
|
298
|
+
.hljs-meta .hljs-string {
|
|
299
|
+
color: #032f62;
|
|
300
|
+
}
|
|
301
|
+
|
|
302
|
+
.hljs-built_in,
|
|
303
|
+
.hljs-symbol {
|
|
304
|
+
color: #e36209;
|
|
305
|
+
}
|
|
306
|
+
|
|
307
|
+
.hljs-comment,
|
|
308
|
+
.hljs-code,
|
|
309
|
+
.hljs-formula {
|
|
310
|
+
color: #6a737d;
|
|
311
|
+
}
|
|
312
|
+
|
|
313
|
+
.hljs-name,
|
|
314
|
+
.hljs-quote,
|
|
315
|
+
.hljs-selector-tag,
|
|
316
|
+
.hljs-selector-pseudo {
|
|
317
|
+
color: #22863a;
|
|
318
|
+
}
|
|
319
|
+
|
|
320
|
+
.hljs-subst {
|
|
321
|
+
color: #24292e;
|
|
322
|
+
}
|
|
323
|
+
|
|
324
|
+
.hljs-section {
|
|
325
|
+
color: #005cc5;
|
|
326
|
+
font-weight: bold;
|
|
327
|
+
}
|
|
328
|
+
|
|
329
|
+
.hljs-bullet {
|
|
330
|
+
color: #735c0f;
|
|
331
|
+
}
|
|
332
|
+
|
|
333
|
+
.hljs-emphasis {
|
|
334
|
+
color: #24292e;
|
|
335
|
+
font-style: italic;
|
|
336
|
+
}
|
|
337
|
+
|
|
338
|
+
.hljs-strong {
|
|
339
|
+
color: #24292e;
|
|
340
|
+
font-weight: bold;
|
|
341
|
+
}
|
|
342
|
+
|
|
343
|
+
.hljs-addition {
|
|
344
|
+
color: #22863a;
|
|
345
|
+
background-color: #f0fff4;
|
|
346
|
+
}
|
|
347
|
+
|
|
348
|
+
.hljs-deletion {
|
|
349
|
+
color: #b31d28;
|
|
350
|
+
background-color: #ffeef0;
|
|
351
|
+
}
|
|
352
|
+
|
|
353
|
+
.hljs-char.escape_,
|
|
354
|
+
.hljs-link,
|
|
355
|
+
.hljs-params,
|
|
356
|
+
.hljs-property,
|
|
357
|
+
.hljs-punctuation,
|
|
358
|
+
.hljs-tag {
|
|
359
|
+
/* purposely ignored */
|
|
360
|
+
}
|