-
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
95 lines (83 loc) · 2.84 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
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>👓</text></svg>" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title><syntax-highlight> element</title>
<link rel="stylesheet" href="/src/themes/prettylights.css">
<style>
body {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
syntax-highlight {
display: block;
border-radius: 0.25rem;
padding: 1rem;
}
syntax-highlight[data-inline] {
display: inline;
padding: unset;
hyphens: unset;
overflow: unset;
line-height: inherit;
white-space: break-spaces;
padding: 0.15em 0.25em;
}
</style>
<script>
window.she = window.she || {};
window.she.config = {
languages: ['markup', 'css', 'javascript', 'markdown'],
// Optional: language specific token type overwrites
languageTokens: {
css: ['important'],
md: ['title', 'list'],
}
}
</script>
</head>
<body>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. <syntax-highlight language="html" data-inline><syntax-highlight><!-- inline code --></syntax-highlight></syntax-highlight> Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et ma.</p>
<syntax-highlight language="html"><!-- HTML -->
<syntax-highlight language="html">
<!-- ... -->
</syntax-highlight></syntax-highlight>
<syntax-highlight language="js">// JS
import SyntaxHighlightElement from 'syntax-highlight-element';</syntax-highlight>
<syntax-highlight language="css" content-selector="style"><style style="display: block; outline: none;" contenteditable="plaintext-only" spellcheck="false">/* CSS */
@layer syntax-highlight-element {
syntax-highlight {
display: inline-block;
font-family: monospace;
white-space: pre;
tab-size: 2;
hyphens: none;
line-height: 1.6;
overflow-x: auto !important;
}
}</style></syntax-highlight>
<syntax-highlight language="md">
<!-- ... -->
# Heading
## 123
__1__
1. ordered list item 1
2. ordered list item 2
- unordered list item 1
- unordered list item 2
</syntax-highlight>
<script type="module" src="/src/index.js"></script>
<script>
document.addEventListener('DOMContentLoaded', () => {
document.addEventListener('keyup', event => {
if (!event.target.hasAttribute('contenteditable')) return;
event.target.normalize();
event.target.closest('syntax-highlight').update();
});
});
</script>
</body>
</html>