-
Notifications
You must be signed in to change notification settings - Fork 5
/
Copy pathindex.html
156 lines (142 loc) · 3.76 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
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Shiki Editor</title>
<style>
html, body {
margin: 0;
padding: 0;
}
.main {
display: grid;
justify-items: center;
margin: 100px;
}
.editor-header {
display: flex;
position: absolute;
top: -40px;
align-items: center;
gap: 20px;
box-sizing: border-box;
border-radius: 8px 8px 0 0;
background-color: inherit;
padding-inline: 20px;
width: 100%;
height: 40px;
color: inherit;
}
.editor-header select {
border-color: transparent;
background: inherit;
color: inherit;
}
.editor-footer {
position: absolute;
bottom: -8px;
border-radius: 0 0 8px 8px;
background-color: inherit;
width: 100%;
height: 8px;
}
#container {
width: 1000px;
height: 800px;
font-size: 14px;
line-height: 1.7;
}
</style>
</head>
<body>
<main class="main">
<div id="container">
<header class="editor-header">
<select id="lang_list"></select>
<select id="theme_list"></select>
</header>
<footer class="editor-footer"></footer>
</div>
</main>
<script type="importmap">
{
"imports": {
"shiki": "https://esm.run/shiki@1.22.0",
"shikicode": "./lib/index.js",
"shikicode/plugins": "./lib/plugins/index.js"
}
}
</script>
<script type="module">
import { bundledLanguagesInfo, bundledThemesInfo } from "shiki";
bundledLanguagesInfo.forEach((lang) => {
const option = document.createElement("option");
option.value = lang.id;
option.textContent = lang.name;
lang_list.append(option);
});
bundledThemesInfo.forEach((theme) => {
const option = document.createElement("option");
option.value = theme.id;
option.textContent = theme.displayName;
theme_list.append(option);
});
lang_list.addEventListener("change", (e) => {
editor.updateOptions({
language: e.target.value,
});
});
theme_list.addEventListener("change", (e) => {
editor.updateOptions({
theme: e.target.value,
});
});
theme_list.value = "github-dark";
lang_list.value = "tsx";
</script>
<script type="module" id="app_script">
// ^^^^^^^^^ ^^^^^^^^^^ The selectors are not part of shikicode
import { createHighlighter } from "shiki";
import { shikiCode } from "shikicode";
import { autoload, hookClosingPairs, hookTab } from "shikicode/plugins";
// declare your theme and language
const theme = "github-dark";
const language = "tsx";
// get the highlighter
const h = await createHighlighter({ langs: [language], themes: [theme] });
const editor = shikiCode()
// Optionally, you can config some options or add plugins
// by using the `withOptions` and `withPlugins` method
.withPlugins(
// You can add your own plugins here as well
// `hookClosingPairs` will automatically close the brackets, braces, etc.
// Try to type `(`, `[`, or `{` in the editor
hookClosingPairs(),
// `hookTab` will automatically indent the code when you press the tab key
// Try to select random text and press the tab key
hookTab,
// `autoload` is used to automatically load theme and language,
// Normally it is not used unless you are building a playground like this
autoload,
)
.create(container, h, {
// Optionally, you can pass some default value to the editor,
// such as "Hello, ShikiCode 👋!"
value: some_default_value,
language,
theme,
});
// You can check the editor instance in the console
window.editor = editor;
</script>
<script>
var some_default_value =
app_script.textContent
.trim()
.split("\n")
.map((line) => (line.startsWith("\t\t") ? line.slice(2) : line))
.join("\n") + "\n";
</script>
</body>
</html>