CodeBlock | CoreAI design system

Default

Loading interactive example. Full source is available below.

View example source

// Copyright (c) Microsoft Corporation.
// Licensed under the MIT license.

import { CodeBlock } from "@coreai-ds/react-components";
import * as React from 'react';

export const Default = () => {
    const tsSample = `import { Button } from "@coreai-ds/react-components";

export function Save(): JSX.Element {
  // Click to persist the current document.
  return <Button appearance="primary">Save</Button>;
}`;
    const cssSample = `.card {
  border-radius: 8px;
  padding: 16px;
  background: var(--colorNeutralBackground1);
}`;
    const styles = /* css */ `
      .code-block-default-example {
        display: flex;
        flex-direction: column;
        row-gap: var(--spacingVerticalL);
        max-width: 640px;
      }

      .code-block-default-example__heading {
        margin: 0;
        font-size: var(--fontSizeBase200);
        color: var(--colorNeutralForeground3);
      }
    `;
    return (<>
        <style>{styles}</style>
        <div className="code-block-default-example">
          <div>
            <p className="code-block-default-example__heading">TypeScript</p>
            <CodeBlock language="tsx" code={tsSample}/>
          </div>

          <div>
            <p className="code-block-default-example__heading">CSS</p>
            <CodeBlock language="css" code={cssSample}/>
          </div>

          <div>
            <p className="code-block-default-example__heading">Un-highlighted (no language)</p>
            <CodeBlock code={`SELECT * FROM users WHERE active = 1;`}/>
          </div>
        </div>
      </>);
};

export default Default;

Usage

CodeBlock is a CoreAI component. Import it from @coreai-ds/react-components.

Pass the source string through code. Set language, such as tsx or css, to enable syntax highlighting. Omit language to display plain text.

Use header for a title or related controls. The examples also demonstrate appearance, loading, and fixed-height content.

Displaying source code does not execute it.

API referenceGenerated CoreAI prop and type summaries

API

Generated CoreAI prop summaries, not replacement type declarations. Most native DOM/event and ARIA props are omitted. ? means optional; JSDoc shows defaults, deprecations, and conditional requirements. Defaults assume the standard CoreAI provider.

CodeBlock API

Render source code with syntax highlighting via rehype-highlight.

interface CodeBlockProps {
  /**
   * Visual style of the surrounding surface, matching `Card`'s appearances.
   * `subtle` is borderless, transparent, and also drops the inner padding.
   * @default 'filled-alternative'
   */
  appearance?: "filled" | "outline" | "subtle" | "filled-alternative";

  className?: string;

  /**
   * The source code to highlight.
   */
  code?: string;

  /**
   * Content rendered in place of the code when `code` is empty or omitted.
   */
  fallbackContent?: ReactNode;

  /**
   * Optional content rendered in a footer below the code.
   */
  footer?: ReactNode;

  /**
   * - divided footer separates the code and footer with a border
   * - subtle footer has no border and is flush with the codeblock
   * @default 'divided'
   */
  footerAppearance?: "subtle" | "divided";

  /**
   * Optional class name for the footer element.
   */
  footerClassName?: string;

  /**
   * Optional content rendered in a header above the code.
   */
  header?: ReactNode;

  /**
   * - divided header splits the codeblack and header with a border
   * - subtle header has no border and is flush with the codeblock
   * @default 'divided'
   */
  headerAppearance?: "subtle" | "divided";

  /**
   * Optional class name for the header element.
   */
  headerClassName?: string;

  /**
   * Whether to hide the copy button.
   * @default false
   */
  hideCopybutton?: boolean;

  /**
   * Language hint (e.g. `"js"`, `"ts"`, `"css"`). Sets the `language-*` class
   * `rehype-highlight` keys off. When omitted, the code is left un-highlighted.
   */
  language?: string;

  ref?: Ref<HTMLDivElement>;

  style?: CSSProperties;
}

Implementation

CoreAI 0.12.0; Fluent 9.74.9.

Setup and dependencies.

Import components from @coreai-ds/react-components. CoreAI guidance above takes precedence over API demonstration examples.

Appearance

Loading interactive example. Full source is available below.

Download source

// Copyright (c) Microsoft Corporation.
// Licensed under the MIT license.

import { CodeBlock } from "@coreai-ds/react-components";
import * as React from 'react';

export const Appearance = () => {
    const appearanceSample = `import { Button } from "@coreai-ds/react-components";

export function Save(): JSX.Element {
  return <Button appearance="primary">Save</Button>;
}`;
    const styles = /* css */ `
      .code-block-appearance-example {
        display: flex;
        flex-direction: column;
        row-gap: var(--spacingVerticalXL);
      }

      .code-block-appearance-example__heading {
        margin: 0;
        font-size: var(--fontSizeBase200);
        color: var(--colorNeutralForeground3);
      }

      .code-block-appearance-example__filled-surface {
        background-color: var(--colorNeutralBackground3);
        margin-inline: calc(-3 * var(--spacingHorizontalL));
        padding-inline: calc(3 * var(--spacingHorizontalL));
        padding-block: var(--spacingVerticalXL);
      }
    `;
    return (<>
        <style>{styles}</style>
        <div className="code-block-appearance-example">
          <div>
            <p className="code-block-appearance-example__heading">filled-alternative (default)</p>
            <CodeBlock language="tsx" code={appearanceSample}/>
          </div>

          <div className="code-block-appearance-example__filled-surface">
            <p className="code-block-appearance-example__heading">
              filled (on colorNeutralBackground3)
            </p>
            <CodeBlock language="tsx" appearance="filled" code={appearanceSample}/>
          </div>

          <div>
            <p className="code-block-appearance-example__heading">outline</p>
            <CodeBlock language="tsx" appearance="outline" code={appearanceSample}/>
          </div>

          <div>
            <p className="code-block-appearance-example__heading">subtle (no border, no padding)</p>
            <CodeBlock language="tsx" appearance="subtle" code={appearanceSample}/>
          </div>
        </div>
      </>);
};

export default Appearance;

Fixed Height

Loading interactive example. Full source is available below.

Download source

// Copyright (c) Microsoft Corporation.
// Licensed under the MIT license.

import * as React from 'react';
import { CodeBlock } from "@coreai-ds/react-components";
import { Button } from "@coreai-ds/react-components";

export const FixedHeight = () => {
    const [showAll, setShowAll] = React.useState(false);
    const longSample = `import * as React from 'react';
import {
  Button,
  Card,
  CardFooter,
  CardHeader,
  Input,
  Text,
} from '@coreai-ds/react-components';

type ProfileFormProps = {
  initialName: string;
  initialRole: string;
  onSave: (profile: { name: string; role: string }) => void;
};

export function ProfileForm({
  initialName,
  initialRole,
  onSave,
}: ProfileFormProps): JSX.Element {
  const [name, setName] = React.useState(initialName);
  const [role, setRole] = React.useState(initialRole);

  const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
    event.preventDefault();
    onSave({ name, role });
  };

  return (
    <Card as="form" onSubmit={handleSubmit}>
      <CardHeader
        header={<Text preset="heading5">Profile</Text>}
        description={
          <Text foreground={3}>
            Update the details shown to your team.
          </Text>
        }
      />

      <Input
        label="Name"
        value={name}
        onChange={(_event, data) => setName(data.value)}
      />
      <Input
        label="Role"
        value={role}
        onChange={(_event, data) => setRole(data.value)}
      />

      <CardFooter>
        <Button appearance="primary" type="submit">
          Save changes
        </Button>
      </CardFooter>
    </Card>
  );
}`;
    const styles = /* css */ `
      .code-block-fixed-height-example {
        width: 100%;
        height: 320px;
        max-width: 720px;
      }

      .code-block-fixed-height-example--expanded {
        height: auto;
      }
    `;
    return (<>
        <style>{styles}</style>
        <CodeBlock className={`code-block-fixed-height-example${showAll ? ' code-block-fixed-height-example--expanded' : ''}`} code={longSample} language="tsx" header={'user-profiles/ProfileForm.tsx'} footer={<Button appearance="subtle" size="small" aria-expanded={showAll} onClick={() => setShowAll((current) => !current)}>
              {showAll ? 'Show Less' : 'Show All'}
            </Button>}/>
      </>);
};

export default FixedHeight;

Header

Loading interactive example. Full source is available below.

Download source

// Copyright (c) Microsoft Corporation.
// Licensed under the MIT license.

import * as React from 'react';
import { CodeBlock } from "@coreai-ds/react-components";
import { Dropdown } from "@coreai-ds/react-components";
import { Option } from "@coreai-ds/react-components";
import { Button } from "@coreai-ds/react-components";
import { Text } from "@coreai-ds/react-components";

export const Header = () => {
    const codeSamples = {
        json: `{
  "name": "coreai-docs",
  "theme": "coreai",
  "features": ["search", "feedback"]
}`,
        yaml: `name: coreai-docs
theme: coreai
features:
  - search
  - feedback`,
        markdown: `# coreai-docs
- Theme: \`coreai\`
- Features:
  - search
  - feedback`,
    };
    type CodeSampleLanguage = keyof typeof codeSamples;
    const languageLabels: Record<CodeSampleLanguage, string> = {
        json: 'JSON',
        yaml: 'YAML',
        markdown: 'Markdown',
    };
    const tsSample = `import { Button } from "@coreai-ds/react-components";

export function Save(): JSX.Element {
  // Click to persist the current document.
  return <Button appearance="primary">Save</Button>;
}`;
    const [language, setLanguage] = React.useState<CodeSampleLanguage>('json');
    const styles = /* css */ `
      .code-block-header-example {
        display: flex;
        flex-direction: column;
        row-gap: var(--spacingVerticalL);
        max-width: 640px;
      }
    `;
    return (<>
        <style>{styles}</style>
        <div className="code-block-header-example">
          <CodeBlock code={codeSamples[language]} language={language} header={<>
                <Dropdown label="Format" dynamicWidth appearance="filled-lighter" size="small" value={languageLabels[language]} selectedOptions={[language]} onOptionSelect={(_event, data) => {
                if (data.optionValue && data.optionValue in codeSamples) {
                    setLanguage(data.optionValue as CodeSampleLanguage);
                }
            }}>
                  <Option value="json">JSON</Option>
                  <Option value="yaml">YAML</Option>
                  <Option value="markdown">Markdown</Option>
                </Dropdown>
                <Button appearance="subtle" size="small" shape="rounded">
                  API Keys
                </Button>
              </>}/>

          <CodeBlock code={tsSample} language="tsx" headerAppearance="subtle" header={<Text preset="bodyXS" foreground={3}>
                TypeScript - SaveButton.tsx
              </Text>}/>
        </div>
      </>);
};

export default Header;

Loading

Loading interactive example. Full source is available below.

Download source

// Copyright (c) Microsoft Corporation.
// Licensed under the MIT license.

import { CodeBlock } from "@coreai-ds/react-components";
import { Skeleton } from "@coreai-ds/react-components";
import { SkeletonItem } from "@coreai-ds/react-components";
import * as React from 'react';

export const Loading = () => {
    const styles = /* css */ `
      .code-block-loading-example__skeleton {
        display: flex;
        flex-direction: column;
        gap: var(--spacingVerticalS);
      }

      .code-block-loading-example__line--one {
        width: 42%;
      }

      .code-block-loading-example__line--two {
        width: 68%;
      }

      .code-block-loading-example__line--three {
        width: 56%;
      }

      .code-block-loading-example__line--four {
        width: 76%;
      }

      .code-block-loading-example__line--five {
        width: 48%;
      }
    `;
    return (<>
        <style>{styles}</style>
        <CodeBlock header="Loading Code..." headerAppearance="subtle" fallbackContent={<Skeleton className="code-block-loading-example__skeleton" aria-label="Loading code">
              <SkeletonItem className="code-block-loading-example__line--one" size={16}/>
              <SkeletonItem className="code-block-loading-example__line--two" size={16}/>
              <SkeletonItem className="code-block-loading-example__line--three" size={16}/>
              <SkeletonItem className="code-block-loading-example__line--four" size={16}/>
              <SkeletonItem className="code-block-loading-example__line--five" size={16}/>
            </Skeleton>}/>
      </>);
};

export default Loading;