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: FC = () => {
3
  return (
4
    <CodeBlockContainer>
5
      <CodeBlockHeader />
6
      <pre>
7
        <Code />
8
      </pre>
9
    </CodeBlockContainer>
10
  );
11
};

No filename

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

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

Hide line numbers

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

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

Highlight lines

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

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

Flat top

counter.tsx

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

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

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

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

Supported languages

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://twitter.com/mattpocockuk/status/1672165377634103298

counter.jsx

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

button.tsx

const Button: 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://twitter.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 twitter
  />o<\     https://twitter.com/fiveoutofnine

Usage via MDX

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