feat: CodeBlock + utils by lawreka · Pull Request #155 · mintlify/components

lawreka · 2026-01-21T19:54:58Z

adds everything needed (shiki, etc.) for CodeBlock and CodeBlock stories

Note

Introduces a production-ready code rendering system and UI.

New CodeBlock component (+ header/footer/copy button) with Shiki highlighting, line numbers, focus/highlight, diff markers, wrapping, expandable preview, light/dark and custom theme support
Shiki integration: transformers, theme/lang mapping, background color extraction, HTML generation hook, and a web worker for large snippets; utilities for code extraction and styling
Styling: comprehensive code.css and twoslash.css, custom scrollbar plugin, and theme tokens wired into styles.css
Storybook: extensive stories and sample snippets covering themes, focus/highlight, diffs, and expandability
New constants/types: CodeStyling, SHIKI theme list, icon utilities update; exported via components index
Build/config: Vite worker format enabled; dependencies added (shiki, @shikijs/*, comlink, hast, types)

Risk: Medium. New dependencies, worker-based highlighting, and Tailwind plugin/CSS changes may affect build size, styling, and runtime in the components package.

^{Written by Cursor Bugbot for commit 367bcd7. This will update automatically on new commits. Configure here.}

linear · 2026-01-21T19:55:02Z

ENG-5509 Code Block + Code Group

Move the codeGroup component into the OSS components package repository.

Check general rules and specifics in https://www.notion.so/mintlify/Docs-Components-rules-audit-2d1aa841023480ba93b7e1a8676522db

…thryn/eng-5509-code-block

pqoqubbw · 2026-01-22T10:45:16Z

+}: {
+    filename?: string;
+    icon?: string;
+    codeBlockTheme?: 'dark' | 'system';
+    children?: ReactNode;
+}) {


can we move this to CodeHeaderProps

or just Pick from CodeBlockPropsBase

pqoqubbw · 2026-01-22T10:46:15Z

+    code: string;
+    // pass in useAnalyticsContext('docs.code_group.copy')
+    onCopy?: (result: CopyToClipboardResult, textToCopy?: string) => void;
+    codeBlockTheme?: 'system' | 'dark';


we should move this to a global type and re-use for all codeblock components

pqoqubbw · 2026-01-22T10:46:28Z

+    onCopied?: (result: CopyToClipboardResult, textToCopy?: string) => void;
+    className?: string;
+    showTooltip?: boolean;
+    codeBlockTheme?: 'system' | 'dark';


pqoqubbw · 2026-01-22T10:46:42Z

+    isCopiedActive: boolean;
+    showTooltip?: boolean;
+    className?: string;
+    codeBlockTheme?: 'system' | 'dark';


pqoqubbw · 2026-01-22T10:47:37Z

+        let rafId: number | undefined;
+        if (contentRef.current != null && enable) {
+            rafId = requestAnimationFrame(() => {
+                if (contentRef.current != null) {
+                    setCalculatedHeight(
+                        contentRef.current.scrollHeight +
+                        (numberOfLines && numberOfLines < SMALL_EXPANDABLE_NUMBER_OF_LINES
+                            ? SMALL_EXPANDED_HEIGHT_OFFSET
+                            : EXPANDED_HEIGHT_OFFSET)
+                    );
+                }
+            });
+        }


lowest priority, but this is hard to read

…thryn/eng-5509-code-block

dks333 · 2026-01-22T20:10:22Z

+          "children:!my-0 children:!shadow-none children:!bg-transparent relative h-full w-0 min-w-full max-w-full px-4 py-3.5 text-sm leading-6 dark:bg-codeblock",
+          "code-block-background overflow-x-auto transition-[height] duration-300 ease-in-out",
+          "**:outline-0 **:ring-0 **:focus:outline-0 **:focus:ring-0",
+          props.filename ? "rounded-xt" : "rounded-2xl",


we should also fix this in client

rounded-[14px]

you mean the unrounded corners peeking over? 👀

ah yes will do

cursor

Cursor Bugbot has reviewed your changes and found 2 potential issues.

^{Bugbot Autofix is OFF. To automatically fix reported issues with Cloud Agents, enable Autofix in the Cursor dashboard.}

cursor · 2026-01-22T20:31:02Z

+const useGetShikiHighlightedHtml = (
+  props: ShikiHighlightedHtmlArgs
+): string | undefined => {
+  const htmlOrPromise = getShikiHighlightedHtml(props);


Syntax highlighting runs on every render without memoization

Medium Severity

The useGetShikiHighlightedHtml hook calls getShikiHighlightedHtml(props) synchronously at the top of the hook on every render. In base-code-block.tsx, the props object is created inline without memoization, meaning a new object reference is passed on each render. When the highlighter is ready, the expensive syntax highlighting work runs on every component render rather than only when the code content or options actually change. For large code blocks, this could cause noticeable UI jank and unnecessary CPU usage.

Additional Locations (1)

packages/components/src/components/code-block/base-code-block.tsx#L75-L90

cursor · 2026-01-22T20:31:02Z

+const useGetShikiHighlightedHtml = (
+  props: ShikiHighlightedHtmlArgs
+): string | undefined => {
+  const htmlOrPromise = getShikiHighlightedHtml(props);


Syntax highlighting runs on every render without memoization

Medium Severity

The useGetShikiHighlightedHtml hook calls getShikiHighlightedHtml(props) synchronously at the top of the hook on every render. In base-code-block.tsx, the props object is created inline without memoization, meaning a new object reference is passed on each render. When the highlighter is ready, the expensive syntax highlighting work runs on every component render rather than only when the code content or options actually change. For large code blocks, this could cause noticeable UI jank and unnecessary CPU usage.

Additional Locations (1)

packages/components/src/components/code-block/base-code-block.tsx#L75-L90

add only codeblock stories and utils

7af9143

This comment was marked as outdated.

Sign in to view

lawreka added 2 commits January 21, 2026 12:06

add codeblock to exports

cf538cb

fix shiki import and remove unused helpers in getCodeStyling

a990924

This comment was marked as outdated.

Sign in to view

lawreka added 3 commits January 21, 2026 12:58

fix worker import

54a0945

match logic in shiki worker and main thread

feca959

add missing tabindex to worker

2c68375

This comment was marked as outdated.

Sign in to view

lawreka added 3 commits January 21, 2026 13:11

remove more currently unused fns

145f751

inline CodeElement

a6b923d

fall back to default shiki themes

5487715

This comment was marked as outdated.

Sign in to view

lawreka requested review from dks333 and pqoqubbw January 21, 2026 21:57

list className on CodeBlock props and add custom className story

1d4807a

This comment was marked as outdated.

Sign in to view

address bugbot comments

2625930

This comment was marked as outdated.

Sign in to view

Merge branch 'main' of https://github.com/mintlify/components into ka…

b1624f0

…thryn/eng-5509-code-block

This comment was marked as outdated.

Sign in to view

address bugbot comments

6cc5e24

This comment was marked as outdated.

Sign in to view

fix null checks and memoization of useGetShikiHighlightedHtml

074ece8

This comment was marked as outdated.

Sign in to view

pqoqubbw reviewed Jan 22, 2026

View reviewed changes

pqoqubbw approved these changes Jan 22, 2026

View reviewed changes

lawreka added 3 commits January 22, 2026 10:36

Merge branch 'main' of https://github.com/mintlify/components into ka…

face313

…thryn/eng-5509-code-block

lintingg

75bf759

simplify copy button

7cf6c11

This comment was marked as outdated.

Sign in to view

exports at bottom of file

90fc911

dks333 requested changes Jan 22, 2026

View reviewed changes

This comment was marked as outdated.

Sign in to view

lawreka added 3 commits January 22, 2026 12:11

fix nested component and props spread issue

840e63a

pass missing button props

906aa8e

fix bsae code block corners

f77a029

This comment was marked as outdated.

Sign in to view

update corner radius

367bcd7

cursor Bot reviewed Jan 22, 2026

View reviewed changes

dks333 approved these changes Jan 22, 2026

View reviewed changes

lawreka merged commit 03ca0b5 into main Jan 22, 2026
3 checks passed

lawreka deleted the kathryn/eng-5509-code-block branch January 22, 2026 21:27

Uh oh!

Conversation

lawreka commented Jan 21, 2026 • edited by cursor Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

linear Bot commented Jan 21, 2026

Uh oh!

This comment was marked as outdated.

Uh oh!

This comment was marked as outdated.

Uh oh!

This comment was marked as outdated.

Uh oh!

This comment was marked as outdated.

Uh oh!

This comment was marked as outdated.

Uh oh!

This comment was marked as outdated.

Uh oh!

This comment was marked as outdated.

Uh oh!

This comment was marked as outdated.

Uh oh!

This comment was marked as outdated.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

This comment was marked as outdated.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

This comment was marked as outdated.

Uh oh!

This comment was marked as outdated.

Uh oh!

cursor Bot left a comment

Choose a reason for hiding this comment

Uh oh!

cursor Bot Jan 22, 2026

Choose a reason for hiding this comment

Syntax highlighting runs on every render without memoization

Uh oh!

cursor Bot Jan 22, 2026

Choose a reason for hiding this comment

Syntax highlighting runs on every render without memoization

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

lawreka commented Jan 21, 2026 •

edited by cursor Bot

Loading