@apify/ui-library 0.65.2 → 0.65.3-featuresyntaxhighlighter-48cb44.36

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@apify/ui-library",
-    "version": "0.65.2",
+    "version": "0.65.3-featuresyntaxhighlighter-48cb44.36+8cc051d6e85",
     "description": "React UI library used by apify.com",
     "license": "Apache-2.0",
     "type": "module",
@@ -33,9 +33,10 @@
         "fast-average-color": "^9.4.0",
         "history": "^5.3.0",
         "lodash": "^4.17.21",
+        "prism-react-renderer": "^2.4.1",
+        "prismjs": "^1.30.0",
         "query-string": "^8.1.0",
         "react-markdown": "^8.0.5",
-        "react-syntax-highlighter": "^15.5.0",
         "rehype-raw": "^6.1.1",
         "rehype-sanitize": "^6.0.0",
         "remark-gfm": "^3.0.1",
@@ -54,7 +55,6 @@
         "@types/lodash": "^4.14.200",
         "@types/node": "^22.10.5",
         "@types/react": "^18.2.74",
-        "@types/react-syntax-highlighter": "^15.5.9",
         "@types/styled-components": "^5.1.34",
         "eslint": "^9.22.0",
         "eslint-plugin-import": "2.26.0",
@@ -65,5 +65,5 @@
         "typescript": "^5.1.6",
         "typescript-eslint": "^8.24.0"
     },
-    "gitHead": "bab0abe1b9320f67ea4bdc695afbc5a221958227"
+    "gitHead": "8cc051d6e85edbd8cd3c994fd90725e5b4f5cf8e"
 }

package/src/components/code/code_block/code_block.styled.tsx

@@ -1,10 +1,28 @@
 import styled, { css } from 'styled-components';
 
 import { theme } from '../../../design_system/theme.js';
-import type { SharedTextSize } from '../../text/text_shared.js';
-import { SyntaxHighlighterBaseStylesWrapper } from '../syntax_highlighter.js';
+import { Box } from '../../box.js';
+import type { SharedTextProps, SharedTextSize } from '../../text/text_shared.js';
 
-const HIGHLIGHT_BACKGROUND_COLOR = 'rgba(22, 114, 235, 0.05)';
+export type SyntaxHighlighterBaseStylesWrapperProps = SharedTextProps & {
+    $fullWidth?: boolean;
+    $fullHeight?: string;
+    $showLineNumbers?: boolean;
+}
+
+export const SyntaxHighlighterBaseStylesWrapper = styled(Box)<SyntaxHighlighterBaseStylesWrapperProps>`
+    background-color: ${theme.color.neutral.backgroundMuted} !important;
+    border: 1px solid ${theme.color.neutral.border};
+    border-radius: ${theme.radius.radius12};
+    overflow: hidden;
+
+    width: 100%;
+    ${({ $fullWidth }) => !$fullWidth && css`max-width: 860px;`}
+    ${({ $fullHeight }) => !$fullHeight && css`max-height: 600px;`}
+
+    background-color: transparent;
+    position: relative;
+`;
 
 export const CodeBlockWrapper = styled(SyntaxHighlighterBaseStylesWrapper) <{
     $hasHeader: boolean;
@@ -105,72 +123,6 @@ export const CodeBlockWrapper = styled(SyntaxHighlighterBaseStylesWrapper) <{
         }
     }
 
-    .CodePre {
-        z-index: 2;
-        padding: ${theme.space.space16} 0 !important;
-
-        code {
-            & > span {
-                display: block;
-                padding-left: ${({ $showLineNumbers }) => ($showLineNumbers ? theme.space.space8 : theme.space.space16)};
-                padding-right: ${theme.space.space16};
-                &:hover {
-                    background-color: ${HIGHLIGHT_BACKGROUND_COLOR} !important;
-                    border-left: 6px solid ${theme.color.neutral.border} !important;
-                    padding-left: ${({ $showLineNumbers }) => ($showLineNumbers ? '0.2' : '1')}rem;
-                }
-            }
-
-            // Common styles
-            [data*='bash']{
-                &::before {
-                    color: ${theme.color.lavender.base};
-                    padding-right: ${theme.space.space16};
-                    min-width: ${theme.space.space24};
-                    user-select: none;
-                    -webkit-user-select: none;
-                    font-size: 1em;
-                }
-            }
-
-            [data*='bashStartCommand'] {
-                &::before {
-                    content: '$';
-                }
-            }
-
-            [data*='bashCommand'] {
-                &::before {
-                    content: '>';
-                }
-            }
-
-            [data*='bashEmptyLine'] {
-                &::before {
-                    content: ' ';
-                }
-            }
-
-            [data*='highlighted'] {
-                background-color: ${HIGHLIGHT_BACKGROUND_COLOR} !important;
-                border-left: 6px solid ${theme.color.neutral.border} !important;
-                padding-left: ${({ $showLineNumbers }) => ($showLineNumbers ? '0.2' : '1')}rem;
-            }
-
-
-            .linenumber {
-                color: ${theme.color.neutral.textSubtle} !important;
-                padding-right: ${theme.space.space16} !important;
-                min-width: ${theme.space.space24} !important;
-                box-sizing: unset !important;
-                user-select: none;
-                -webkit-user-select: none;
-
-                ${({ $showLineNumbers }) => (!$showLineNumbers && css`display: none !important;`)}
-
-            }
-        }
-    }
 
     .CodeBlock-TopRightActionsWrapper {
         position: absolute;

package/src/components/code/code_block/code_block.tsx

@@ -1,5 +1,5 @@
 import clsx from 'clsx';
-import React, { useCallback, useMemo, useRef, useState } from 'react';
+import React, { useMemo, useRef, useState } from 'react';
 
 import type { RegularBoxProps } from '../../box.js';
 import { ColorWheelGradient } from '../../color_wheel_gradient.js';
@@ -7,9 +7,9 @@ import { Link } from '../../link.js';
 import { Text } from '../../text/index.js';
 import type { SharedTextSize } from '../../text/text_shared.js';
 import { ActionButton, CopyButton } from '../action_button.js';
-import { SyntaxHighlighter } from '../syntax_highlighter.js';
+import { PrismSyntaxHighlighter } from '../prism_highlighter.js';
 import { CodeBlockWrapper } from './code_block.styled.js';
-import { mapPrefixToBashLine } from './utils.js';
+import { getBashLinePrefixes, getNumberLinePrefixes } from './utils.js';
 
 type CodeTab = {
     key: string;
@@ -149,9 +149,7 @@ export const CodeBlock = ({
 
     const isBash = currentLanguage === 'bash';
 
-    const showLineNumbers = !hideLineNumbers
-        && !LANGUAGES_WITHOUT_LINE_NUMBERS.includes(currentLanguage ?? '');
-    const showBashPrompt = isBash && !hideBashPromptPrefixes;
+    const showLineNumbers = !hideLineNumbers && !LANGUAGES_WITHOUT_LINE_NUMBERS.includes(currentLanguage ?? '');
     const showBashHeader = isBash && !hideBashHeader && !isMultiTab;
 
     const showHeader = isMultiTab || !!title || showBashHeader;
@@ -164,28 +162,20 @@ export const CodeBlock = ({
         syntaxHighlighterRef.current?.scrollTo(0, 0);
     };
 
-    const currentBashLinesPrefixes = useMemo(() => {
-        if (!showBashPrompt) return [];
-        return mapPrefixToBashLine(
-            currentCode,
-            currentTab?.bashCommandsStart ?? bashCommandsStart,
-        );
-    }, [currentCode, bashCommandsStart, showBashPrompt, currentTab]);
-
-    const getLineProps = useCallback(
-        (lineNumber: number) => {
-            const data = [];
-            if (currentHighlightLines?.includes(lineNumber)) {
-                data.push('highlighted');
-            }
-            if (showBashPrompt) {
-                data.push(currentBashLinesPrefixes[lineNumber - 1]);
-            }
-
-            return { data: data.join(' ') };
-        },
-        [currentHighlightLines, showBashPrompt, currentBashLinesPrefixes],
-    );
+    const showBashPrompt = isBash && !hideBashPromptPrefixes;
+    const effectiveBashCommandsStart = currentTab?.bashCommandsStart ?? bashCommandsStart;
+
+    const linePrefixes = useMemo(() => {
+        if (showBashPrompt) {
+            return getBashLinePrefixes(currentCode, effectiveBashCommandsStart);
+        }
+
+        if (showLineNumbers) {
+            return getNumberLinePrefixes(currentCode);
+        }
+
+        return {};
+    }, [showLineNumbers, showBashPrompt, currentCode, effectiveBashCommandsStart]);
 
     return (
         <CodeBlockWrapper
@@ -208,16 +198,15 @@ export const CodeBlock = ({
                 />
             )}
 
-            <SyntaxHighlighter
-                showLineNumbers
-                wrapLines
-                language={currentLanguage}
+            <PrismSyntaxHighlighter
+                code={currentCode}
+                linePrefixes={linePrefixes}
+                highlightLines={currentHighlightLines}
+                language={currentLanguage || 'text'}
                 size={size}
-                lineProps={getLineProps}
                 ref={syntaxHighlighterRef}
-            >
-                {currentCode}
-            </SyntaxHighlighter>
+                isSingleLine={false}
+            />
 
             <div className="CodeBlock-TopRightActionsWrapper">
                 {showActionButton && <ActionButton successStyle onClick={onActionButtonClick}>{actionButtonLabel ?? 'Run on Apify'}</ActionButton>}

package/src/components/code/code_block/utils.tsx

@@ -0,0 +1,50 @@
+import type { ReactNode } from 'react';
+
+import { theme } from '../../../design_system/theme.js';
+import { CodeHighlighterLinePrefix } from '../prism_highlighter.js';
+
+// input: [2, 4, 5, 6, 8, 10, 11, 12]
+// returns string indicating what type of line it is (bashStartCommand, bashCommand, bashEmptyLine)
+// commands start -> bashStartCommand
+// every next line after command start until next command start or empty line -> bashCommand
+export const getBashLinePrefixes = (code: string, bashCommandsStart: number[] = []) => {
+    const lines = code.split('\n').map((line) => line.trim());
+
+    const bashLinePrefixesArray = lines.map((line, i) => {
+        const isEmptyLine = line.startsWith('#') || !line;
+
+        // by default each line that is not empty or comment is a command start
+        if (bashCommandsStart.length === 0) {
+            return isEmptyLine ? (
+                <CodeHighlighterLinePrefix />
+            ) : (
+                <CodeHighlighterLinePrefix color={theme.color.lavender.base}>$</CodeHighlighterLinePrefix>
+            );
+        }
+
+        if (bashCommandsStart.includes(i + 1)) {
+            return (
+                <CodeHighlighterLinePrefix color={theme.color.lavender.base}>$</CodeHighlighterLinePrefix>
+            );
+        }
+
+        if (isEmptyLine) {
+            return (
+                <CodeHighlighterLinePrefix />
+            );
+        }
+
+        return (
+            <CodeHighlighterLinePrefix color={theme.color.lavender.base}>&lt;</CodeHighlighterLinePrefix>
+        );
+    });
+
+    return Object.fromEntries(bashLinePrefixesArray.map((linePrefix, i) => [i + 1, linePrefix]));
+};
+
+export const getNumberLinePrefixes = (code: string): Record<number, ReactNode> => {
+    const numberOfLines = code.split('\n').length;
+    const numbersArray = Array.from({ length: numberOfLines }, (_, i) => i + 1);
+
+    return Object.fromEntries(numbersArray.map((number) => [number, <CodeHighlighterLinePrefix>{number}</CodeHighlighterLinePrefix>]));
+};

package/src/components/code/index.ts

@@ -2,3 +2,4 @@ export * from './code_block/code_block.js';
 export * from './code_block/code_block_with_tabs.js';
 export * from './one_line_code/one_line_code.js';
 export * from './inline_code/inline_code.js';
+export * from './prism_highlighter.js';

package/src/components/code/one_line_code/one_line_code.tsx

@@ -8,8 +8,9 @@ import type { BoxProps } from '../../box.js';
 import { Text } from '../../text/index.js';
 import type { SharedTextSize } from '../../text/text_shared.js';
 import { ActionButton, CopyButton } from '../action_button.js';
-import type { SyntaxHighlighterBaseStylesWrapperProps } from '../syntax_highlighter.js';
-import { SyntaxHighlighter, SyntaxHighlighterBaseStylesWrapper } from '../syntax_highlighter.js';
+import type { SyntaxHighlighterBaseStylesWrapperProps } from '../code_block/code_block.styled.js';
+import { SyntaxHighlighterBaseStylesWrapper } from '../code_block/code_block.styled.js';
+import { PrismSyntaxHighlighter } from '../prism_highlighter.js';
 
 export const oneLineCodeClassNames = {
     gradientWrapper: 'OneLineCode-GradientWrapper',
@@ -92,6 +93,7 @@ const OneLineCodeWrapper = styled(SyntaxHighlighterBaseStylesWrapper)<OneLineCod
             top: 0;
             bottom: 0;
             width: 4rem;
+            z-index: 5;
             background: linear-gradient(
                 to right,
                 transparent,
@@ -114,32 +116,12 @@ const OneLineCodeWrapper = styled(SyntaxHighlighterBaseStylesWrapper)<OneLineCod
         scrollbar-color: ${theme.color.neutral.border} transparent;
 
 
-        .CodePre {
+        pre {
             overflow: unset !important;
             display: flex;
             flex: 1;
             align-items: center;
             height: 2.8rem;
-
-            code {
-                & > span {
-                    text-overflow: ellipsis;
-                    overflow: hidden;
-                    white-space: nowrap;
-                    vertical-align: text-top;
-                    ${({ $showBashPrefixes }) => $showBashPrefixes && css`
-                        &::before {
-                            color: ${theme.color.lavender.base};
-                            padding-right: ${theme.space.space16};
-                            min-width: ${theme.space.space24};
-                            user-select: none;
-                            -webkit-user-select: none;
-                            content: "$";
-                            font-size: 1em;
-                        }
-                    `}
-                }
-            }
         }
     }
 `;
@@ -197,13 +179,12 @@ export function OneLineCode({
                             {httpMethod}
                         </Text>
                     )}
-                    <SyntaxHighlighter
+                    <PrismSyntaxHighlighter
                         language={language}
                         size={size}
-                        wrapLines
-                    >
-                        {code}
-                    </SyntaxHighlighter>
+                        code={code}
+                        isSingleLine={true}
+                    />
                 </div>
                 <div className={oneLineCodeClassNames.gradient} />
             </div>

package/src/components/code/prism_highlighter.tsx

@@ -0,0 +1,178 @@
+import clsx from 'clsx';
+import _ from 'lodash';
+import type { HighlightProps } from 'prism-react-renderer';
+import { Highlight, Prism, themes } from 'prism-react-renderer';
+import type { ReactNode } from 'react';
+import { forwardRef, useRef } from 'react';
+import styled, { css } from 'styled-components';
+
+import { theme } from '../../design_system/theme.js';
+import { useSharedUiDependencies } from '../../ui_dependency_provider.js';
+import { Text } from '../text/index.js';
+import type { SharedTextSize } from '../text/text_shared.js';
+
+(typeof global !== 'undefined' ? global : window).Prism = Prism;
+
+const HIGHLIGHT_BACKGROUND_COLOR = 'rgba(22, 114, 235, 0.05)';
+
+const loadLanguages = async () => {
+    await Promise.all([
+        // @ts-expect-error The library is badly typed and does not export the type
+        import('prismjs/components/prism-bash.js'),
+        // @ts-expect-error The library is badly typed and does not export the type
+        import('prismjs/components/prism-rust.js'),
+        // @ts-expect-error The library is badly typed and does not export the type
+        import('prismjs/components/prism-bash.js'),
+        // @ts-expect-error The library is badly typed and does not export the type
+        import('prismjs/components/prism-docker.js'),
+        // @ts-expect-error The library is badly typed and does not export the type
+        import('prismjs/components/prism-http.js'),
+        // @ts-expect-error The library is badly typed and does not export the type
+        import('prismjs/components/prism-javascript.js'),
+        // @ts-expect-error The library is badly typed and does not export the type
+        import('prismjs/components/prism-json.js'),
+        // @ts-expect-error The library is badly typed and does not export the type
+        import('prismjs/components/prism-markup.js'),
+        // @ts-expect-error The library is badly typed and does not export the type
+        import('prismjs/components/prism-python.js'),
+        // @ts-expect-error The library is badly typed and does not export the type
+        import('prismjs/components/prism-typescript.js'),
+        // @ts-expect-error The library is badly typed and does not export the type
+        import('prismjs/components/prism-xml-doc.js'),
+        // @ts-expect-error The library is badly typed and does not export the type
+        import('prismjs/components/prism-yaml.js'),
+    ]);
+};
+
+void loadLanguages();
+
+type StyledPreProps = {
+    $hasLinePrefixes: boolean,
+    $isSingleLine: boolean
+};
+
+const StyledPre = styled.pre<StyledPreProps>`
+    width: 100%;
+    position: relative;
+    overflow: auto;
+    z-index: 2;
+    padding: ${({ $isSingleLine }) => ($isSingleLine ? 0 : `${theme.space.space16} 0`)};
+    margin: 0;
+
+    *,
+    *::before,
+    *::after {
+        text-shadow: none !important;
+        font-style: normal !important;
+        font-family: inherit !important;
+        font-size: inherit !important;
+        font-weight: inherit !important;
+        line-height: inherit !important;
+        background-color: transparent !important;
+    }
+
+    code {
+        min-width: 100%;
+        display: inline-block;
+        vertical-align: middle;
+
+        & > div {
+            display: block;
+
+            &.highlighted {
+                background-color: ${HIGHLIGHT_BACKGROUND_COLOR} !important;
+                border-left: 6px solid ${theme.color.neutral.border} !important;
+                padding-left: ${({ $hasLinePrefixes }) => ($hasLinePrefixes ? '0.2' : '1')}rem;
+            }
+
+            ${({ $isSingleLine }) => !$isSingleLine && css<{$hasLinePrefixes: boolean}>`
+                &:hover {
+                    background-color: ${HIGHLIGHT_BACKGROUND_COLOR} !important;
+                    border-left: 6px solid ${theme.color.neutral.border} !important;
+                    padding-left: ${({ $hasLinePrefixes }) => ($hasLinePrefixes ? '0.2' : '1')}rem;
+                }
+            `}
+
+            ${({ $isSingleLine }) => ($isSingleLine ? css<StyledPreProps>`
+                text-overflow: ellipsis;
+                overflow: hidden;
+                white-space: nowrap;
+                vertical-align: text-top;
+            ` : css<StyledPreProps>`
+                padding-left: ${({ $hasLinePrefixes }) => ($hasLinePrefixes ? theme.space.space8 : theme.space.space16)};
+                padding-right: ${theme.space.space16};
+
+                &:hover {
+                    background-color: ${HIGHLIGHT_BACKGROUND_COLOR} !important;
+                    border-left: 6px solid ${theme.color.neutral.border} !important;
+                    padding-left: ${({ $hasLinePrefixes }) => ($hasLinePrefixes ? '0.2' : '1')}rem;
+                }
+            `)}
+        }
+    }
+`;
+
+export const CodeHighlighterLinePrefix = styled(Text)`
+    display: inline-block;
+    margin-right: ${theme.space.space16};
+    text-align: right;
+    min-width: ${theme.space.space24};
+    color: ${({ color }) => color || theme.color.neutral.textSubtle};
+    user-select: none;
+    -webkit-user-select: none;
+`;
+
+type SyntaxHighlighterProps = Omit<HighlightProps, 'children' | 'language'> & {
+    size?: SharedTextSize,
+    linePrefixes?: Record<string, ReactNode>,
+    highlightLines?: number[],
+    language?: string,
+    className?: string,
+    isSingleLine: boolean,
+};
+
+export const PrismSyntaxHighlighter = forwardRef<HTMLPreElement, SyntaxHighlighterProps>(({
+    size = 'regular',
+    linePrefixes = {},
+    highlightLines = [],
+    language = 'javascript',
+    className,
+    isSingleLine,
+    ...rest
+}, ref) => {
+    const { uiTheme } = useSharedUiDependencies();
+    const hasLinePrefixes = !_.isEmpty(linePrefixes);
+    const highlightedLinesObject = useRef<Record<number, boolean>>(Object.fromEntries(highlightLines.map((e) => [e, true])));
+
+    return (
+        <Highlight
+            theme={uiTheme === 'DARK' ? themes.nightOwl : themes.oneLight}
+            language={language}
+            {...rest}
+        >
+            {({ className: prismClassName, tokens, getLineProps, getTokenProps }) => (
+                <StyledPre
+                    className={clsx(className, prismClassName)}
+                    $hasLinePrefixes={hasLinePrefixes}
+                    $isSingleLine={isSingleLine}
+                    ref={ref}
+                >
+                    <Text
+                        size={size}
+                        type='code'
+                        as='code'
+                    >
+                        {tokens.map((line, i) => (
+                            <div key={i} {...getLineProps({ line, className: highlightedLinesObject.current[i + 1] ? 'highlighted' : '' })}>
+                                {hasLinePrefixes && (linePrefixes[i + 1] || <CodeHighlighterLinePrefix />)}
+                                {line.map((token, key) => (
+                                    <span key={key} {...getTokenProps({ token })} />
+                                ))}
+                            </div>
+                        ))}
+                    </Text>
+                </StyledPre>
+            )}
+        </Highlight>
+    );
+});

package/dist/src/components/code/syntax_highlighter.d.ts

@@ -1,15 +0,0 @@
-import type { SyntaxHighlighterProps as ReactSyntaxHighlighterProps } from 'react-syntax-highlighter';
-import { type SharedTextProps } from '../text/index.js';
-import type { SharedTextSize } from '../text/text_shared.js';
-type SyntaxHighlighterProps = ReactSyntaxHighlighterProps & {
-    size: SharedTextSize;
-};
-export declare const SyntaxHighlighter: import("react").ForwardRefExoticComponent<Omit<SyntaxHighlighterProps, "ref"> & import("react").RefAttributes<HTMLPreElement>>;
-export type SyntaxHighlighterBaseStylesWrapperProps = SharedTextProps & {
-    $fullWidth?: boolean;
-    $fullHeight?: string;
-    $showLineNumbers?: boolean;
-};
-export declare const SyntaxHighlighterBaseStylesWrapper: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../box.js").BoxProps & import("react").RefAttributes<HTMLElement>>, any, SyntaxHighlighterBaseStylesWrapperProps, never>;
-export {};
-//# sourceMappingURL=syntax_highlighter.d.ts.map

package/dist/src/components/code/syntax_highlighter.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"syntax_highlighter.d.ts","sourceRoot":"","sources":["../../../../src/components/code/syntax_highlighter.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,sBAAsB,IAAI,2BAA2B,EAAE,MAAM,0BAA0B,CAAC;AAiCtG,OAAO,EAAE,KAAK,eAAe,EAAQ,MAAM,kBAAkB,CAAC;AAC9D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAoD7D,KAAK,sBAAsB,GAAG,2BAA2B,GAAG;IAAE,IAAI,EAAE,cAAc,CAAA;CAAE,CAAC;AAErF,eAAO,MAAM,iBAAiB,gIAsB5B,CAAC;AAEH,MAAM,MAAM,uCAAuC,GAAG,eAAe,GAAG;IACpE,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC9B,CAAA;AAED,eAAO,MAAM,kCAAkC,wNAY9C,CAAC"}

package/dist/src/components/code/syntax_highlighter.js

@@ -1,103 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-/* eslint-disable @typescript-eslint/ban-ts-comment */
-import { forwardRef } from 'react';
-// @ts-ignore The library is badly typed and does not export the type
-import bash from 'react-syntax-highlighter/dist/esm/languages/prism/bash.js';
-// @ts-ignore The library is badly typed and does not export the type
-import dockerFile from 'react-syntax-highlighter/dist/esm/languages/prism/docker.js';
-// @ts-ignore The library is badly typed and does not export the type
-import http from 'react-syntax-highlighter/dist/esm/languages/prism/http.js';
-// @ts-ignore The library is badly typed and does not export the type
-import js from 'react-syntax-highlighter/dist/esm/languages/prism/javascript.js';
-// @ts-ignore The library is badly typed and does not export the type
-import json from 'react-syntax-highlighter/dist/esm/languages/prism/json.js';
-// @ts-ignore The library is badly typed and does not export the type
-import html from 'react-syntax-highlighter/dist/esm/languages/prism/markup.js';
-// @ts-ignore The library is badly typed and does not export the type
-import python from 'react-syntax-highlighter/dist/esm/languages/prism/python.js';
-// @ts-ignore The library is badly typed and does not export the type
-import ts from 'react-syntax-highlighter/dist/esm/languages/prism/typescript.js';
-// @ts-ignore The library is badly typed and does not export the type
-import xml from 'react-syntax-highlighter/dist/esm/languages/prism/xml-doc.js';
-// @ts-ignore The library is badly typed and does not export the type
-import yaml from 'react-syntax-highlighter/dist/esm/languages/prism/yaml.js';
-// @ts-ignore The library is badly typed and does not export the type
-import ReactSyntaxHighlighter from 'react-syntax-highlighter/dist/esm/prism-light.js';
-// @ts-ignore The library is badly typed and does not export the type
-import dark from 'react-syntax-highlighter/dist/esm/styles/prism/night-owl.js';
-// @ts-ignore The library is badly typed and does not export the type
-import light from 'react-syntax-highlighter/dist/esm/styles/prism/prism.js';
-/* tslint:enable */
-import styled, { css } from 'styled-components';
-import { theme } from '../../design_system/theme.js';
-import { useSharedUiDependencies } from '../../ui_dependency_provider.js';
-import { Box } from '../box.js';
-import { Text } from '../text/index.js';
-ReactSyntaxHighlighter.registerLanguage('typescript', ts);
-ReactSyntaxHighlighter.registerLanguage('javascript', js);
-ReactSyntaxHighlighter.registerLanguage('json', json);
-ReactSyntaxHighlighter.registerLanguage('bash', bash);
-ReactSyntaxHighlighter.registerLanguage('docker', dockerFile);
-ReactSyntaxHighlighter.registerLanguage('html', html);
-ReactSyntaxHighlighter.registerLanguage('xml', xml);
-ReactSyntaxHighlighter.registerLanguage('yaml', yaml);
-ReactSyntaxHighlighter.registerLanguage('python', python);
-ReactSyntaxHighlighter.registerLanguage('http', http);
-ReactSyntaxHighlighter.registerLanguage('jsonp', json);
-ReactSyntaxHighlighter.registerLanguage('jsonl', json);
-ReactSyntaxHighlighter.registerLanguage('rss', xml);
-const StyledPre = styled(Text) `
-    width: 100%;
-    position: relative;
-
-    *,
-    *::before,
-    *::after {
-        text-shadow: none !important;
-        font-style: normal !important;
-        font-family: inherit !important;
-        font-size: inherit !important;
-        font-weight: inherit !important;
-        line-height: inherit !important;
-        background-color: transparent !important;
-    }
-
-    code {
-        min-width: 100%;
-        display: inline-block;
-        vertical-align: middle;
-        overflow: hidden;
-    }
-`;
-// Syntax highlighter uses inline style a lot which makes it hard to override them. To do so, we make the library not
-// use styles that we wish to set on our own (font-based styles, spacing, background, ...),
-const inlineCssReset = {
-    fontFamily: undefined,
-    fontSize: undefined,
-    fontWeight: undefined,
-    lineHeight: undefined,
-    background: undefined,
-    margin: undefined,
-    padding: undefined,
-};
-export const SyntaxHighlighter = forwardRef(({ size, children, ...rest }, ref) => {
-    const { uiTheme } = useSharedUiDependencies();
-    const PreTag = (preProps) => {
-        return _jsx(StyledPre, { ...preProps, size: size, forwardedAs: 'pre', type: 'code', ref: ref });
-    };
-    return (_jsx(ReactSyntaxHighlighter, { PreTag: PreTag, customStyle: inlineCssReset, className: "CodePre", style: uiTheme === 'DARK' ? dark : light, ...rest, children: children }));
-});
-export const SyntaxHighlighterBaseStylesWrapper = styled(Box) `
-    background-color: ${theme.color.neutral.backgroundMuted} !important;
-    border: 1px solid ${theme.color.neutral.border};
-    border-radius: ${theme.radius.radius12};
-    overflow: hidden;
-
-    width: 100%;
-    ${({ $fullWidth }) => !$fullWidth && css `max-width: 860px;`}
-    ${({ $fullHeight }) => !$fullHeight && css `max-height: 600px;`}
-
-    background-color: transparent;
-    position: relative;
-`;
-//# sourceMappingURL=syntax_highlighter.js.map