Skip to content

Commit 6931c2c

Browse files
l0uisgrangetechniq
l0uisgrange
and
techniq
authored
docs: migrated to shiki (#635)
* migrated to shiki * fixed white corners * Fix theme select centering * Simplify styling and refine and support light/dark mode (without background) * Only create highlighter instance once (module) and reuse * Fix ViewSourceButton usage including overflow * Apply default background and padding in Code (simplify, fix markdown usage). Apply `.not-prose` to remove tailwind-typography classes * Remove top-level await in module (not supported) and use `{#await}` block * Apply border to getting started code examples * Apply border width/radius with theme() instaed of `@apply` --------- Co-authored-by: Sean Lynch <techniq35@gmail.com>
1 parent d7f7810 commit 6931c2c

8 files changed

Lines changed: 381 additions & 78 deletions

File tree

‎packages/layerchart/package.json‎

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,6 @@
4848
"@types/d3-shape": "^3.1.7",
4949
"@types/d3-time": "^3.0.4",
5050
"@types/lodash-es": "^4.17.12",
51-
"@types/prismjs": "^1.26.5",
5251
"@types/shapefile": "^0.6.4",
5352
"@types/topojson-client": "^3.1.5",
5453
"@types/topojson-simplify": "^3.0.3",
@@ -58,12 +57,10 @@
5857
"posthog-js": "^1.252.0",
5958
"prettier": "^3.5.3",
6059
"prettier-plugin-svelte": "^3.4.0",
61-
"prism-svelte": "^0.5.0",
62-
"prism-themes": "^1.9.0",
63-
"prismjs": "^1.30.0",
6460
"rehype-slug": "^6.0.0",
6561
"rollup-plugin-visualizer": "^6.0.3",
6662
"shapefile": "^0.6.6",
63+
"shiki": "^3.9.2",
6764
"solar-calculator": "^0.3.0",
6865
"svelte": "5.34.1",
6966
"svelte-check": "^4.2.1",

‎packages/layerchart/src/lib/docs/Code.svelte‎

Lines changed: 66 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,46 +1,80 @@
1+
<script module>
2+
import { createHighlighter } from 'shiki';
3+
4+
const highlighter = createHighlighter({
5+
themes: ['github-light-default', 'github-dark-default'],
6+
langs: ['svelte', 'javascript', 'ts', 'typescript', 'json', 'sh'],
7+
});
8+
</script>
9+
110
<script lang="ts">
2-
import Prism from 'prismjs';
3-
import 'prism-svelte';
411
import { CopyButton } from 'svelte-ux';
512
import { cls } from '@layerstack/tailwind';
13+
import type { HTMLAttributes } from 'svelte/elements';
14+
15+
interface Props {
16+
source?: string | null;
17+
language?: string;
18+
classes?: { root?: string; pre?: string; code?: string };
19+
}
620
7-
const {
21+
let {
822
source = null,
923
language = 'svelte',
10-
highlightedSource = source
11-
? Prism.highlight(source, Prism.languages[language] ?? Prism.languages.text, language)
12-
: '',
1324
classes = {},
1425
class: className,
15-
}: {
16-
source: string | null;
17-
language?: string;
18-
highlightedSource?: string;
19-
classes?: {
20-
root?: string;
21-
pre?: string;
22-
code?: string;
23-
};
24-
class?: string;
25-
} = $props();
26+
}: Props & HTMLAttributes<HTMLDivElement> = $props();
2627
</script>
2728

28-
<div class={cls('Code', 'rounded-sm', classes.root, className)}>
29+
<div
30+
class={cls(
31+
'Code',
32+
'relative bg-surface-200 dark:bg-surface-300 p-4 overflow-auto not-prose',
33+
classes.root,
34+
className
35+
)}
36+
>
2937
{#if source}
30-
<div class="relative">
31-
<pre
32-
class={cls('language-{language} rounded-sm', classes.pre)}
33-
style="margin: 0; white-space: normal;">
34-
<code class={cls('language-{language}', classes.code)}>{@html highlightedSource}</code>
35-
</pre>
36-
37-
<div class="absolute top-0 right-0 p-2 z-10">
38-
<CopyButton
39-
value={source ?? ''}
40-
class="text-white/70 hover:bg-surface-100/20 py-1 backdrop-blur-md"
41-
size="sm"
42-
/>
43-
</div>
38+
<pre class={cls('whitespace-normal overflow-auto', classes.pre)}>
39+
<code class={cls('text-xs', classes.code)}>
40+
{#await highlighter}
41+
<div>Loading...</div>
42+
{:then h}
43+
{@html h.codeToHtml(source, {
44+
lang: language,
45+
themes: {
46+
light: 'github-light-default',
47+
dark: 'github-dark-default',
48+
},
49+
})}
50+
{:catch error}
51+
<div class="text-red-500">Error loading code highlighting: {error.message}</div>
52+
{/await}
53+
54+
</code>
55+
</pre>
56+
57+
<div class="absolute top-0 right-0 p-2 z-10">
58+
<CopyButton
59+
value={source ?? ''}
60+
class="text-surface-content/70 hover:bg-surface-100/20 py-1 backdrop-blur-md"
61+
size="sm"
62+
/>
4463
</div>
4564
{/if}
4665
</div>
66+
67+
<style>
68+
:global(.shiki) {
69+
background-color: transparent !important;
70+
}
71+
72+
:global(html.dark .shiki),
73+
:global(html.dark .shiki span) {
74+
color: var(--shiki-dark) !important;
75+
/* background-color: var(--shiki-dark-bg) !important; */
76+
font-style: var(--shiki-dark-font-style) !important;
77+
font-weight: var(--shiki-dark-font-weight) !important;
78+
text-decoration: var(--shiki-dark-text-decoration) !important;
79+
}
80+
</style>

‎packages/layerchart/src/lib/docs/Preview.svelte‎

Lines changed: 17 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,5 @@
11
<script lang="ts">
22
import { slide } from 'svelte/transition';
3-
// TODO: No longer copy from svelte-ux after prismjs is migrated to ESM (commonjs causes issue with Vite from another library)
4-
import Prism from 'prismjs';
5-
import 'prism-svelte';
6-
73
import LucideCode from '~icons/lucide/code';
84
import LucideTable from '~icons/lucide/table';
95
@@ -12,25 +8,25 @@
128
139
import Code from './Code.svelte';
1410
import Json from './Json.svelte';
11+
import type { HTMLAttributes } from 'svelte/elements';
1512
import type { Snippet } from 'svelte';
1613
17-
let {
18-
code,
19-
data,
20-
language = 'svelte',
21-
highlightedCode = code ? Prism.highlight(code, Prism.languages.svelte, language) : '',
22-
showCode = false,
23-
class: className,
24-
children,
25-
}: {
14+
interface Props {
15+
children: Snippet;
2616
code?: string;
2717
data?: any;
2818
language?: string;
29-
highlightedCode?: string;
3019
showCode?: boolean;
31-
class?: string | null;
32-
children: Snippet;
33-
} = $props();
20+
}
21+
22+
let {
23+
children,
24+
code = undefined,
25+
data = undefined,
26+
language = 'svelte',
27+
showCode = false,
28+
class: className,
29+
}: Props & HTMLAttributes<HTMLDivElement> = $props();
3430
3531
/**
3632
* Custom JSON replacer (to use with JSON.stringify()) to convert `Date` instances to `new Date()`
@@ -56,14 +52,14 @@
5652
}
5753
</script>
5854

59-
<div class={cls('Preview border rounded-sm bg-surface-100', className)}>
55+
<div class={cls('Preview border rounded bg-surface-100', className)}>
6056
<div class="p-4">
61-
{@render children?.()}
57+
{@render children()}
6258
</div>
6359

6460
{#if code && showCode}
65-
<div transition:slide class="bg-surface-200">
66-
<Code source={code} highlightedSource={highlightedCode} classes={{ pre: 'rounded-t-none' }} />
61+
<div transition:slide class="border-t">
62+
<Code source={code} {language} />
6763
</div>
6864
{/if}
6965
</div>

‎packages/layerchart/src/lib/docs/ViewSourceButton.svelte‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@
3535
{/if}
3636
</div>
3737

38-
<div class="overflow-auto">
38+
<div class="overflow-auto border-t">
3939
<Code {source} language={source.startsWith('<script') ? 'svelte' : 'js'} />
4040
</div>
4141

‎packages/layerchart/src/routes/+layout.svelte‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@
33
import posthog from 'posthog-js';
44
import { watch } from 'runed';
55
6-
import 'prism-themes/themes/prism-vsc-dark-plus.css';
76
import {
87
AppBar,
98
AppLayout,
@@ -159,7 +158,7 @@
159158
classes={{ button: 'max-sm:-mr-3' }}
160159
/>
161160

162-
<div class="border-r border-primary-content/20 pr-2">
161+
<div class="border-r border-primary-content/20 pr-2 flex items-center">
163162
<ThemeSelect keyboardShortcuts />
164163
</div>
165164

‎packages/layerchart/src/routes/docs/+layout.svelte‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -245,7 +245,11 @@
245245
{#if type === 'components' && !hideUsage}
246246
{#key page.route.id}
247247
<h1 id="usage">Usage</h1>
248-
<Code source={`import { ${name} } from 'layerchart';`} language="javascript" />
248+
<Code
249+
source={`import { ${name} } from 'layerchart';`}
250+
language="javascript"
251+
class="bg-surface-100 border rounded"
252+
/>
249253
{/key}
250254
{/if}
251255

‎packages/layerchart/src/routes/getting-started/+page.svelte‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -175,3 +175,10 @@
175175
<a href="https://svelte-ux.techniq.dev/">Svelte UX</a> for a large collection of Svelte components,
176176
actions, stores, and utilities to build highly interactive applications.
177177
</div>
178+
179+
<style>
180+
:global(.Code) {
181+
border-width: theme(borderWidth.DEFAULT);
182+
border-radius: theme(borderRadius.DEFAULT);
183+
}
184+
</style>

0 commit comments

Comments
 (0)