Code Provider

The CodeProvider component provides client-side functions for fetching source code and highlighting it. It's designed for cases where you need to render code blocks or demos based on client-side state or dynamic content loading. It also provides heavy processing functions that are moved from individual components to the context for better performance and code splitting.

CodeProvider implements the Props Context Layering pattern by providing heavy functions via context that can't be serialized across the server-client boundary.

• Client-side syntax highlighting with support for multiple languages using Starry Night
• Dynamic code fetching from external sources or APIs
• Context-based API for sharing highlighting functions across components
• Custom loading functions for different code sources
• Browser-only execution with SSR safety
• Heavy function provision for code processing (parsing, transforming, loading)

Use CodeProvider when you need:

• Dynamic code loading from external sources or APIs
• Client-side code highlighting without build-time optimization
• Custom code fetching logic for different data sources
• Shared highlighting context across multiple components

Note

If you need interactive code editing with shared state management, use the CodeControllerContext instead.

The simplest way to use CodeProvider is to wrap components that need client-side highlighting:

Base Code Provider

console.log('Hello, world!');

import * as React from 'react';
import { CodeProvider } from '@mui/internal-docs-infra/CodeProvider';
import { Code } from './CodeBlock';

export function BasicCode() {
  return (
    <CodeProvider>
      <Code fileName="example.js">{`console.log('Hello, world!');`}</Code>
    </CodeProvider>
  );
}

Fetch Demo Code Provider

For more dynamic use cases, you can provide custom loading functions that fetch code from external sources:

CodeProvider works seamlessly with CodeHighlighter for dynamic content:

import { CodeProvider } from '@mui/internal-docs-infra/CodeProvider';
import { CodeHighlighter } from '@mui/internal-docs-infra/CodeHighlighter';
import { CodeContent } from './CodeContent';

function DynamicCodeExample() {
  return (
    <CodeProvider>
      <CodeHighlighter Content={CodeContent}>{`console.log("Dynamic code!");`}</CodeHighlighter>
    </CodeProvider>
  );
}

You can provide custom functions for loading code from different sources:

import { CodeProvider } from '@mui/internal-docs-infra/CodeProvider';
import type { LoadCodeMeta, LoadSource } from '@mui/internal-docs-infra/CodeHighlighter';

const loadCodeFromApi: LoadCodeMeta = async (url: string) => {
  const response = await fetch(`/api/code/${encodeURIComponent(url)}`);
  return response.json();
};

const loadSourceFromGitHub: LoadSource = async (url: string) => {
  const response = await fetch(url.replace('file://', 'https://raw.githubusercontent.com/'));
  const source = await response.text();
  return { source };
};

function MyApp() {
  return (
    <CodeProvider loadCodeMeta={loadCodeFromApi} loadSource={loadSourceFromGitHub}>
      {/* Your components */}
    </CodeProvider>
  );
}

LoadCodeMeta | undefined

LoadSource | undefined

LoadVariantMeta | undefined

SourceEnhancer[] | undefined

React.ReactNode

1. Wrap at the appropriate level - Place CodeProvider high enough to cover all components that need highlighting
2. Handle loading states - Remember that highlighting is async, so provide loading feedback
3. Use for dynamic content - CodeProvider is perfect for code that can't be precomputed
4. Consider performance - For static content, precomputed demos are faster
5. Handle errors gracefully - Custom loading functions should include proper error handling

Highlighting not working:

• Ensure components are wrapped in CodeProvider
• Check browser console for loading errors
• Verify that code is being processed client-side

Performance issues:

• Consider using precomputed demos for static content
• Implement loading states for better UX
• Cache loaded code when possible

SSR errors:

• CodeProvider automatically handles SSR safety
• Use forceClient on CodeHighlighter when needed
• Ensure custom loading functions handle server/client differences