aylac.top
1import hljs from "highlight.js";
2import { For } from "solid-js";
3import "./style.css";
4import "../../util/highlight.js/index";
5
6export function CodeBlock(props: { code: string; language: string }) {
7 const highlit = (
8 hljs.getLanguage(props.language)
9 ? hljs.highlight(props.code, { language: props.language }).value
10 : props.code
11 ).split("\n");
12 const numberSize = highlit.length.toString().length;
13 return (
14 <div class="overflow-x-auto">
15 <div class="flex w-min flex-col whitespace-pre text-nowrap font-mono text-gray-500 dark:text-gray-300">
16 <For each={highlit}>
17 {(line, i) => (
18 <div id={`L${i() + 1}`} class="flex flex-row gap-2">
19 <a
20 href={`#L${i() + 1}`}
21 class="sticky left-0 select-none border-gray-200 border-r bg-white px-1.5 text-gray-500 hover:text-gray-700 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-500 hover:dark:text-gray-200"
22 >
23 {(i() + 1).toString().padStart(numberSize, " ")}
24 </a>
25 <span innerHTML={line} />
26 </div>
27 )}
28 </For>
29 </div>
30 </div>
31 );
32}