$ show simonguo/react-code-view
React Code View is a React component library for rendering code with live preview and syntax highlighting. It provides a CodeView component that combines an editable code editor, live preview, and syntax highlighting, allowing developers to create interactive code examples. The library includes build tool plugins (unplugin) for Vite, Webpack, Rollup, esbuild, and Rspack that enable importing markdown files as React components with automatic code block processing. At its core, it uses Sucrase for JSX/TS transformation, Shiki for syntax highlighting, and CodeMirror 6 for the editing experience, with code execution happening in a sandboxed environment.
The LLM identified 4 files worth highlighting for reuse:
Provides Shiki-based syntax highlighting with lazy initialization, language alias mapping, and graceful fallback to plain text highlighting on error. Demonstrates efficient resource initialization and error resilience patterns.
Manages code execution lifecycle with dependency injection, transformation pipelines (before/after compile), and error handling. Captures rendered output through a custom render function. Shows advanced React hook patterns for managing side effects and state.
Parses HTML content to extract executable code blocks marked with special comments while preserving surrounding markdown. Handles markdown code fence stripping and returns structured fragments. Demonstrates robust string parsing and content transformation techniques.
Collection of pure utility functions for plugin development including options normalization, file filtering logic, extension extraction, and identifier validation. Represents well-encapsulated, dependency-free utilities applicable to any build tool plugin.