-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
98 lines (90 loc) · 22.4 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
<!DOCTYPE html> <html><!--
Page saved with SingleFile
url: http://localhost:3000/
saved date: Thu Apr 14 2022 22:11:55 GMT+0300 (Eastern European Summer Time)
--><head><meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>README.md</title>
<style>html,body{margin:0;padding:0}body{--light:#eee;--dark:#222;--color:var(--dark);--background:var(--light);background:var(--background)}@media (prefers-color-scheme:dark){body:not(.light){--color:var(--light);--background:var(--dark)}}</style>
<style type="text/css">@media (prefers-color-scheme:dark){.markdown-body{color-scheme:dark;--color-prettylights-syntax-comment:#8b949e;--color-prettylights-syntax-constant:#79c0ff;--color-prettylights-syntax-entity:#d2a8ff;--color-prettylights-syntax-storage-modifier-import:#c9d1d9;--color-prettylights-syntax-entity-tag:#7ee787;--color-prettylights-syntax-keyword:#ff7b72;--color-prettylights-syntax-string:#a5d6ff;--color-prettylights-syntax-variable:#ffa657;--color-prettylights-syntax-brackethighlighter-unmatched:#f85149;--color-prettylights-syntax-invalid-illegal-text:#f0f6fc;--color-prettylights-syntax-invalid-illegal-bg:#8e1519;--color-prettylights-syntax-carriage-return-text:#f0f6fc;--color-prettylights-syntax-carriage-return-bg:#b62324;--color-prettylights-syntax-string-regexp:#7ee787;--color-prettylights-syntax-markup-list:#f2cc60;--color-prettylights-syntax-markup-heading:#1f6feb;--color-prettylights-syntax-markup-italic:#c9d1d9;--color-prettylights-syntax-markup-bold:#c9d1d9;--color-prettylights-syntax-markup-deleted-text:#ffdcd7;--color-prettylights-syntax-markup-deleted-bg:#67060c;--color-prettylights-syntax-markup-inserted-text:#aff5b4;--color-prettylights-syntax-markup-inserted-bg:#033a16;--color-prettylights-syntax-markup-changed-text:#ffdfb6;--color-prettylights-syntax-markup-changed-bg:#5a1e02;--color-prettylights-syntax-markup-ignored-text:#c9d1d9;--color-prettylights-syntax-markup-ignored-bg:#1158c7;--color-prettylights-syntax-meta-diff-range:#d2a8ff;--color-prettylights-syntax-brackethighlighter-angle:#8b949e;--color-prettylights-syntax-sublimelinter-gutter-mark:#484f58;--color-prettylights-syntax-constant-other-reference-link:#a5d6ff;--color-fg-default:#c9d1d9;--color-fg-muted:#8b949e;--color-fg-subtle:#484f58;--color-canvas-default:#0d1117;--color-canvas-subtle:#161b22;--color-border-default:#30363d;--color-border-muted:#21262d;--color-neutral-muted:rgba(110,118,129,0.4);--color-accent-fg:#58a6ff;--color-accent-emphasis:#1f6feb;--color-attention-subtle:rgba(187,128,9,0.15);--color-danger-fg:#f85149}}@media (prefers-color-scheme:light){.markdown-body{color-scheme:light;--color-prettylights-syntax-comment:#6e7781;--color-prettylights-syntax-constant:#0550ae;--color-prettylights-syntax-entity:#8250df;--color-prettylights-syntax-storage-modifier-import:#24292f;--color-prettylights-syntax-entity-tag:#116329;--color-prettylights-syntax-keyword:#cf222e;--color-prettylights-syntax-string:#0a3069;--color-prettylights-syntax-variable:#953800;--color-prettylights-syntax-brackethighlighter-unmatched:#82071e;--color-prettylights-syntax-invalid-illegal-text:#f6f8fa;--color-prettylights-syntax-invalid-illegal-bg:#82071e;--color-prettylights-syntax-carriage-return-text:#f6f8fa;--color-prettylights-syntax-carriage-return-bg:#cf222e;--color-prettylights-syntax-string-regexp:#116329;--color-prettylights-syntax-markup-list:#3b2300;--color-prettylights-syntax-markup-heading:#0550ae;--color-prettylights-syntax-markup-italic:#24292f;--color-prettylights-syntax-markup-bold:#24292f;--color-prettylights-syntax-markup-deleted-text:#82071e;--color-prettylights-syntax-markup-deleted-bg:#FFEBE9;--color-prettylights-syntax-markup-inserted-text:#116329;--color-prettylights-syntax-markup-inserted-bg:#dafbe1;--color-prettylights-syntax-markup-changed-text:#953800;--color-prettylights-syntax-markup-changed-bg:#ffd8b5;--color-prettylights-syntax-markup-ignored-text:#eaeef2;--color-prettylights-syntax-markup-ignored-bg:#0550ae;--color-prettylights-syntax-meta-diff-range:#8250df;--color-prettylights-syntax-brackethighlighter-angle:#57606a;--color-prettylights-syntax-sublimelinter-gutter-mark:#8c959f;--color-prettylights-syntax-constant-other-reference-link:#0a3069;--color-fg-default:#24292f;--color-fg-muted:#57606a;--color-fg-subtle:#6e7781;--color-canvas-default:#ffffff;--color-canvas-subtle:#f6f8fa;--color-border-default:#d0d7de;--color-border-muted:hsla(210,18%,87%,1);--color-neutral-muted:rgba(175,184,193,0.2);--color-accent-fg:#0969da;--color-accent-emphasis:#0969da;--color-attention-subtle:#fff8c5;--color-danger-fg:#cf222e}}.markdown-body{-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;color:var(--color-fg-default);background-color:var(--color-canvas-default);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji";font-size:16px;line-height:1.5;word-wrap:break-word}.markdown-body details{display:block}.markdown-body summary{display:list-item}.markdown-body a{background-color:transparent;color:var(--color-accent-fg);text-decoration:none}.markdown-body a:active,.markdown-body a:hover{outline-width:0}.markdown-body strong{font-weight:600}.markdown-body h1{margin:.67em 0;padding-bottom:.3em;font-size:2em;border-bottom:1px solid var(--color-border-muted)}.markdown-body img{border-style:none;max-width:100%;box-sizing:content-box;background-color:var(--color-canvas-default)}.markdown-body ::-webkit-input-placeholder{color:inherit;opacity:.54}.markdown-body ::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}.markdown-body a:hover{text-decoration:underline}.markdown-body table{border-spacing:0;border-collapse:collapse;display:block;width:max-content;max-width:100%;overflow:auto}.markdown-body details summary{cursor:pointer}.markdown-body details:not([open])>*:not(summary){display:none!important}.markdown-body h1,.markdown-body h2,.markdown-body h4{margin-top:24px;margin-bottom:16px;font-weight:600;line-height:1.25}.markdown-body h2{font-weight:600;padding-bottom:.3em;font-size:1.5em;border-bottom:1px solid var(--color-border-muted)}.markdown-body h4{font-weight:600;font-size:1em}.markdown-body ul{padding-left:2em}.markdown-body code{font-family:ui-monospace,SFMono-Regular,SF Mono,Menlo,Consolas,Liberation Mono,monospace}.markdown-body pre{font-family:ui-monospace,SFMono-Regular,SF Mono,Menlo,Consolas,Liberation Mono,monospace;word-wrap:normal}.markdown-body ::placeholder{color:var(--color-fg-subtle);opacity:1}.markdown-body::before{display:table;content:""}.markdown-body::after{display:table;clear:both;content:""}.markdown-body>*:first-child{margin-top:0!important}.markdown-body>*:last-child{margin-bottom:0!important}.markdown-body a:not([href]){color:inherit;text-decoration:none}.markdown-body p,.markdown-body ul,.markdown-body table,.markdown-body pre,.markdown-body details{margin-top:0;margin-bottom:16px}.markdown-body h4 code{padding:0 .2em;font-size:inherit}.markdown-body ul ul{margin-top:0;margin-bottom:0}.markdown-body li+li{margin-top:.25em}.markdown-body table td{padding:6px 13px;border:1px solid var(--color-border-default)}.markdown-body table tr{background-color:var(--color-canvas-default);border-top:1px solid var(--color-border-muted)}.markdown-body table tr:nth-child(2n){background-color:var(--color-canvas-subtle)}.markdown-body code{padding:.2em .4em;margin:0;font-size:85%;background-color:var(--color-neutral-muted);border-radius:6px}.markdown-body pre code{font-size:100%}.markdown-body pre>code{word-break:normal;white-space:pre;background:transparent}.markdown-body pre{padding:16px;overflow:auto;font-size:85%;line-height:1.45;background-color:var(--color-canvas-subtle);border-radius:6px}.markdown-body pre code{display:inline;padding:0;margin:0;overflow:visible;line-height:inherit;word-wrap:normal;background-color:transparent;border:0}.markdown-body ::-webkit-calendar-picker-indicator{filter:invert(50%)}</style><link rel="icon" href="data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='50' cy='47.2' r='34'%0Afill='transparent' stroke='%23fff' stroke-width='7.5' /%3E%3C/svg%3E" type="image/svg+xml"><link rel="canonical" href="http://localhost:3000/"><meta http-equiv="content-security-policy" content="default-src 'none'; font-src 'self' data:; img-src 'self' data:; style-src 'unsafe-inline'; media-src 'self' data:; script-src 'unsafe-inline' data:;"></head>
<body class="markdown-body" style="max-width:830px;margin:0px auto"><h1>
code-edit <a href="https://npmjs.org/package/code-edit"><img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iODAiIGhlaWdodD0iMjAiIHJvbGU9ImltZyIgYXJpYS1sYWJlbD0ibnBtOiB2MS4wLjAiPjx0aXRsZT5ucG06IHYxLjAuMDwvdGl0bGU+PGxpbmVhckdyYWRpZW50IGlkPSJzIiB4Mj0iMCIgeTI9IjEwMCUiPjxzdG9wIG9mZnNldD0iMCIgc3RvcC1jb2xvcj0iI2JiYiIgc3RvcC1vcGFjaXR5PSIuMSIvPjxzdG9wIG9mZnNldD0iMSIgc3RvcC1vcGFjaXR5PSIuMSIvPjwvbGluZWFyR3JhZGllbnQ+PGNsaXBQYXRoIGlkPSJyIj48cmVjdCB3aWR0aD0iODAiIGhlaWdodD0iMjAiIHJ4PSIzIiBmaWxsPSIjZmZmIi8+PC9jbGlwUGF0aD48ZyBjbGlwLXBhdGg9InVybCgjcikiPjxyZWN0IHdpZHRoPSIzNSIgaGVpZ2h0PSIyMCIgZmlsbD0iIzAwMCIvPjxyZWN0IHg9IjM1IiB3aWR0aD0iNDUiIGhlaWdodD0iMjAiIGZpbGw9IiNmMDAiLz48cmVjdCB3aWR0aD0iODAiIGhlaWdodD0iMjAiIGZpbGw9InVybCgjcykiLz48L2c+PGcgZmlsbD0iI2ZmZiIgdGV4dC1hbmNob3I9Im1pZGRsZSIgZm9udC1mYW1pbHk9IlZlcmRhbmEsR2VuZXZhLERlamFWdSBTYW5zLHNhbnMtc2VyaWYiIHRleHQtcmVuZGVyaW5nPSJnZW9tZXRyaWNQcmVjaXNpb24iIGZvbnQtc2l6ZT0iMTEwIj48dGV4dCBhcmlhLWhpZGRlbj0idHJ1ZSIgeD0iMTg1IiB5PSIxNTAiIGZpbGw9IiMwMTAxMDEiIGZpbGwtb3BhY2l0eT0iLjMiIHRyYW5zZm9ybT0ic2NhbGUoLjEpIiB0ZXh0TGVuZ3RoPSIyNTAiPm5wbTwvdGV4dD48dGV4dCB4PSIxODUiIHk9IjE0MCIgdHJhbnNmb3JtPSJzY2FsZSguMSkiIGZpbGw9IiNmZmYiIHRleHRMZW5ndGg9IjI1MCI+bnBtPC90ZXh0Pjx0ZXh0IGFyaWEtaGlkZGVuPSJ0cnVlIiB4PSI1NjUiIHk9IjE1MCIgZmlsbD0iIzAxMDEwMSIgZmlsbC1vcGFjaXR5PSIuMyIgdHJhbnNmb3JtPSJzY2FsZSguMSkiIHRleHRMZW5ndGg9IjM1MCI+djEuMC4wPC90ZXh0Pjx0ZXh0IHg9IjU2NSIgeT0iMTQwIiB0cmFuc2Zvcm09InNjYWxlKC4xKSIgZmlsbD0iI2ZmZiIgdGV4dExlbmd0aD0iMzUwIj52MS4wLjA8L3RleHQ+PC9nPjwvc3ZnPg=="></a> <a href="http://localhost:3000/src"><img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iNTYiIGhlaWdodD0iMjAiIHJvbGU9ImltZyIgYXJpYS1sYWJlbD0ibG9jOiAxNzYiPjx0aXRsZT5sb2M6IDE3NjwvdGl0bGU+PGxpbmVhckdyYWRpZW50IGlkPSJzIiB4Mj0iMCIgeTI9IjEwMCUiPjxzdG9wIG9mZnNldD0iMCIgc3RvcC1jb2xvcj0iI2JiYiIgc3RvcC1vcGFjaXR5PSIuMSIvPjxzdG9wIG9mZnNldD0iMSIgc3RvcC1vcGFjaXR5PSIuMSIvPjwvbGluZWFyR3JhZGllbnQ+PGNsaXBQYXRoIGlkPSJyIj48cmVjdCB3aWR0aD0iNTYiIGhlaWdodD0iMjAiIHJ4PSIzIiBmaWxsPSIjZmZmIi8+PC9jbGlwUGF0aD48ZyBjbGlwLXBhdGg9InVybCgjcikiPjxyZWN0IHdpZHRoPSIyNSIgaGVpZ2h0PSIyMCIgZmlsbD0iIzAwMCIvPjxyZWN0IHg9IjI1IiB3aWR0aD0iMzEiIGhlaWdodD0iMjAiIGZpbGw9IiNmZmYiLz48cmVjdCB3aWR0aD0iNTYiIGhlaWdodD0iMjAiIGZpbGw9InVybCgjcykiLz48L2c+PGcgZmlsbD0iI2ZmZiIgdGV4dC1hbmNob3I9Im1pZGRsZSIgZm9udC1mYW1pbHk9IlZlcmRhbmEsR2VuZXZhLERlamFWdSBTYW5zLHNhbnMtc2VyaWYiIHRleHQtcmVuZGVyaW5nPSJnZW9tZXRyaWNQcmVjaXNpb24iIGZvbnQtc2l6ZT0iMTEwIj48dGV4dCBhcmlhLWhpZGRlbj0idHJ1ZSIgeD0iMTM1IiB5PSIxNTAiIGZpbGw9IiMwMTAxMDEiIGZpbGwtb3BhY2l0eT0iLjMiIHRyYW5zZm9ybT0ic2NhbGUoLjEpIiB0ZXh0TGVuZ3RoPSIxNTAiPmxvYzwvdGV4dD48dGV4dCB4PSIxMzUiIHk9IjE0MCIgdHJhbnNmb3JtPSJzY2FsZSguMSkiIGZpbGw9IiNmZmYiIHRleHRMZW5ndGg9IjE1MCI+bG9jPC90ZXh0Pjx0ZXh0IGFyaWEtaGlkZGVuPSJ0cnVlIiB4PSIzOTUiIHk9IjE1MCIgZmlsbD0iI2NjYyIgZmlsbC1vcGFjaXR5PSIuMyIgdHJhbnNmb3JtPSJzY2FsZSguMSkiIHRleHRMZW5ndGg9IjIxMCI+MTc2PC90ZXh0Pjx0ZXh0IHg9IjM5NSIgeT0iMTQwIiB0cmFuc2Zvcm09InNjYWxlKC4xKSIgZmlsbD0iIzMzMyIgdGV4dExlbmd0aD0iMjEwIj4xNzY8L3RleHQ+PC9nPjwvc3ZnPg=="></a> <a href="https://cdn.jsdelivr.net/npm/code-edit@1.0.0/dist/code-edit.min.js"><img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iNzQiIGhlaWdodD0iMjAiIHJvbGU9ImltZyIgYXJpYS1sYWJlbD0iYnJvdGxpOiA3LjhLIj48dGl0bGU+YnJvdGxpOiA3LjhLPC90aXRsZT48bGluZWFyR3JhZGllbnQgaWQ9InMiIHgyPSIwIiB5Mj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIwIiBzdG9wLWNvbG9yPSIjYmJiIiBzdG9wLW9wYWNpdHk9Ii4xIi8+PHN0b3Agb2Zmc2V0PSIxIiBzdG9wLW9wYWNpdHk9Ii4xIi8+PC9saW5lYXJHcmFkaWVudD48Y2xpcFBhdGggaWQ9InIiPjxyZWN0IHdpZHRoPSI3NCIgaGVpZ2h0PSIyMCIgcng9IjMiIGZpbGw9IiNmZmYiLz48L2NsaXBQYXRoPjxnIGNsaXAtcGF0aD0idXJsKCNyKSI+PHJlY3Qgd2lkdGg9IjM5IiBoZWlnaHQ9IjIwIiBmaWxsPSIjMDAwIi8+PHJlY3QgeD0iMzkiIHdpZHRoPSIzNSIgaGVpZ2h0PSIyMCIgZmlsbD0iIzMzMyIvPjxyZWN0IHdpZHRoPSI3NCIgaGVpZ2h0PSIyMCIgZmlsbD0idXJsKCNzKSIvPjwvZz48ZyBmaWxsPSIjZmZmIiB0ZXh0LWFuY2hvcj0ibWlkZGxlIiBmb250LWZhbWlseT0iVmVyZGFuYSxHZW5ldmEsRGVqYVZ1IFNhbnMsc2Fucy1zZXJpZiIgdGV4dC1yZW5kZXJpbmc9Imdlb21ldHJpY1ByZWNpc2lvbiIgZm9udC1zaXplPSIxMTAiPjx0ZXh0IGFyaWEtaGlkZGVuPSJ0cnVlIiB4PSIyMDUiIHk9IjE1MCIgZmlsbD0iIzAxMDEwMSIgZmlsbC1vcGFjaXR5PSIuMyIgdHJhbnNmb3JtPSJzY2FsZSguMSkiIHRleHRMZW5ndGg9IjI5MCI+YnJvdGxpPC90ZXh0Pjx0ZXh0IHg9IjIwNSIgeT0iMTQwIiB0cmFuc2Zvcm09InNjYWxlKC4xKSIgZmlsbD0iI2ZmZiIgdGV4dExlbmd0aD0iMjkwIj5icm90bGk8L3RleHQ+PHRleHQgYXJpYS1oaWRkZW49InRydWUiIHg9IjU1NSIgeT0iMTUwIiBmaWxsPSIjMDEwMTAxIiBmaWxsLW9wYWNpdHk9Ii4zIiB0cmFuc2Zvcm09InNjYWxlKC4xKSIgdGV4dExlbmd0aD0iMjUwIj43LjhLPC90ZXh0Pjx0ZXh0IHg9IjU1NSIgeT0iMTQwIiB0cmFuc2Zvcm09InNjYWxlKC4xKSIgZmlsbD0iI2ZmZiIgdGV4dExlbmd0aD0iMjUwIj43LjhLPC90ZXh0PjwvZz48L3N2Zz4="></a> <a href="http://localhost:3000/LICENSE"><img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iNzgiIGhlaWdodD0iMjAiIHJvbGU9ImltZyIgYXJpYS1sYWJlbD0ibGljZW5zZTogTUlUIj48dGl0bGU+bGljZW5zZTogTUlUPC90aXRsZT48bGluZWFyR3JhZGllbnQgaWQ9InMiIHgyPSIwIiB5Mj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIwIiBzdG9wLWNvbG9yPSIjYmJiIiBzdG9wLW9wYWNpdHk9Ii4xIi8+PHN0b3Agb2Zmc2V0PSIxIiBzdG9wLW9wYWNpdHk9Ii4xIi8+PC9saW5lYXJHcmFkaWVudD48Y2xpcFBhdGggaWQ9InIiPjxyZWN0IHdpZHRoPSI3OCIgaGVpZ2h0PSIyMCIgcng9IjMiIGZpbGw9IiNmZmYiLz48L2NsaXBQYXRoPjxnIGNsaXAtcGF0aD0idXJsKCNyKSI+PHJlY3Qgd2lkdGg9IjQ3IiBoZWlnaHQ9IjIwIiBmaWxsPSIjMDAwIi8+PHJlY3QgeD0iNDciIHdpZHRoPSIzMSIgaGVpZ2h0PSIyMCIgZmlsbD0iI2YwYiIvPjxyZWN0IHdpZHRoPSI3OCIgaGVpZ2h0PSIyMCIgZmlsbD0idXJsKCNzKSIvPjwvZz48ZyBmaWxsPSIjZmZmIiB0ZXh0LWFuY2hvcj0ibWlkZGxlIiBmb250LWZhbWlseT0iVmVyZGFuYSxHZW5ldmEsRGVqYVZ1IFNhbnMsc2Fucy1zZXJpZiIgdGV4dC1yZW5kZXJpbmc9Imdlb21ldHJpY1ByZWNpc2lvbiIgZm9udC1zaXplPSIxMTAiPjx0ZXh0IGFyaWEtaGlkZGVuPSJ0cnVlIiB4PSIyNDUiIHk9IjE1MCIgZmlsbD0iIzAxMDEwMSIgZmlsbC1vcGFjaXR5PSIuMyIgdHJhbnNmb3JtPSJzY2FsZSguMSkiIHRleHRMZW5ndGg9IjM3MCI+bGljZW5zZTwvdGV4dD48dGV4dCB4PSIyNDUiIHk9IjE0MCIgdHJhbnNmb3JtPSJzY2FsZSguMSkiIGZpbGw9IiNmZmYiIHRleHRMZW5ndGg9IjM3MCI+bGljZW5zZTwvdGV4dD48dGV4dCBhcmlhLWhpZGRlbj0idHJ1ZSIgeD0iNjE1IiB5PSIxNTAiIGZpbGw9IiMwMTAxMDEiIGZpbGwtb3BhY2l0eT0iLjMiIHRyYW5zZm9ybT0ic2NhbGUoLjEpIiB0ZXh0TGVuZ3RoPSIyMTAiPk1JVDwvdGV4dD48dGV4dCB4PSI2MTUiIHk9IjE0MCIgdHJhbnNmb3JtPSJzY2FsZSguMSkiIGZpbGw9IiNmZmYiIHRleHRMZW5ndGg9IjIxMCI+TUlUPC90ZXh0PjwvZz48L3N2Zz4="></a>
</h1>
<p></p>
<p>Lightweight code editor Web Component with syntax highlighting</p>
<h4>
<table><tbody><tr><td title="Triple click to select and copy paste">
<code>npm i code-edit </code>
</td><td title="Triple click to select and copy paste">
<code>pnpm add code-edit </code>
</td><td title="Triple click to select and copy paste">
<code>yarn add code-edit</code>
</td></tr></tbody></table>
</h4>
<h2>Examples</h2>
<details id="example$web" title="web" open><summary><span><a href="#example$web">#</a></span> <code><strong>web</strong></code></summary> <ul> <details id="source$web" title="web source code"><summary><span><a href="#source$web">#</a></span> <code><strong>view source</strong></code></summary> <a href="http://localhost:3000/example/web.ts">example/web.ts</a> <p>
</p><pre><code class="language-ts">import 'code-syntax/themes/default.css'
import 'plenty-themes/laser.css'
import { CodeEditElement, languages } from 'code-edit'
languages.js = import('code-syntax/languages/js')
customElements.define('code-edit', CodeEditElement)
const style = document.createElement('style')
style.textContent = /*css*/ `
html,
body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
body {
background: #333;
}
pre {
color: var(--color);
background: var(--background);
}
code-edit {
margin: 15px;
padding: 15px;
resize: both;
}
`
document.head.appendChild(style)
document.body.innerHTML = /*html*/ `
<code-edit id="demo" autoresize autofocus language="js" theme="laser">export interface HTMLCodeEditElement {
value?: string
language?: string
syntax?: SyntaxDefinition | Promise&lt;{ default: SyntaxDefinition }&gt;
theme?: string
tabsize?: number
tabstyle?: 'tabs' | 'spaces'
comments?: string
}</code-edit>
`
</code></pre>
<p></p>
</details></ul></details>
<h2>API</h2>
<p> </p><details id="CodeEditElement$1" title="Class" open><summary><span><a href="#CodeEditElement$1">#</a></span> <code><strong>CodeEditElement</strong></code> – CodeEdit custom element</summary> <a href="http://localhost:3000/src/code-edit.tsx#L74">src/code-edit.tsx#L74</a> <ul> <p>
</p><pre><code class="language-js">import { CodeEditElement } from 'code-edit'
customElements.define('code-edit', CodeEditElement)
</code></pre>
<pre><code class="language-html"><code-edit autofocus autoresize language="js" theme="deep"> ... </code-edit>
</code></pre>
<p></p>
<p> </p><details id="constructor$7" title="Constructor"><summary><span><a href="#constructor$7">#</a></span> <code><strong>constructor</strong></code><em>()</em> </summary> <ul> <p> </p><details id="new CodeEditElement$8" title="ConstructorSignature"><summary><span><a href="#new%20CodeEditElement$8">#</a></span> <code><strong>new CodeEditElement</strong></code><em>()</em> </summary> <ul><p><a href="#CodeEditElement$1">CodeEditElement</a></p> </ul></details><p></p> </ul></details><details id="autoFocus$14" title="Property"><summary><span><a href="#autoFocus$14">#</a></span> <code><strong>autoFocus</strong></code> <span><span> = </span> <code>false</code></span> – Autofocus to the element when page loads</summary> <a href="http://localhost:3000/src/code-edit.tsx#L83">src/code-edit.tsx#L83</a> <ul><p>boolean</p> </ul></details><details id="autoResize$15" title="Property"><summary><span><a href="#autoResize$15">#</a></span> <code><strong>autoResize</strong></code> <span><span> = </span> <code>false</code></span> – Whether to autoresize to the height of the contents</summary> <a href="http://localhost:3000/src/code-edit.tsx#L85">src/code-edit.tsx#L85</a> <ul><p>boolean</p> </ul></details><details id="comments$20" title="Property"><summary><span><a href="#comments$20">#</a></span> <code><strong>comments</strong></code> <span><span> = </span> <code>'// /* */'</code></span> – Comment</summary> <a href="http://localhost:3000/src/code-edit.tsx#L95">src/code-edit.tsx#L95</a> <ul><p>string</p> </ul></details><details id="language$16" title="Property"><summary><span><a href="#language$16">#</a></span> <code><strong>language</strong></code> <span><span> = </span> <code>''</code></span> – Language for syntax highlighting</summary> <a href="http://localhost:3000/src/code-edit.tsx#L87">src/code-edit.tsx#L87</a> <ul><p>string</p> </ul></details><details id="syntax$24" title="Property"><summary><span><a href="#syntax$24">#</a></span> <code><strong>syntax</strong></code> <span><span> = </span> <code>{}</code></span> – Passing a syntax definition regexp manually</summary> <a href="http://localhost:3000/src/code-edit.tsx#L108">src/code-edit.tsx#L108</a> <ul><p><span>SyntaxOrImport</span></p> </ul></details><details id="tabSize$18" title="Property"><summary><span><a href="#tabSize$18">#</a></span> <code><strong>tabSize</strong></code> <span><span> = </span> <code>2</code></span> – Tab size</summary> <a href="http://localhost:3000/src/code-edit.tsx#L91">src/code-edit.tsx#L91</a> <ul><p>number</p> </ul></details><details id="tabStyle$19" title="Property"><summary><span><a href="#tabStyle$19">#</a></span> <code><strong>tabStyle</strong></code> <span><span> = </span> <code>'spaces'</code></span> – Tab style</summary> <a href="http://localhost:3000/src/code-edit.tsx#L93">src/code-edit.tsx#L93</a> <ul><p><code>"spaces"</code> | <code>"tabs"</code></p> </ul></details><details id="theme$17" title="Property"><summary><span><a href="#theme$17">#</a></span> <code><strong>theme</strong></code> <span><span> = </span> <code>''</code></span> – Theme to use</summary> <a href="http://localhost:3000/src/code-edit.tsx#L89">src/code-edit.tsx#L89</a> <ul><p>string</p> </ul></details><details id="value$13" title="Property"><summary><span><a href="#value$13">#</a></span> <code><strong>value</strong></code> <span><span> = </span> <code>''</code></span> – The editor's value</summary> <a href="http://localhost:3000/src/code-edit.tsx#L81">src/code-edit.tsx#L81</a> <ul><p>string</p> </ul></details><details id="scrollLeft$9" title="Accessor"><summary><span><a href="#scrollLeft$9">#</a></span> <code><strong>scrollLeft</strong></code> </summary> <a href="http://localhost:3000/src/code-edit.tsx#L217">src/code-edit.tsx#L217</a> <ul> </ul></details><details id="scrollTop$11" title="Accessor"><summary><span><a href="#scrollTop$11">#</a></span> <code><strong>scrollTop</strong></code> </summary> <a href="http://localhost:3000/src/code-edit.tsx#L220">src/code-edit.tsx#L220</a> <ul> </ul></details><p></p></ul></details><p></p>
<h2>Credits</h2>
<ul>
<li><a href="https://npmjs.org/package/code-syntax">code-syntax</a> by <a href="https://github.com/stagas">stagas</a> – Code syntax highlight Web Component</li>
<li><a href="https://npmjs.org/package/debounce-micro">debounce-micro</a> by <a href="https://github.com/stagas">stagas</a> – wrap a function in a debounce microtask</li>
<li><a href="https://npmjs.org/package/mixter">mixter</a> by <a href="https://github.com/stagas">stagas</a> – A Web Components framework.</li>
<li><a href="https://npmjs.org/package/super-impose">super-impose</a> by <a href="https://github.com/stagas">stagas</a> – Web Component that super imposes one child over another to the same scroll position</li>
<li><a href="https://npmjs.org/package/textarea-code">textarea-code</a> by <a href="https://github.com/stagas">stagas</a> – Web Component that extends a textarea element with code editor behavior.</li>
</ul>
<h2>Contributing</h2>
<p><a href="https://github.com/stagas/code-edit/fork">Fork</a> or <a href="https://github.dev/stagas/code-edit">edit</a> and submit a PR.</p>
<p>All contributions are welcome!</p>
<h2>License</h2>
<p><a href="http://localhost:3000/LICENSE">MIT</a> © 2022 <a href="https://github.com/stagas">stagas</a></p>
</body></html>