-
-
Notifications
You must be signed in to change notification settings - Fork 15
/
index.html
86 lines (74 loc) · 2.62 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
<!doctype html>
<html lang="en">
<!-- Check this file live: https://twoslash-cdn-examples.netlify.app/ -->
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Twoslash + Shiki on CDN Example</title>
<link rel="stylesheet" href="https://esm.sh/@shikijs/twoslash/style-rich.css" />
<style>
html {
color-scheme: dark;
font-family: 'Inter', sans-serif;
}
pre.twoslash {
--twoslash-popup-bg: #222;
}
body {
padding: 2em;
}
a {
color: #58a6ff;
}
</style>
</head>
<body>
<p>
This is an example of running
<a href="https://github.com/twoslashes/twoslash" target="_blank"> Twoslash </a>
+ <a href="https://shiki.style/" target="_blank">Shiki</a> on CDN. This page is
<a href="https://github.com/antfu/twoslash-cdn/blob/main/examples/index.html" target="_blank">
a single static HTML file</a
>.
</p>
<div id="app">Loading...</div>
<script type="module">
// TODO: Replace with explicit versions in production
import { createTransformerFactory, rendererRich } from 'https://esm.sh/shiki-twoslash@latest/core'
import { codeToHtml } from 'https://esm.sh/shiki@latest'
import { createStorage } from 'https://esm.sh/unstorage@latest'
import indexedDbDriver from 'https://esm.sh/unstorage@latest/drivers/indexedb'
import { createTwoslashFromCDN } from 'https://esm.sh/twoslash-cdn@latest'
// ============= Initialization =============
// An example of using unstorage with IndexedDB to cache the virtual file system
const storage = createStorage({
driver: indexedDbDriver({ base: 'twoslash-cdn' }),
})
const twoslash = createTwoslashFromCDN({
storage,
compilerOptions: {
lib: ['esnext', 'dom'],
},
})
const transformerTwoslash = createTransformerFactory(twoslash.runSync)({
renderer: rendererRich(),
})
// ============= Execution =============
const app = document.getElementById('app')
const source = `
import { ref } from '@vue/reactivity'
console.log("Hi! Shiki + Twoslash on CDN :)")
const count = ref(0)
// ^?
`.trim()
// Before rendering, we need to prepare the types, so that the rendering could happend synchronously
await twoslash.prepareTypes(source)
// Then we can render the code
app.innerHTML = await codeToHtml(source, {
lang: 'ts',
theme: 'vitesse-dark',
transformers: [transformerTwoslash],
})
</script>
</body>
</html>