code

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

Installation

bash
npx shadcn add "https://registry.niels.foo/code.json"

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>
  );
}

Source