Code

Lines of source with numbers and syntax colours, one of them highlighted. Used for stack frames and commands.

import { Code } from "@openperf/deft";

import { Preview } from "../../src/Preview";

export default function CodeBasic() {
  return (
    <Preview block={true}>
      <Code.Root
        code={`const value = 12;\nconsole.log(value);`}
        highlightLine={13}
        language="typescript"
        startLine={12}
      />
    </Preview>
  );
}

• Use Code for blocks of source, such as a stack frame or a config snippet. For a single monospace value in a form, use Input or Textarea with font="mono".
• startLine numbers the first line, so a frame shows its real line numbers.
• highlightLine marks the line that threw, on a danger tint, by its line number.
• language colours the syntax with Shiki, in theme tokens: bash, json, javascript or typescript. The highlighter loads on first use; until then the code shows as plain text.
• Long lines scroll sideways instead of wrapping.

Commands

import { Code } from "@openperf/deft";

import { Preview } from "../../src/Preview";

export default function CodeCommands() {
  return (
    <Preview block={true}>
      <Code.Root code={`mkdir example\ncd example`} language="bash" lineNumbers={false} />
    </Preview>
  );
}

Turn off lineNumbers for a command or a config snippet the reader copies.

API

Parts: Root. Other props go to the native pre.