code

A basic code component that can be used to display code with syntax highlighting.

Installation

With Markdown

You can use the Code component within the Markdown component to display syntax highlighted code properly within a Markdown document.

To do this edit the components/ui/markdown.tsx component and uncomment the code that is there.

tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
import ReactMarkdown, { Options } from "react-markdown";
import remarkGfm from "remark-gfm";

import { cn } from "@/lib/utils";

export type MarkdownProps = Options;

export function Markdown({ children, className, ...props }: MarkdownProps) {
  return (
    <ReactMarkdown
      className={cn(
        "prose prose-neutral break-words dark:prose-invert prose-p:leading-relaxed prose-pre:overflow-visible prose-pre:bg-inherit prose-pre:p-0 prose-p:m-0",
        className
      )}
      remarkPlugins={[remarkGfm]}
      components={{
        p({ children }) {
          return <p className="mb-2 last:mb-0">{children}</p>;
        },
        code({ children, className, ...rest }) {
          const match = /language-(\w+)/.exec(className || "");
          if (!match) {
            return (
              <code
                {...rest}
                className={cn("font-semibold text-primary", className)}
              >
                {children}
              </code>
            );
          }
          const code = String(children).replace(/\n$/, "");
          const language = match[1];
          return (
            <Code language={language}>
              <CodeHeader>
                <CodeLanguage />
                <CodeCopyButton />
              </CodeHeader>

              <CodeContent showLineNumbers>{code}</CodeContent>
            </Code>
          );
        },
      }}
      {...props}
    >
      {children}
    </ReactMarkdown>
  );
}