{"_id":"@azizul7m/markdown-renderer","name":"@azizul7m/markdown-renderer","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"@azizul7m/markdown-renderer","version":"1.0.0","description":"A small React Markdown renderer with built-in color scheme support, headings, links, lists, tables, and generated anchors.","author":{"name":"Azizul7m"},"license":"MIT","type":"module","main":"./dist/index.js","module":"./dist/index.js","types":"./dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","default":"./dist/index.js"}},"sideEffects":["./styles.css"],"scripts":{"build":"tsc -p tsconfig.json"},"keywords":["markdown","html","converter","renderer","react","color-scheme","theme","catppuccin","dracula","nord","gruvbox"],"peerDependencies":{"react":">=18"},"devDependencies":{"@types/react":"^19.0.0","typescript":">=5.0.0"},"gitHead":"b6affa7e98ec2e339178a2c208aacf628b8b4752","_id":"@azizul7m/markdown-renderer@1.0.0","_nodeVersion":"24.15.0","_npmVersion":"11.12.1","dist":{"integrity":"sha512-5GpQrsAs+GZIdVb+WHGkPq8iEgipRDKEe4eUu63xb+zfAzDE2gZJhq3a+OnV20+Ab+Y+ZZIrhJfN6jNeLmztlw==","shasum":"595df1cc9c5bdbd02dd9ccc650f912b0a0050d07","tarball":"https://registry.npmjs.org/@azizul7m/markdown-renderer/-/markdown-renderer-1.0.0.tgz","fileCount":12,"unpackedSize":39755,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIASYm0881+vAnmhSmgT3oGRH2LOomOzJ3GqdEFG7Ham0AiEAvr1+Uv+s01OxRbIq/fH1q7idVUAOKW1m5SHkuPKsX/4="}]},"_npmUser":{"name":"azizul7m","email":"azizul7m@gmail.com"},"directories":{},"maintainers":[{"name":"azizul7m","email":"azizul7m@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/markdown-renderer_1.0.0_1786875928460_0.775584716825557"},"_hasShrinkwrap":false}},"time":{"created":"2026-08-16T10:25:28.337Z","1.0.0":"2026-08-16T10:25:28.605Z","modified":"2026-08-16T10:25:28.826Z"},"maintainers":[{"name":"azizul7m","email":"azizul7m@gmail.com"}],"description":"A small React Markdown renderer with built-in color scheme support, headings, links, lists, tables, and generated anchors.","keywords":["markdown","html","converter","renderer","react","color-scheme","theme","catppuccin","dracula","nord","gruvbox"],"author":{"name":"Azizul7m"},"license":"MIT","readme":"# @azizul7m/markdown-renderer\n\n🚀 **A lightweight React markdown renderer with 9 built-in color schemes** (Catppuccin, Doom One, Nord, Dracula, Gruvbox, and more).\n\nPerfect for documentation sites, blogs, note-taking apps, and knowledge bases. Includes:\n- ✨ **9 Color Schemes** - Catppuccin, Doom One, Nord, Dracula, Gruvbox, One Dark/Light\n- 📑 **Dynamic Table of Contents** - Auto-extracted or custom\n- 🖨️ **A4 Print Support** - PDF export ready\n- ♿ **Accessible** - Semantic HTML, proper contrast\n- 🌍 **Unicode Support** - Works with any language (Bangla, Arabic, CJK, etc.)\n- 📦 **Tiny** - 7KB gzipped, zero dependencies (React peer dependency)\n\n---\n\n## 30-Second Setup\n\n### 1️⃣ Install\n\n```bash\nnpm install @azizul7m/markdown-renderer\n```\n\n### 2️⃣ Import & Use\n\n```tsx\nimport MarkdownRenderer from \"@azizul7m/markdown-renderer\";\nimport \"@azizul7m/markdown-renderer/styles.css\";\n\nexport function MyDoc({ md }: { md: string }) {\n  return <MarkdownRenderer md={md} />;\n}\n```\n\n### 3️⃣ Add Color Scheme\n\n```tsx\nimport { useEffect } from \"react\";\nimport { applyColorScheme, getColorScheme } from \"@azizul7m/markdown-renderer\";\n\nuseEffect(() => {\n  applyColorScheme(getColorScheme(\"catppuccin-frappe\"));\n}, []);\n```\n\n✅ Done! Your markdown now has beautiful styling.\n\n---\n\n## 🎨 Color Schemes\n\nChoose from **9 professionally curated themes**:\n\n### Dark Themes\n- **one-dark** — VS Code One Dark (balanced)\n- **doom-one** — Doom Emacs (high contrast)\n- **nord** — Arctic palette (cool blues)\n- **dracula** — Vibrant darks\n- **catppuccin-frappe** — Warm pastels\n- **gruvbox-dark** — Retro grooves\n\n### Light Themes\n- **one-light** — VS Code One Light (minimal)\n- **catppuccin-latte** — Soft pastels\n- **gruvbox-light** — Warm retro\n\n---\n\n## 📚 Usage Examples\n\n### Theme Switcher Component\n\n```tsx\n\"use client\";\nimport { useState, useEffect } from \"react\";\nimport MarkdownRenderer, { \n  getAllColorSchemes, \n  applyColorScheme \n} from \"@azizul7m/markdown-renderer\";\n\nexport function DocumentViewer({ md }: { md: string }) {\n  const [theme, setTheme] = useState(\"one-dark\");\n\n  const handleTheme = (name: string) => {\n    const scheme = getAllColorSchemes().find(s => s.name === name);\n    if (scheme) {\n      applyColorScheme(scheme);\n      setTheme(name);\n      localStorage.setItem(\"theme\", name);\n    }\n  };\n\n  useEffect(() => {\n    const saved = localStorage.getItem(\"theme\") || \"one-dark\";\n    handleTheme(saved);\n  }, []);\n\n  return (\n    <div>\n      <select value={theme} onChange={e => handleTheme(e.target.value)}>\n        {getAllColorSchemes().map(s => (\n          <option key={s.name} value={s.name}>\n            {s.label} {s.isDark ? \"🌙\" : \"☀️\"}\n          </option>\n        ))}\n      </select>\n      <MarkdownRenderer md={md} />\n    </div>\n  );\n}\n```\n\n### Follow System Dark Mode\n\n```tsx\nuseEffect(() => {\n  const isDark = window.matchMedia(\"(prefers-color-scheme: dark)\").matches;\n  const scheme = isDark ? \"nord\" : \"one-light\";\n  applyColorScheme(getColorScheme(scheme));\n}, []);\n```\n\n### Print to PDF\n\n```tsx\n<button onClick={() => window.print()}>🖨️ Save as PDF</button>\n<MarkdownRenderer md={markdown} />\n```\n\nAutomatically formats for A4 with proper margins, page breaks, and widow/orphan control.\n\n---\n\n## 🔧 API\n\n### Main Component\n\n```tsx\n<MarkdownRenderer \n  md={string}              // Your markdown content\n  hideTableOfContents?     // Omit auto-generated TOC\n/>\n```\n\n### Color Scheme Functions\n\n```tsx\nimport {\n  getColorScheme,           // Get scheme by name\n  getAllColorSchemes,       // Get all 9 schemes\n  applyColorScheme,         // Apply to document\n  getCurrentColorScheme,    // Get currently applied name\n  generateColorSchemeCSSVariables  // Get CSS string (SSR)\n} from \"@azizul7m/markdown-renderer\";\n```\n\n### Table of Contents\n\n```tsx\nimport { TableOfContents } from \"@azizul7m/markdown-renderer\";\n\n<TableOfContents \n  md={markdown}\n  title=\"Contents\"\n  levels={[2, 3]}  // Extract h2, h3\n/>\n```\n\n### Utilities\n\n```tsx\nimport { slugifyHeading, extractHeadings } from \"@azizul7m/markdown-renderer\";\n\nslugifyHeading(\"My Heading!\");  // \"my-heading\"\nextractHeadings(md, [2, 3]);    // Get heading objects\n```\n\n---\n\n## 📖 Supported Markdown\n\n- ✅ Headings (h2–h4; h1 hidden by default)\n- ✅ Paragraphs, **bold**, *italic*\n- ✅ Links: `[text](url)` and `[text](#anchor)`\n- ✅ Lists (unordered & numbered)\n- ✅ Tables (GitHub-flavored)\n- ✅ Horizontal rules\n- ✅ Unicode (Bangla, Arabic, CJK, etc.)\n\n---\n\n## 🎨 Customization\n\n### Use Custom CSS Variables\n\nDefine your own color scheme:\n\n```css\n:root {\n  --background: #fafafa;\n  --surface: #ffffff;\n  --surface-muted: #f0f1f2;\n  --text: #282c34;\n  --muted: #68717d;\n  --border: #d7d9dc;\n  --accent1: #4078f2;\n  --accent2: #a626a4;\n  --accent3: #e45649;\n  --accent4: #50a14f;\n  --shadow: rgba(40, 44, 52, 0.12);\n}\n```\n\n### Server-Side Rendering\n\n```tsx\nimport { generateColorSchemeCSSVariables, getColorScheme } from \"@azizul7m/markdown-renderer\";\n\nconst scheme = getColorScheme(\"dracula\");\nconst cssVars = generateColorSchemeCSSVariables(scheme);\n// Use in <style>{`:root { ${cssVars} }`}</style>\n```\n\n---\n\n## ❓ FAQ\n\n**Q: Do I need Tailwind CSS?**  \nA: No, Tailwind is optional. The package exports CSS variables for styling.\n\n**Q: Can I persist theme choice?**  \nA: Yes! Save to `localStorage` and apply on mount.\n\n**Q: Does it work with SSR/Next.js?**  \nA: Yes! Use `generateColorSchemeCSSVariables()` for SSR, then `applyColorScheme()` on client.\n\n**Q: How do I hide the table of contents?**  \nA: Use `<MarkdownRenderer md={md} hideTableOfContents />`\n\n---\n\n## 📄 See Also\n\n- **[USAGE_GUIDE.md](./USAGE_GUIDE.md)** — Comprehensive guide with 20+ examples\n- **Peer Dependency**: React 18+\n\n---\n\n## 📦 Bundle Size\n\n- **Minified**: ~15KB\n- **Gzipped**: ~7KB\n\n---\n\n## 📄 License\n\nMIT — Use freely in personal and commercial projects.\n\n---\n\n## 🤝 Support\n\nQuestions? Open an issue on [GitHub](https://github.com/Azizul7m/markdown-renderer).\n\nMade with ❤️ by [Azizul](https://github.com/Azizul7m)\n","readmeFilename":"README.md","_rev":"1-b7985e753c725d5c5afdb99988c0014d"}