This repository has been archived by the owner on Feb 9, 2022. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
79 lines (72 loc) · 2.36 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>UnoCSS Preset Typography</title>
<link
rel="icon"
href="https://raw.githubusercontent.com/antfu/unocss/main/playground/public/favicon.svg"
type="image/svg+xml"
/>
</head>
<body class="bg-white font-sans m-0 py-6 px-4 antialiased dark:bg-dark-700">
<main class="mx-auto text-base prose-zinc" dark="prose-invert" prose>
<button
un-m="b-4"
un-p="x-2 y-2"
un-border="rounded-md truegray-300 dark:truegray-600 solid"
un-text="truegray-700 dark:truegray-300"
un-bg="truegray-200 dark:dark-200 hover:truegray-300 dark:hover:dark-300"
type="button"
title="Toggle Light/Dark Mode"
id="toggle"
>
Toggle Light/Dark Mode
</button>
<a
class="not-prose"
href="https://github.com/ydcjeff/unocss-preset-typography"
target="_blank"
rel="noopener noreferrer"
>GitHub</a
>
<span>(This link does not have prose styles applied)</span>
<div>
This page itself is using <code>unocss-preset-typography</code>.
</div>
<div id="demo"></div>
</main>
<script src="https://unpkg.com/shiki"></script>
<script type="module">
import 'uno.css'
import { marked } from 'marked'
import readme from './README.md?raw'
if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
document.documentElement.classList.add('dark')
}
document.getElementById('demo').innerHTML = marked.parse(readme, {
langPrefix: '',
})
document.getElementById('toggle').addEventListener('click', (e) => {
e.preventDefault()
document.documentElement.classList.toggle('dark')
})
const preBlocks = document.querySelectorAll('pre')
shiki
.getHighlighter({
theme: 'material-palenight',
langs: ['html', 'sh', 'js', 'ts'],
})
.then((hl) => {
for (const block of preBlocks) {
block.outerHTML = hl.codeToHtml(
block.textContent,
block.firstElementChild.className || 'text',
)
}
})
</script>
</body>
</html>