1
import { splitHighlightedCodeIntoLines } from "@/client/components/highlight";
2
 
3
type CodeViewerProps = {
4
  code: string;
5
  language?: string | null;
6
};
7
 
8
export function CodeViewer({ code, language }: CodeViewerProps) {
9
  const { lines, languageClass } = splitHighlightedCodeIntoLines(code, language);
10
 
11
  return (
12
    <pre id="blob-pre" className="has-line-numbers">
13
      <table id="blob-code" className={`code-table hljs ${languageClass}`}>
14
        <tbody>
15
          {lines.map((line, index) => {
16
            const lineNumber = index + 1;
17
            return (
18
              <tr key={lineNumber} id={`L${lineNumber}`} className="code-line">
19
                <td className="line-num">
20
                  <a href={`#L${lineNumber}`}>{lineNumber}</a>
21
                </td>
22
                <td
23
                  className="line-code"
24
                  dangerouslySetInnerHTML={{
25
                    __html: line || "&nbsp;",
26
                  }}
27
                />
28
              </tr>
29
            );
30
          })}
31
        </tbody>
32
      </table>
33
    </pre>
34
  );
35
}