| 1 | import { memo, useMemo } from "react"; |
| 2 | import type { EditorProps } from "../CodeViewer"; |
| 3 | import { highlightToHtml, shouldHighlightSource } from "../../lib/highlight"; |
| 4 | import { CopyButton } from "../CopyButton"; |
| 5 | |
| 6 | // HljsCode is the syntax-highlighted default behind the code editor seam. It |
| 7 | // renders highlight.js token markup into a <pre>; token colors live in styles.css |
| 8 | // (.hljs-*). To upgrade to a full editor, point CodeViewer.tsx's lazy import at a |
| 9 | // Monaco/CodeMirror module honoring the same EditorProps. |
| 10 | const HljsCode = memo(function HljsCode({ value, language, maxHeight, sourceSize }: EditorProps) { |
| 11 | const syntaxHighlight = useMemo( |
| 12 | () => shouldHighlightSource(value, sourceSize), |
| 13 | [sourceSize, value], |
| 14 | ); |
| 15 | const html = useMemo( |
| 16 | () => highlightToHtml(value, syntaxHighlight ? language : undefined), |
| 17 | [language, syntaxHighlight, value], |
| 18 | ); |
| 19 | return ( |
| 20 | <div className="code-block__wrap"> |
| 21 | <pre |
| 22 | className="code hljs" |
| 23 | data-highlight-mode={syntaxHighlight ? "syntax" : "plain"} |
| 24 | data-lang={language} |
| 25 | style={maxHeight ? { maxHeight } : undefined} |
| 26 | > |
| 27 | <code dangerouslySetInnerHTML={{ __html: html }} /> |
| 28 | </pre> |
| 29 | <CopyButton text={value} className="code-block__copy" /> |
| 30 | </div> |
| 31 | ); |
| 32 | }); |
| 33 | |
| 34 | export default HljsCode; |
| 35 |