Step-by-Step Guide: Implement Syntax Highlighting for Markdown Editor with Prism 1.30 and React 19

// Step 1: Initialize React 19 project and install dependencies
// Run these commands in your terminal:
// npm create vite@latest react-prism-md-editor -- --template react
// cd react-prism-md-editor
// npm install prismjs@1.30.0 unified@11 remark@16 remark-parse@11 remark-rehype@13 rehype-stringify@10

import React, { useState, useRef, useEffect, useCallback } from 'react';
import { createRoot } from 'react-dom/client';
import prism from 'prismjs';
// Import base Prism core and common languages (tree-shaken in 1.30+)
import 'prismjs/components/prism-javascript';
import 'prismjs/components/prism-typescript';
import 'prismjs/components/prism-jsx';
import 'prismjs/components/prism-tsx';
import 'prismjs/components/prism-css';
import 'prismjs/components/prism-python';
import 'prismjs/themes/prism-tomorrow.css'; // Dark theme for highlighting

import { unified } from 'unified';
import remarkParse from 'remark-parse';
import remarkRehype from 'remark-rehype';
import rehypeStringify from 'rehype-stringify';
import rehypePrism from 'rehype-prism-plus'; // Prism integration for rehype

const MARKDOWN_EXAMPLE = `// Sample Markdown with code blocks
# Hello Prism + React 19

This is a **code block**:

\`\`\`typescript
const greet = (name: string): string => {
  return \`Hello, \${name}!\`;
};
\`\`\`

And a Python block:

\`\`\`python
def add(a: int, b: int) -> int:
    return a + b
\`\`\`
`;

const App = () => {
  const [markdown, setMarkdown] = useState(MARKDOWN_EXAMPLE);
  const [renderedHtml, setRenderedHtml] = useState('');
  const [error, setError] = useState(null);
  const parseController = useRef(null);

  // Memoized markdown parser to avoid unnecessary re-parses
  const parseMarkdown = useCallback(async (md) => {
    // Cancel any in-flight parse requests to avoid race conditions
    if (parseController.current) {
      parseController.current.abort();
    }
    const controller = new AbortController();
    parseController.current = controller;

    try {
      const processor = unified()
        .use(remarkParse)
        .use(remarkRehype)
        .use(rehypePrism, { 
          // Only load languages we imported earlier (tree-shaking)
          ignoreMissing: true 
        })
        .use(rehypeStringify);

      const result = await processor.process(md);
      setRenderedHtml(String(result));
      setError(null);
    } catch (err) {
      if (err.name !== 'AbortError') {
        console.error('Markdown parse failed:', err);
        setError(`Failed to parse markdown: ${err.message}`);
        setRenderedHtml('');
      }
    }
  }, []);

  // Initial parse and re-parse on markdown change
  useEffect(() => {
    parseMarkdown(markdown);
    return () => {
      if (parseController.current) {
        parseController.current.abort();
      }
    };
  }, [markdown, parseMarkdown]);

  return (
    <div className=\"editor-container\">
      <div className=\"editor-pane\">
        <h2>Markdown Input</h2>
        <textarea
          className=\"md-input\"
          value={markdown}
          onChange={(e) => setMarkdown(e.target.value)}
          placeholder=\"Write Markdown here...\"
        />
        {error && <div className=\"error-banner\">{error}</div>}
      </div>
      <div className=\"preview-pane\">
        <h2>Rendered Preview</h2>
        <div 
          className=\"md-preview\" 
          dangerouslySetInnerHTML={{ __html: renderedHtml }} 
        />
      </div>
    </div>
  );
};

// Mount React 19 root
const container = document.getElementById('root');
const root = createRoot(container);
root.render(<App />);

// Step 2: Optimize with React 19 Concurrent Features and Dynamic Language Loading
// Add these imports at the top of your file
import { useDeferredValue, useTransition } from 'react';

// Extended component with concurrent rendering and dynamic language loading
const OptimizedApp = () => {
  const [markdown, setMarkdown] = useState(MARKDOWN_EXAMPLE);
  const [renderedHtml, setRenderedHtml] = useState('');
  const [error, setError] = useState(null);
  const [isPending, startTransition] = useTransition();
  // Defer preview updates to avoid blocking input typing
  const deferredMarkdown = useDeferredValue(markdown);
  const parseController = useRef(null);
  const loadedLanguages = useRef(new Set(['javascript', 'typescript', 'jsx', 'tsx', 'css', 'python']));

  // Dynamic language loader for Prism 1.30 (tree-shaken, only load what's needed)
  const loadPrismLanguage = useCallback(async (lang) => {
    if (loadedLanguages.current.has(lang)) return;
    try {
      // Prism 1.30 supports dynamic imports for components
      await import(`prismjs/components/prism-${lang}`);
      loadedLanguages.current.add(lang);
    } catch (err) {
      console.warn(`Failed to load Prism language: ${lang}`, err);
      throw new Error(`Unsupported language: ${lang}`);
    }
  }, []);

  // Optimized parse function using startTransition for non-urgent updates
  const parseMarkdown = useCallback(async (md) => {
    if (parseController.current) {
      parseController.current.abort();
    }
    const controller = new AbortController();
    parseController.current = controller;

    startTransition(async () => {
      try {
        // Extract code block languages from markdown to preload only needed grammars
        const langRegex = /```
{% endraw %}
(\w+)/g;
        const matches = [...md.matchAll(langRegex)];
        const langs = [...new Set(matches.map(m => m[1]))];

        // Load all required languages concurrently
        await Promise.all(langs.map(lang => loadPrismLanguage(lang)));

        const processor = unified()
          .use(remarkParse)
          .use(remarkRehype)
          .use(rehypePrism, { 
            ignoreMissing: true,
            // Only highlight languages we've loaded
            languages: Array.from(loadedLanguages.current)
          })
          .use(rehypeStringify);

        const result = await processor.process(md);
        setRenderedHtml(String(result));
        setError(null);
      } catch (err) {
        if (err.name !== 'AbortError') {
          console.error('Optimized parse failed:', err);
          setError({% raw %}`Failed to parse markdown: ${err.message}`{% endraw %});
          setRenderedHtml('');
        }
      }
    });
  }, [loadPrismLanguage, startTransition]);

  useEffect(() => {
    parseMarkdown(deferredMarkdown);
    return () => {
      if (parseController.current) {
        parseController.current.abort();
      }
    };
  }, [deferredMarkdown, parseMarkdown]);

  return (
    <div className=\"editor-container\">
      <div className=\"editor-pane\">
        <h2>Markdown Input {isPending && <span className=\"pending-badge\">Updating...</span>}</h2>
        <textarea
          className=\"md-input\"
          value={markdown}
          onChange={(e) => setMarkdown(e.target.value)}
          placeholder=\"Write Markdown here...\"
        />
        {error && <div className=\"error-banner\">{error}</div>}
      </div>
      <div className=\"preview-pane\">
        <h2>Rendered Preview</h2>
        <div 
          className=\"md-preview\" 
          dangerouslySetInnerHTML={{ __html: renderedHtml }} 
        />
      </div>
    </div>
  );
};
{% raw %}

javascript
// Step 3: Production-Ready Editor with Error Boundaries and Copy Buttons
import { Component, createContext, useContext } from 'react';

// Error Boundary to catch rendering errors from Prism/highlighting
class SyntaxErrorBoundary extends Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false, error: null };
  }

  static getDerivedStateFromError(error) {
    return { hasError: true, error };
  }

  componentDidCatch(error, errorInfo) {
    console.error('Syntax highlighting error:', error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      return (
        <div className=\"error-boundary\">
          <h3>Syntax Highlighting Failed</h3>
          <p>{this.state.error?.message || 'Unknown error'}</p>
          <button onClick={() => this.setState({ hasError: false, error: null })}>
            Retry
          </button>
        </div>
      );
    }
    return this.props.children;
  }
}

// Theme context for dark/light mode toggle
const ThemeContext = createContext('dark');

const ProductionApp = () => {
  const [markdown, setMarkdown] = useState(MARKDOWN_EXAMPLE);
  const [renderedHtml, setRenderedHtml] = useState('');
  const [error, setError] = useState(null);
  const [isPending, startTransition] = useTransition();
  const deferredMarkdown = useDeferredValue(markdown);
  const parseController = useRef(null);
  const loadedLanguages = useRef(new Set(['javascript', 'typescript', 'jsx', 'tsx', 'css', 'python']));
  const [theme, setTheme] = useContext(ThemeContext);
  const previewRef = useRef(null);

  // Load theme dynamically based on user preference
  useEffect(() => {
    const link = document.createElement('link');
    link.rel = 'stylesheet';
    link.href = theme === 'dark' 
      ? 'https://cdn.jsdelivr.net/npm/prismjs@1.30.0/themes/prism-tomorrow.min.css'
      : 'https://cdn.jsdelivr.net/npm/prismjs@1.30.0/themes/prism.min.css';
    document.head.appendChild(link);
    return () => document.head.removeChild(link);
  }, [theme]);

  // Add copy buttons to code blocks after render
  useEffect(() => {
    if (!previewRef.current) return;
    const codeBlocks = previewRef.current.querySelectorAll('pre code');
    codeBlocks.forEach((block) => {
      if (block.parentElement.querySelector('.copy-btn')) return;
      const btn = document.createElement('button');
      btn.className = 'copy-btn';
      btn.textContent = 'Copy';
      btn.addEventListener('click', async () => {
        try {
          await navigator.clipboard.writeText(block.textContent);
          btn.textContent = 'Copied!';
          setTimeout(() => btn.textContent = 'Copy', 2000);
        } catch (err) {
          console.error('Copy failed:', err);
          btn.textContent = 'Error';
        }
      });
      block.parentElement.appendChild(btn);
    });
  }, [renderedHtml]);

  // Dynamic language loader (same as before)
  const loadPrismLanguage = useCallback(async (lang) => {
    if (loadedLanguages.current.has(lang)) return;
    try {
      await import(`prismjs/components/prism-${lang}`);
      loadedLanguages.current.add(lang);
    } catch (err) {
      console.warn(`Failed to load Prism language: ${lang}`, err);
    }
  }, []);

  // Parse markdown (same as previous example)
  const parseMarkdown = useCallback(async (md) => {
    if (parseController.current) {
      parseController.current.abort();
    }
    const controller = new AbortController();
    parseController.current = controller;

    startTransition(async () => {
      try {
        const langRegex = /

```(\w+)/g;
        const matches = [...md.matchAll(langRegex)];
        const langs = [...new Set(matches.map(m => m[1]))];
        await Promise.all(langs.map(lang => loadPrismLanguage(lang)));

        const processor = unified()
          .use(remarkParse)
          .use(remarkRehype)
          .use(rehypePrism, { 
            ignoreMissing: true,
            languages: Array.from(loadedLanguages.current)
          })
          .use(rehypeStringify);

        const result = await processor.process(md);
        setRenderedHtml(String(result));
        setError(null);
      } catch (err) {
        if (err.name !== 'AbortError') {
          console.error('Optimized parse failed:', err);
          setError(`Failed to parse markdown: ${err.message}`);
          setRenderedHtml('');
        }
      }
    });
  }, [loadPrismLanguage, startTransition]);

  useEffect(() => {
    parseMarkdown(deferredMarkdown);
    return () => parseController.current?.abort();
  }, [deferredMarkdown, parseMarkdown]);

  return (
    <ThemeContext.Provider value={[theme, setTheme]}>
      <SyntaxErrorBoundary>
        <div className=\"editor-container\">
          <header className=\"editor-header\">
            <h1>React 19 + Prism 1.30 Markdown Editor</h1>
            <button 
              className=\"theme-toggle\"
              onClick={() => setTheme(prev => prev === 'dark' ? 'light' : 'dark')}
            >
              Toggle {theme === 'dark' ? 'Light' : 'Dark'} Mode
            </button>
          </header>
          <div className=\"editor-pane\">
            <h2>Markdown Input {isPending && <span className=\"pending-badge\">Updating...</span>}</h2>
            <textarea
              className=\"md-input\"
              value={markdown}
              onChange={(e) => setMarkdown(e.target.value)}
              placeholder=\"Write Markdown here...\"
            />
            {error && <div className=\"error-banner\">{error}</div>}
          </div>
          <div className=\"preview-pane\">
            <h2>Rendered Preview</h2>
            <div 
              className=\"md-preview\" 
              ref={previewRef}
              dangerouslySetInnerHTML={{ __html: renderedHtml }} 
            />
          </div>
        </div>
      </SyntaxErrorBoundary>
    </ThemeContext.Provider>
  );
};

// Track loaded languages with WeakMap to avoid global leaks
const languageCache = new WeakMap();

const loadLanguage = async (lang, componentRef) => {
  if (!languageCache.has(componentRef)) {
    languageCache.set(componentRef, new Set());
  }
  const loaded = languageCache.get(componentRef);
  if (loaded.has(lang)) return;
  await import(`prismjs/components/prism-${lang}`);
  loaded.add(lang);
};

const CopyButton = ({ language }) => {
  const id = useId(); // React 19 stable useId
  return (
    <button 
      aria-label={`Copy ${language} code block`}
      id={`copy-btn-${id}`}
      className=\"copy-btn\"
      onClick={() => { /* copy logic */ }}
    >
      Copy
    </button>
  );
};

import { Bench } from 'tinybench';

const bench = new Bench({ time: 1000 });
bench.add('Prism 1.30 parse', async () => {
  await unified()
    .use(remarkParse)
    .use(remarkRehype)
    .use(rehypePrism)
    .use(rehypeStringify)
    .process(markdown);
});
await bench.run();
console.log(bench.table());

react-prism-md-editor/
├── src/
│   ├── components/
│   │   ├── Editor.jsx
│   │   ├── ErrorBoundary.jsx
│   │   └── CopyButton.jsx
│   ├── utils/
│   │   ├── prismLoader.js
│   │   └── markdownParser.js
│   ├── App.jsx
│   ├── index.jsx
│   └── styles.css
├── public/
│   └── index.html
├── package.json
├── vite.config.js
└── README.md