simonguo · simonguo · Dec 30, 2025 · Dec 29, 2025 · Dec 30, 2025 · Dec 30, 2025
diff --git a/README.md b/README.md
@@ -6,16 +6,19 @@
 
 A React component library for rendering code with **live preview** and syntax highlighting.
 
+**✨ Highlight:** Import `.md` files as React components - write markdown, get interactive demos instantly!
+
 [Docs](https://react-code-view-rsuite.vercel.app/)
 
 ## ✨ Features
 
+- 📝 **Native Markdown Parsing** - Import `.md` files and render embedded code blocks as interactive components
 - 🎨 **Live Preview** - Execute and preview React code in real-time
 - ✏️ **Editable Code** - Built-in code editor with syntax highlighting
-- 📝 **Markdown Support** - Render markdown content with code blocks
 - 🔌 **Universal Plugin** - Works with Webpack, Vite, Rollup, esbuild, and Rspack
 - 🎯 **TypeScript** - Full TypeScript support out of the box
 - 📦 **Tree-shakeable** - Import only what you need
+- ⚡ **Zero Config** - Works out of the box with sensible defaults
 
 ## ✅ Requirements
 
@@ -37,27 +40,95 @@ yarn add react-code-view
 
 ## 🚀 Quick Start
 
+### ⭐ Import Markdown as React Components
+
+The most convenient way - configure once, use everywhere!
+
+**1. Configure your build tool** (Vite example):
+
+```js
+// vite.config.js
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import reactCodeView from '@react-code-view/unplugin/vite';
+
+export default defineConfig({
+  plugins: [
+    react(),
+    reactCodeView() // That's it!
+  ]
+});
+```
+
+**2. Create your markdown file** (`demo.md`):
+
+```markdown
+# Interactive Counter
+
+Here's a live counter component:
+
+<!--start-code-->
+\`\`\`jsx
+function Counter() {
+  const [count, setCount] = useState(0);
+  return (
+    <button onClick={() => setCount(count + 1)}>
+      Clicked {count} times
+    </button>
+  );
+}
+render(<Counter />);
+\`\`\`
+<!--end-code-->
+
+The code above is **fully interactive**!
+```
+
+**3. Import and use like any React component**:
+
 ```tsx
-import CodeView from 'react-code-view';
-import 'react-code-view/styles';
+import Demo from './demo.md';
 
 function App() {
-  const code = `
+  return <Demo />;
+}
+```
+
+**That's it!** 🎉 Your markdown is now a React component with:
+- ✅ Live, interactive code blocks
+- ✅ Automatic syntax highlighting
+- ✅ Type-safe imports
+- ✅ Full TypeScript support
+
+### Alternative: Runtime Parsing (No Build Config)
+
+If you prefer not to configure a build tool:
+
+```tsx
+import CodeView from 'react-code-view';
+import markdown from './demo.md?raw';
+
+<CodeView dependencies={{ useState: React.useState }}>
+  {markdown}
+</CodeView>
+```
+
+### Basic Code Preview
+
+For simple code snippets without markdown:
+
+```tsx
+import CodeView from 'react-code-view';
+
+const code = `
 <button onClick={() => alert('Hello!')}>
   Click me
 </button>
-  `.trim();
+`;
 
-  return (
-    <CodeView 
-      language="jsx"
-      editable
-      renderPreview
-    >
-      {code}
-    </CodeView>
-  );
-}
+<CodeView language="jsx" editable renderPreview>
+  {code}
+</CodeView>
 ```
 
 ## 📚 Packages
@@ -73,7 +144,30 @@ This monorepo contains the following packages:
 
 ## 🔧 Build Tool Integration
 
-React Code View supports all major build tools through [unplugin](https://github.com/unjs/unplugin):
+React Code View supports all major build tools through [unplugin](https://github.com/unjs/unplugin).
+
+Once configured, you can **import `.md` files as React components** - the most convenient way to create interactive documentation!
+
+**Why this is amazing:**
+- 📝 Write markdown files with code examples
+- 🎯 Import them like regular React components
+- ⚡ Get live, interactive demos automatically
+- 🔒 Full TypeScript support and type safety
+- 🎨 Pass props like `theme`, `dependencies`, etc.
+
+**Example:**
+
+```tsx
+import Demo from './example.md';
+
+function App() {
+  return (
+    <div>
+      <Demo theme="rcv-theme-dark" />
+    </div>
+  );
+}
+```
 
 ### Vite
 
@@ -149,18 +243,22 @@ module.exports = {
 
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
-| `children` | `string` | - | Source code to display |
-| `dependencies` | `object` | `{}` | Dependencies for code execution |
+| `children` | `string` | - | Source code or markdown content to display |
+| `dependencies` | `object` | `{}` | Dependencies for code execution (e.g., `{ useState: React.useState }`) |
 | `language` | `string` | `'jsx'` | Syntax highlighting language |
 | `editable` | `boolean` | `true` | Enable code editing |
 | `renderPreview` | `boolean` | `true` | Show live preview |
 | `showLineNumbers` | `boolean` | `true` | Show line numbers |
 | `showCopyButton` | `boolean` | `true` | Show copy button |
+| `defaultShowCode` | `boolean` | `false` | Initially show code section |
 | `theme` | `string` | `'rcv-theme-default'` | Theme class name |
 | `beforeCompile` | `function` | - | Transform code before compile |
 | `afterCompile` | `function` | - | Transform code after compile |
 | `onChange` | `function` | - | Callback when code changes |
 | `onError` | `function` | - | Callback when error occurs |
+| `emptyPreviewContent` | `ReactNode` | - | Content to display when preview is empty |
+
+**Note:** When `children` contains markdown with `<!--start-code-->` markers, CodeView automatically parses and renders code blocks as interactive components.
 
 ### Other Components
 

diff --git a/RELEASE_NOTES_v3.0.0.md b/RELEASE_NOTES_v3.0.0.md
@@ -0,0 +1,84 @@
+# Release Notes — v3.0.0 (2025-12-29)
+
+A major overhaul that migrates `react-code-view` into a PNPM/Turbo monorepo, unifies build integrations, and refreshes the API/docs. This release is **breaking** compared to 2.6.1. Usage examples below follow the latest README/docs.
+
+## Highlights
+- Monorepo migration with PNPM + Turbo; updated CI (Node 18+, caching, docs from `docs/dist`).
+- Unified build plugin: new `@react-code-view/unplugin` for Vite/Webpack/Rollup/esbuild/Rspack.
+- Imports simplified: `CodeView` is the default export from `@react-code-view/react`; re-exported via `react-code-view` if needed.
+- Styles streamlined: use `import '@react-code-view/react/styles/index.css'` (CSS). Legacy Less entries removed.
+- `useCodeExecution` stabilized: stable `execute` ref and `updateCode` alias; hook examples refreshed.
+- Docs rewritten (installation, usage, migration) and Changesets added for versioning.
+
+## Breaking Changes
+- **Tooling requirements:** Node >= 18, PNPM >= 8 (dev workflow). Update CI to match.
+- **Imports:** Prefer `import CodeView from 'react-code-view'`; adjust named imports if you targeted old paths.
+- **Styles:** Switch to CSS entries: `import 'react-code-view/styles'` (or specific CSS files). Remove Less imports.
+- **Build integration:** Legacy `webpack-md-loader` removed. Use the unified unplugin instead.
+
+## Migration Guide (v2.6.1 → v3.0.0)
+Use `@react-code-view/react` as the primary entry and the new unplugin across bundlers.
+
+1) **Install**
+   ```bash
+   pnpm add @react-code-view/react @react-code-view/unplugin
+   ```
+
+2) **Imports**
+   ```tsx
+   import CodeView from '@react-code-view/react';
+   import { Renderer, MarkdownRenderer } from '@react-code-view/react';
+   // (Optional) re-exported convenience:
+   // import CodeView from 'react-code-view';
+   ```
+
+3) **Styles (CSS)**
+   ```tsx
+   import '@react-code-view/react/styles/index.css';
+   ```
+
+4) **Build plugin (Vite example)**
+   ```js
+   // vite.config.js
+   import { defineConfig } from 'vite';
+   import react from '@vitejs/plugin-react';
+   import reactCodeView from '@react-code-view/unplugin/vite';
+
+   export default defineConfig({
+     plugins: [react(), reactCodeView()]
+   });
+   ```
+   Webpack: `@react-code-view/unplugin/webpack`  
+   Rollup: `@react-code-view/unplugin/rollup`  
+   esbuild: `@react-code-view/unplugin/esbuild`  
+   Rspack: `@react-code-view/unplugin/rspack`
+
+5) **Hook usage (`useCodeExecution`)**
+   ```tsx
+   import { useCodeExecution } from '@react-code-view/react';
+
+   const { element, error, code, updateCode, execute } = useCodeExecution(
+     initialCode,
+     {
+       dependencies: { Button },
+       transformOptions: { transforms: ['typescript', 'jsx'] },
+       beforeCompile: (c) => c.trim(),
+       afterCompile: (c) => c,
+       onError: (e) => console.error('Execution error:', e)
+     }
+   );
+   ```
+
+6) **Remove legacy `webpack-md-loader`**
+   - Replace with the unified unplugin (see entries above).
+
+## Feature Details
+- Monorepo structure with Changesets-driven versioning and consistent lint/format configs.
+- `useCodeExecution` stability improvements and docs examples (matches latest README snippets).
+- README/docs updated for new package layout, usage, and migration steps.
+- CI updated to use PNPM via Corepack; gh-pages publishes `docs/dist`.
+
+## Links
+- PR: https://github.com/simonguo/react-code-view/pull/59
+- npm v3.0.0: https://www.npmjs.com/package/react-code-view/v/3.0.0
+- v2.6.1 (previous): https://www.npmjs.com/package/react-code-view/v/2.6.1
diff --git a/docs/components/Sidebar.tsx b/docs/components/Sidebar.tsx
@@ -13,7 +13,6 @@ export const Sidebar: React.FC = () => {
       title: 'Getting Started',
       items: [
         { path: '/', label: 'Overview' },
-        { path: '/installation', label: 'Installation' },
         { path: '/quick-start', label: 'Quick Start' },
       ]
     },
@@ -44,6 +43,7 @@ export const Sidebar: React.FC = () => {
         { path: '/examples/typescript', label: 'TypeScript' },
         { path: '/examples/theme', label: 'Theme Switcher' },
         { path: '/examples/components', label: 'Custom Components' },
+        { path: '/examples/markdown', label: 'Markdown with Code' },
         { path: '/examples/use-code-execution', label: 'useCodeExecution' },
       ]
     }

diff --git a/docs/index.tsx b/docs/index.tsx
@@ -11,7 +11,6 @@ import { Sidebar } from './components/Sidebar';
 
 // Pages
 import { OverviewPage } from './pages/OverviewPage';
-import { InstallationPage } from './pages/InstallationPage';
 import { QuickStartPage } from './pages/QuickStartPage';
 import { ComponentsPage } from './pages/ComponentsPage';
 import { BuildToolsPage } from './pages/BuildToolsPage';
@@ -24,6 +23,7 @@ import { TypeScriptExample } from './pages/examples/TypeScriptExample';
 import { ThemeExample } from './pages/examples/ThemeExample';
 import { ComponentsExample } from './pages/examples/ComponentsExample';
 import { UseCodeExecutionExample } from './pages/examples/UseCodeExecutionExample';
+import { MarkdownExample } from './pages/examples/MarkdownExample';
 
 // Pre-initialize Shiki for faster first render
 initHighlighter();
@@ -60,7 +60,6 @@ const App: React.FC = () => {
           <main className="docs-main">
             <Routes>
               <Route path="/" element={<OverviewPage theme={theme} />} />
-              <Route path="/installation" element={<InstallationPage theme={theme} />} />
               <Route path="/quick-start" element={<QuickStartPage theme={theme} />} />
               <Route path="/components/:component" element={<ComponentsPage theme={theme} />} />
               <Route path="/components/use-code-execution" element={<UseCodeExecutionPage theme={theme} />} />
@@ -71,6 +70,7 @@ const App: React.FC = () => {
               <Route path="/examples/theme" element={<ThemeExample theme={theme} />} />
               <Route path="/examples/components" element={<ComponentsExample theme={theme} />} />
               <Route path="/examples/use-code-execution" element={<UseCodeExecutionExample theme={theme} />} />
+              <Route path="/examples/markdown" element={<MarkdownExample theme={theme} />} />
             </Routes>
           </main>
         </div>