solid-docs-next/src/ui/layout/hero-code-snippet.tsx at router-updates · devagrawal09/solid-docs-next · GitHub

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
import { codeToHtml } from "shiki";
import { createResource } from "solid-js";

export const counterTxt = `import { createSignal } from "solid-js";

function Counter() {
	const [count, setCount] = createSignal(0);

	setInterval(() => setCount((prev) => prev + 1), 1000);

	return (
		<div>
			<p>Count: {count()}</p>
		</div>
	);
}`;

export const snippetLines = counterTxt.split("\n");

const renderCode = async () => {
	const code = `import { createSignal } from "solid-js";

function Counter() {
	const [count, setCount] = createSignal(0);

	setInterval(() => setCount((prev) => prev + 1), 1000);

	return (
		<div>
			<p>Count: {count()}</p>
		</div>
	);
}`.trim();
	return codeToHtml(code, {
		lang: "tsx",
		theme: "material-theme-ocean",
	});
};

export default function CodeSnippet() {
	const [code] = createResource(renderCode);

	return <div innerHTML={code()} />;
}