Code Block

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

// Minimal version for display purposes.
const CodeBlock: FC = () => {
  return (
    <CodeBlockContainer>
      <CodeBlockHeader />
      <pre>
        <Code />
      </pre>
    </CodeBlockContainer>
  );
};

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 (opens in a new tab), 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