aylac.top
1import hljs from "highlight.js";
2import { createResource, For } from "solid-js";
3import "../styles/fileviewer.css";
4import "../util/highlight.js/index";
5
6export function CodeBlock(props: { code: string; language: string }) {
7 const [codeBlock] = createResource(
8 () => props,
9 (props) => {
10 const highlit = hljs.getLanguage(props.language)
11 ? hljs.highlight(props.code, { language: props.language }).value
12 : props.code;
13 return (
14 <For each={highlit.split("\n")}>
15 {(line, i) => (
16 <span class="line-wrapper">
17 <span class="line-number">{i() + 1}</span>
18 <span class="line-content" innerHTML={line}></span>
19 </span>
20 )}
21 </For>
22 );
23 },
24 );
25
26 return (
27 <pre>
28 <code class="flex flex-col text-wrap p-4">{codeBlock()}</code>
29 </pre>
30 );
31}