Code Block

A container used to display code segments with syntax highlighting and formatting.

code-block.tsx

1
// Minimal version for display purposes.
2
const CodeBlock: React.FC = () => {
3
  return (
4
    <CodeBlockContainer>
5
      <CodeBlockHeader />
6
      <pre>
7
        <Code />
8
      </pre>
9
    </CodeBlockContainer>
10
  );
11
};

No filename

1
const Counter: React.FC = () => {
2
  const [count, setCount] = useState<number>(0);
3

4
  return <button onClick={() => setCount(count + 1)}>{count}</button>;
5
};

Hide line numbers

const Counter: React.FC = () => {
  const [count, setCount] = useState<number>(0);

  return <button onClick={() => setCount(count + 1)}>{count}</button>;
};

Highlight lines

1
const Counter: React.FC = () => {
2
  const [count, setCount] = useState<number>(0);
3

4
  return <button onClick={() => setCount(count + 1)}>{count}</button>;
5
};

Break lines

6080604052600080546001600160a01b03191673b543f9043b387ce5b3d1f0d916e42d8ea2eba2e017905534801561003657600080fd5b50604080516101008101825261055c815261059d602082015261031e9181019190915261079d606082015261077560808201526103ae60a0820152610d6c60c0820152610b2a60e082015260005b6008811015610120576000546001600160a01b03166335df5d9f8383600881106100b0576100b06101b1565b60200201516040516001600160e01b031960e084901b168152600481019190915260036024820152604401600060405180830381600087803b1580156100f557600080fd5b505af1158015610109573d6000803e3d6000fd5b505050508080610118906101c7565b915050610084565b50606f5b60778110156101aa576000546040516323b872dd60e01b8152306004820152336024820152604481018390526001600160a01b03909116906323b872dd90606401600060405180830381600087803b15801561017f57600080fd5b505af1158015610193573d6000803e3d6000fd5b5050505080806101a2906101c7565b915050610124565b50506101f0565b634e487b7160e01b600052603260045260246000fd5b60006000198214156101e957634e487b7160e01b600052601160045260246000fd5b5060010190565b603f806101fe6000396000f3fe6080604052600080fdfea26469706673582212206ca923263cabb7e2b15eb7b12771467dfe2a89b488ca0b3c9292114de582bf6164736f6c634300080b0033

The above is from 0xF5A48D9f32dfe700ff502edaa5B2E90EF6d8b39a, a smart contract by 0age.eth that checkmated my fully on-chain smart contract chess engine in 8 moves.

Flat top

counter.tsx

1
const Counter: React.FC = () => {
2
  const [count, setCount] = useState<number>(0);
3

4
  return <button onClick={() => setCount(count + 1)}>{count}</button>;
5
};

1
const Counter: React.FC = () => {
2
  const [count, setCount] = useState<number>(0);
3

4
  return <button onClick={() => setCount(count + 1)}>{count}</button>;
5
};

Containerized

counter.tsx

1
const Counter: React.FC = () => {
2
  const [count, setCount] = useState<number>(0);
3

4
  return <button onClick={() => setCount(count + 1)}>{count}</button>;
5
};

1
const Counter: React.FC = () => {
2
  const [count, setCount] = useState<number>(0);
3

4
  return <button onClick={() => setCount(count + 1)}>{count}</button>;
5
};

Languages

To view the full list of supported languages, see CodeBlockLanguage in @/components/ui/code-block/types.

fib.js

const fib = (n) => n <= 1 ? 1 : fib(n - 1) + fib(n - 2)

string-keys.ts

type StringKeys<T> = { [K in keyof T]: T[K] extends string ? K : never; }[keyof T]; // https://x.com/mattpocockuk/status/1672165377634103298

counter.jsx

<button onClick={() => setCount(count + 1)}>{count}</button>

button.tsx

const Button: React.FC<JSX.IntrinsicElements['button']> = ({ children, ...rest }) => <button {...rest}>{children}<button>;

king-knight-validation.sol

if (p & 3 == 1) { if (x*x + y*y - p > 1) return false; } // https://x.com/fiveoutofnine/status/1658930303019122688

qsort.py

qsort = lambda L: [] if L == [] else qsort([x for x in L[1:] if x < L[0]]) + L[0:1] + qsort([x for x in L[1:] if x >= L[0]]) # https://wiki.python.org/moin/Powerful%20Python%20One-Liners

gmeow

  /\_/\     ~gmeow~
 ( o.o )    follow @fiveoutofnine on X
  />o<\     https://x.com/fiveoutofnine

Language switcher

Counter.sol

1
// SPDX-License-Identifier: MIT
2
pragma solidity ^0.8.25;
3

4
contract Counter {
5
    uint256 public count;
6

7
    function get() public view returns (uint256) {
8
        return count;
9
    }
10

11
    function inc() public {
12
        count += 1;
13
    }
14

15
    function dec() public {
16
        count -= 1;
17
    }
18
}

To use CodeBlock in MDX, either import it or type basic Markdown syntax, which will parse the MDX and render an instance of CodeBlock. To provide props, include them after the 3 backticks and specified language.

```tsx fileName="Example.tsx" showLineNumbers={false}
const Example = () => <div />;
```

Example.tsx

const Example = () => <div />;

Button Hover Card