Syntax highlight example

That's a demo of a syntax highlighting in code blocks.
Uses prismjs under the hood.

(Code is random)

import { SnackbarProvider } from 'notistack';
import { Editor, Header, StoreProvider } from '../components';
import MessageSnackbar from '../components/Message';

export default function Hoot() {
  return (
    <StoreProvider>
      <SnackbarProvider
        preventDuplicate
        maxSnack={10}
      >
        <Header />
        <Editor />
      </SnackbarProvider>
    </StoreProvider>
  );
}

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  @font-face {
    font-family: "Source Code Pro";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("/fonts/Source-Code-Pro-Regular.woff2") format("woff2");
  }
}

export default function createContext<T>() {
  const context = React.createContext<T | null>(null);

  function useContext() {
    const c = React.useContext(context);
    if (!c)
      throw new Error('useContext must be within a Provider with a value');
    return c;
  }

  return {useContext, Provider: context.Provider};
}