Can I override code and preserve syntax highlighting?

can i override the "code" in components while preserving the shiki/syntax highlighting thing?

To override the code component in streamdown while preserving the built-in Shiki syntax highlighting, you have a few options depending on what you're trying to achieve.

Currently, streamdown doesn't export the default Code or CodeBlock components, so you can't easily wrap them directly if you override the code key in the components prop. However, here are two ways to work around this:

###1. Override pre instead of code (Recommended for Block Code)

In Markdown, fenced code blocks are rendered as <code> tags wrapped in a <pre> tag. By default, streamdown's pre component is just a pass-through that returns its children.

If you want to wrap your code blocks with custom UI (like a container, additional buttons, or styles) while keeping the default highlighting logic, you can override the pre component:

import { Streamdown } from 'streamdown';

<Streamdown
  components={{
    pre: ({ children }) => (
      <div className="my-custom-code-container">
        {/* children will contain the default <code> component with Shiki highlighting */}
        {children}
      </div>
    )
  }}
>
  {markdown}
</Streamdown>

###2. Selective Overriding (If you only want to change Inline Code)

If you want to change how inline code looks but keep the default block code behavior, you're in a bit of a bind because overriding code replaces both. Since the internal CodeBlock component isn't exported, you can't easily fall back to it for non-inline code.

If this is a common requirement, the library might need to export the default components. For now, if you only need to change the styling of the code blocks, it's better to use CSS or Tailwind:

/* Target the Shiki-highlighted code block */
[data-streamdown="code-block"] {
  @apply rounded-xl border-blue-500;
}

/* Target inline code */
[data-streamdown="inline-code"] {
  @apply bg-yellow-100 text-yellow-900;
}

###Summary

• To wrap block code: Override the pre component.
• To style code: Use the data-streamdown attributes (inline-code and code-block) in your CSS.
• To fully replace code: You would currently have to re-implement the Shiki logic using your own highlighter (like react-syntax-highlighter or shiki directly), as the internal components aren't currently exported for reuse.