feat: add native markdown parsing support with parseHTML

- Add parseHTML utility to natively parse markdown with code blocks
- CodeView now automatically detects and renders markdown content
- Split CodeView into CodeViewInternal and wrapper for proper hooks usage
- Add useNativeParser option to unplugin (default: true)
- Generate CodeView components in unplugin native parser mode
- Add vite example with both runtime and build-time parsing demos
- Update README with markdown parsing examples and documentation
- Add MarkdownExample to docs site
- Create demo.md and unplugin-demo.md examples
- Simplify unplugin documentation to focus on default native parser mode

Benefits:
- Zero config markdown parsing at runtime
- Consistent behavior between runtime and build-time
- Smaller bundle size (no pre-rendered HTML)
- Type-safe imports with unplugin
- Backward compatible with existing code

Author: simonguo

README.md

@@ -12,10 +12,11 @@ A React component library for rendering code with **live preview** and syntax hi
 
 - 🎨 **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
+- 📝 **Native Markdown Parsing** - Parse and render markdown with embedded code blocks at runtime
 - 🔌 **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,6 +38,8 @@ yarn add react-code-view
 
 ## 🚀 Quick Start
 
+### Basic Code Preview
+
 ```tsx
 import CodeView from 'react-code-view';
 import 'react-code-view/styles';
@@ -60,6 +63,45 @@ function App() {
 }
 ```
 
+### Markdown with Code Blocks (New!)
+
+CodeView now supports **native markdown parsing** - no build configuration needed!
+
+```tsx
+import CodeView from 'react-code-view';
+import markdown from './example.md?raw'; // Import as raw text
+
+function App() {
+  return (
+    <CodeView dependencies={{ useState: React.useState }}>
+      {markdown}
+    </CodeView>
+  );
+}
+```
+
+Your markdown file (`example.md`):
+
+```markdown
+# Interactive Example
+
+Here's a live counter component:
+
+<!--start-code-->
+\`\`\`jsx
+function Counter() {
+  const [count, setCount] = useState(0);
+  return <button onClick={() => setCount(count + 1)}>Count: {count}</button>;
+}
+render(<Counter />);
+\`\`\`
+<!--end-code-->
+
+More markdown content here...
+```
+
+The code blocks are automatically extracted and rendered as interactive components!
+
 ## 📚 Packages
 
 This monorepo contains the following packages:
@@ -73,7 +115,37 @@ 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).
+
+The plugin uses **native parseHTML** by default, generating CodeView components that parse markdown at runtime:
+
+```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() // Uses native parseHTML by default
+  ]
+});
+```
+
+Then import markdown files directly:
+
+```tsx
+import Demo from './example.md';
+
+<Demo dependencies={{ useState: React.useState }} theme="rcv-theme-default" />
+```
+
+**Benefits:**
+- ✅ Consistent with runtime `parseHTML` behavior
+- ✅ Interactive code blocks automatically rendered
+- ✅ Smaller bundle size (no pre-rendered HTML)
+- ✅ Type-safe imports from build tools
 
 ### Vite
 
@@ -149,18 +221,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
 

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

docs/components/Sidebar.tsx

@@ -44,6 +44,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' },
       ]
     }

docs/index.tsx

@@ -24,6 +24,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();
@@ -71,6 +72,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>

docs/pages/examples/MarkdownExample.tsx

@@ -0,0 +1,66 @@
+import React from 'react';
+import { Section } from '../../components/Section';
+import { CodeView } from '@react-code-view/react';
+import demoMarkdown from './demo.md?raw';
+
+interface MarkdownExampleProps {
+  theme: string;
+}
+
+export const MarkdownExample: React.FC<MarkdownExampleProps> = ({ theme }) => {
+  return (
+    <div className="page-content">
+      <Section id="markdown" title="Markdown with Code Blocks">
+        <p>
+          CodeView natively supports parsing markdown files with embedded code blocks.
+          Use <code>&lt;!--start-code--&gt;</code> and <code>&lt;!--end-code--&gt;</code> 
+          comments to mark executable code sections.
+        </p>
+
+        <div className="example-demo">
+          <CodeView
+            theme={theme}
+            dependencies={{ useState: React.useState }}
+          >
+            {demoMarkdown}
+          </CodeView>
+        </div>
+
+        <h3>How it works</h3>
+        <ul>
+          <li>Import markdown files as raw strings</li>
+          <li>CodeView automatically detects and parses code blocks marked with special comments</li>
+          <li>Markdown content is rendered between code blocks</li>
+          <li>Code blocks are fully interactive and editable</li>
+          <li>Perfect for documentation with live examples</li>
+        </ul>
+
+        <h3>Markdown syntax</h3>
+        <pre style={{ 
+          background: '#f6f8fa', 
+          padding: '16px', 
+          borderRadius: '6px',
+          overflow: 'auto'
+        }}>
+{`# Your Markdown Content
+
+Regular markdown text here...
+
+<!--start-code-->
+\`\`\`jsx
+import React from 'react';
+
+function MyComponent() {
+  return <div>Interactive code!</div>;
+}
+
+render(<MyComponent />);
+\`\`\`
+<!--end-code-->
+
+More markdown content...`}
+        </pre>
+      </Section>
+    </div>
+  );
+};