MUI Docs Infra

Warning

This is an internal project, and is not intended for public use. No support or stability guarantees are provided.

Benchmarking Code Highlighter

This demo showcases the performance of the CodeHighlighter component when handling large code snippets. It uses RSC to highlight the code.

import * as React from 'react';
import { createParseSource } from '@mui/internal-docs-infra/pipeline/parseSource';
import { CodeHighlighter } from '@mui/internal-docs-infra/CodeHighlighter';

import { CodeContent } from './CodeContent';
import { CodeContentLoading } from './CodeContentLoading';

import code from './snippet';

const sourceParser = createParseSource();

export default function Page() {
  return (
    <CodeHighlighter
      Content={CodeContent}
      ContentLoading={CodeContentLoading}
      sourceParser={sourceParser}
      fileName="large-file.js"
    >
      {code}
    </CodeHighlighter>
  );
}

See Setup