FairGarden Docs

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 '@fairgarden/docs/pipeline/parseSource';
import { CodeHighlighter } from '@fairgarden/docs/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>
  );
}