@codearcade/markdown 1.0.0

package/README.md

@@ -0,0 +1,113 @@
+# @codearcade/mdx
+
+A modern, feature-rich Markdown renderer for React applications. Built for **speed**, **customizability**, and **developer experience**.
+
+Packed with **syntax highlighting**, **copy-to-clipboard** functionality, and seamless **dark mode** support out of the box.
+
+---
+
+## ✨ Features
+
+- ⚡ **Powered by React Markdown**: Robust and reliable rendering.
+- 🎨 **Theming Support**: First-class support for Light and Dark modes.
+- 💅 **Syntax Highlighting**: Integrated Prism syntax highlighting with **50+ themes** (Dracula, Atom Dark, Night Owl, etc.).
+- 📋 **Copy Code**: Automatic "Copy to Clipboard" button for all code blocks.
+- 🍭 **GFM Support**: GitHub Flavored Markdown (tables, autolinks, strikethrough) enabled by default.
+- 🔌 **Plug & Play**: Works instantly with minimal configuration.
+
+---
+
+## Installation
+
+Install the package via your preferred package manager:
+
+```bash
+npm install @codearcade/mdx
+# or
+yarn add @codearcade/mdx
+# or
+pnpm add @codearcade/mdx
+# or
+bun add @codearcade/mdx
+```
+
+## Usage
+
+Using `@codearcade/mdx` is simple. Import the component and pass your markdown string.
+
+### Basic Usage
+
+```tsx
+import { MarkdownComponent } from "@codearcade/mdx";
+
+const markdown = `
+# Hello World
+
+This is a **markdown** component.
+
+\`\`\`javascript
+console.log("Hello from CodeArcade!");
+\`\`\`
+`;
+
+export default function App() {
+  return (
+    <div style={{ padding: 20 }}>
+      <MarkdownComponent markdownText={markdown} />
+    </div>
+  );
+}
+```
+
+### Dark Mode & Custom Themes
+
+Easily switch between light and dark modes, and customize the syntax highlighting theme for each mode.
+
+```tsx
+import { useState } from "react";
+import { MarkdownComponent } from "@codearcade/mdx";
+
+export default function BlogPost() {
+  const [isDarkMode, setIsDarkMode] = useState(false);
+
+  return (
+    <div className={isDarkMode ? "dark-theme" : "light-theme"}>
+      <button onClick={() => setIsDarkMode(!isDarkMode)}>Toggle Theme</button>
+
+      <MarkdownComponent
+        markdownText={content}
+        theme={isDarkMode ? "dark" : "light"}
+        // Customize syntax highlighting themes
+        defaultMarkdownThemeLight="atomDark"
+        defaultMarkdownThemeDark="dracula"
+      />
+    </div>
+  );
+}
+```
+
+## API Reference
+
+### `<MarkdownComponent />`
+
+| Prop | Type | Default | Description |
+|Text | | | |
+| `markdownText` | `string` | **Required** | The raw markdown string to render. |
+| `theme` | `"light" \| "dark"` | `"light"` | Controls the rendering mode of the component. |
+| `defaultMarkdownThemeLight` | `MarkdownTheme` | `"a11yDark"` | Syntax highlighting theme to use when `theme` is `"light"`. |
+| `defaultMarkdownThemeDark` | `MarkdownTheme` | `"twilight"` | Syntax highlighting theme to use when `theme` is `"dark"`. |
+
+### Available Themes
+
+We support a wide range of Prism themes. You can import `prismStyleNames` to see the full list or use it to build a theme selector.
+
+```tsx
+import { prismStyleNames } from "@codearcade/mdx";
+
+console.log(prismStyleNames);
+// ["dracula", "atomDark", "nightOwl", "vs", "monokai", ...]
+```
+
+## License
+
+MIT © [CodeArcade](https://github.com/codearcade-io)

package/dist/components/markdown.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+declare const prismStyleNames: readonly ["a11yDark", "atomDark", "base16AteliersulphurpoolLight", "cb", "coldarkCold", "coldarkDark", "coyWithoutShadows", "coy", "darcula", "dark", "dracula", "duotoneDark", "duotoneEarth", "duotoneForest", "duotoneLight", "duotoneSea", "duotoneSpace", "funky", "ghcolors", "gruvboxDark", "gruvboxLight", "holiTheme", "hopscotch", "lucario", "materialDark", "materialLight", "materialOceanic", "nightOwl", "nord", "okaidia", "oneDark", "oneLight", "pojoaque", "prism", "shadesOfPurple", "solarizedDarkAtom", "solarizedlight", "synthwave84", "tomorrow", "twilight", "vs", "vscDarkPlus", "xonokai", "zTouch"];
+type MarkdownTheme = (typeof prismStyleNames)[number];
+type Theme = "dark" | "light";
+interface MarkdownComponentProps {
+    markdownText: string;
+    theme?: Theme;
+    defaultMarkdownThemeLight?: MarkdownTheme;
+    defaultMarkdownThemeDark?: MarkdownTheme;
+}
+declare const MarkdownComponent: React.FC<MarkdownComponentProps>;
+export { MarkdownComponent, prismStyleNames };

package/dist/index.css

@@ -0,0 +1,181 @@
+/* src/components/markdown.module.css */
+.markdownBody_A8U9fw {
+  border-radius: .5rem;
+  max-width: 850px;
+  padding: 1.5rem;
+  font-family: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Noto Sans, Ubuntu, Cantarell, Helvetica Neue, Helvetica, Arial, sans-serif;
+  font-size: 1rem;
+  line-height: 1.75;
+}
+
+.markdownBody_A8U9fw h1 {
+  font-size: 1.875rem;
+  line-height: 2.25rem;
+}
+
+.markdownBody_A8U9fw h2 {
+  font-size: 1.5rem;
+  line-height: 2rem;
+}
+
+.markdownBody_A8U9fw h3 {
+  font-size: 1.25rem;
+  line-height: 1.75rem;
+}
+
+.markdownBody_A8U9fw h1, .markdownBody_A8U9fw h2, .markdownBody_A8U9fw h3 {
+  margin-bottom: 1rem;
+  font-weight: 600;
+}
+
+.markdownBody_A8U9fw p {
+  margin-bottom: 1rem;
+}
+
+.markdownBody_A8U9fw a {
+  text-decoration: none;
+}
+
+.markdownBody_A8U9fw a:hover {
+  text-decoration: underline;
+}
+
+.markdownBody_A8U9fw ul, .markdownBody_A8U9fw ol {
+  margin-bottom: 1rem;
+  padding-left: 1.5rem;
+}
+
+.markdownBody_A8U9fw ul {
+  list-style-type: disc;
+}
+
+.markdownBody_A8U9fw ol {
+  list-style-type: decimal;
+}
+
+.markdownBody_A8U9fw li {
+  margin-bottom: .5rem;
+}
+
+.markdownBody_A8U9fw code, .markdownBody_A8U9fw pre {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, monospace;
+}
+
+.markdownBody_A8U9fw code {
+  border-radius: .25rem;
+  padding: .25rem;
+  font-size: .875rem;
+}
+
+.markdownBody_A8U9fw pre {
+  overflow-x: auto;
+  border-radius: .5rem;
+  margin-bottom: 1rem;
+}
+
+.markdownBody_A8U9fw blockquote {
+  border-left: 4px solid;
+  margin-bottom: 1rem;
+  margin-left: 0;
+  padding-left: 1rem;
+  font-style: italic;
+}
+
+.markdownBody_A8U9fw strong {
+  font-weight: 700;
+}
+
+.markdownBody_A8U9fw em {
+  font-style: italic;
+}
+
+.markdownBody_A8U9fw del {
+  text-decoration: line-through;
+}
+
+.markdownBody_A8U9fw hr {
+  border: none;
+  border-top: 2px solid;
+  margin: 1.5rem 0;
+}
+
+.markdownBody_A8U9fw table {
+  border-collapse: collapse;
+  overflow-x: auto;
+  width: 100%;
+  margin-bottom: 1rem;
+}
+
+.markdownBody_A8U9fw th, .markdownBody_A8U9fw td {
+  text-align: left;
+  border: 1px solid;
+  padding: .5rem;
+}
+
+.markdownBody_A8U9fw th {
+  font-weight: 600;
+}
+
+.markdownBody_A8U9fw tr:nth-child(2n) {
+  background: none;
+}
+
+.markdownBody_A8U9fw > * + * {
+  margin-top: 1rem;
+}
+
+.markdownBody_A8U9fw h1, .markdownBody_A8U9fw h2, .markdownBody_A8U9fw h3 {
+  margin-top: 2rem;
+}
+
+.markdownBody_A8U9fw h1:first-child, .markdownBody_A8U9fw h2:first-child, .markdownBody_A8U9fw h3:first-child {
+  margin-top: 0;
+}
+
+.markdownBody_A8U9fw li > ul, .markdownBody_A8U9fw li > ol {
+  margin-top: .5rem;
+}
+
+.markdownBody_A8U9fw img {
+  display: block;
+  max-width: 100%;
+  height: auto;
+}
+
+.markdownBody_A8U9fw pre {
+  margin-top: 1.25rem;
+  margin-bottom: 1.25rem;
+}
+
+.markdownAction_A8U9fw {
+  position: absolute;
+  display: flex;
+  cursor: pointer;
+  opacity: .75;
+  color: var(--color-foreground, #171717);
+  background-color: #e5e7eb;
+  border: none;
+  border-radius: .5rem;
+  align-items:  center;
+  gap: .25rem;
+  padding: .25rem .5rem;
+  transition: opacity .15s ease-in-out;
+  font-size: .875rem;
+  top: .5rem;
+  right: .5rem;
+}
+
+.markdownAction_A8U9fw:hover {
+  opacity: 1;
+}
+
+.markdownAction_A8U9fw svg {
+  flex: none;
+  width: .85rem;
+  height: .85rem;
+}
+
+.dark_A8U9fw .markdownAction_A8U9fw {
+  color: var(--color-foreground, #fff);
+  background-color: #3f3f46;
+}

package/dist/index.d.ts

@@ -0,0 +1 @@
+export * from "./components/markdown";

package/dist/index.js

@@ -0,0 +1,195 @@
+"use client";
+import "./index.css";
+var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
+  get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
+}) : x)(function(x) {
+  if (typeof require !== "undefined")
+    return require.apply(this, arguments);
+  throw Error('Dynamic require of "' + x + '" is not supported');
+});
+
+// src/components/markdown.tsx
+import { useCallback, useEffect, useState } from "react";
+import ReactMarkdown from "react-markdown";
+import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
+import remarkGfm from "remark-gfm";
+
+// src/components/markdown.module.css
+var markdown_module_default = {
+  markdownBody: "markdownBody_A8U9fw",
+  markdownAction: "markdownAction_A8U9fw",
+  dark: "dark_A8U9fw"
+};
+
+// src/components/markdown.tsx
+import { jsxDEV } from "react/jsx-dev-runtime";
+"use client";
+var prismStyleNames = [
+  "a11yDark",
+  "atomDark",
+  "base16AteliersulphurpoolLight",
+  "cb",
+  "coldarkCold",
+  "coldarkDark",
+  "coyWithoutShadows",
+  "coy",
+  "darcula",
+  "dark",
+  "dracula",
+  "duotoneDark",
+  "duotoneEarth",
+  "duotoneForest",
+  "duotoneLight",
+  "duotoneSea",
+  "duotoneSpace",
+  "funky",
+  "ghcolors",
+  "gruvboxDark",
+  "gruvboxLight",
+  "holiTheme",
+  "hopscotch",
+  "lucario",
+  "materialDark",
+  "materialLight",
+  "materialOceanic",
+  "nightOwl",
+  "nord",
+  "okaidia",
+  "oneDark",
+  "oneLight",
+  "pojoaque",
+  "prism",
+  "shadesOfPurple",
+  "solarizedDarkAtom",
+  "solarizedlight",
+  "synthwave84",
+  "tomorrow",
+  "twilight",
+  "vs",
+  "vscDarkPlus",
+  "xonokai",
+  "zTouch"
+];
+var CheckMarkIcon = () => {
+  return /* @__PURE__ */ jsxDEV("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 512 512",
+    children: /* @__PURE__ */ jsxDEV("path", {
+      fill: "none",
+      stroke: "currentColor",
+      "stroke-linecap": "round",
+      "stroke-linejoin": "round",
+      "stroke-width": "24",
+      d: "M416 128L192 384l-96-96"
+    }, undefined, false, undefined, this)
+  }, undefined, false, undefined, this);
+};
+var CopyIcon = () => {
+  return /* @__PURE__ */ jsxDEV("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 512 512",
+    children: [
+      /* @__PURE__ */ jsxDEV("rect", {
+        x: "128",
+        y: "128",
+        width: "336",
+        height: "336",
+        rx: "57",
+        ry: "57",
+        fill: "none",
+        stroke: "currentColor",
+        "stroke-linejoin": "round",
+        "stroke-width": "24"
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV("path", {
+        d: "M383.5 128l.5-24a56.16 56.16 0 00-56-56H112a64.19 64.19 0 00-64 64v216a56.16 56.16 0 0056 56h24",
+        fill: "none",
+        stroke: "currentColor",
+        "stroke-linecap": "round",
+        "stroke-linejoin": "round",
+        "stroke-width": "24"
+      }, undefined, false, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+};
+var CopyToClipboard = ({ text }) => {
+  const [isCopied, setIsCopied] = useState(false);
+  const copyToClipboard = useCallback(async () => {
+    if (isCopied)
+      return;
+    try {
+      await navigator.clipboard.writeText(text);
+      setIsCopied(true);
+    } catch (err) {
+      console.error("Failed to copy text: ", err);
+    } finally {
+      setTimeout(() => {
+        setIsCopied(false);
+      }, 2000);
+    }
+  }, [text, isCopied]);
+  return /* @__PURE__ */ jsxDEV("button", {
+    onClick: copyToClipboard,
+    className: markdown_module_default.markdownAction,
+    "aria-label": isCopied ? "Copied to clipboard" : "Copy to clipboard",
+    children: [
+      isCopied ? /* @__PURE__ */ jsxDEV(CheckMarkIcon, {}, undefined, false, undefined, this) : /* @__PURE__ */ jsxDEV(CopyIcon, {}, undefined, false, undefined, this),
+      " ",
+      isCopied ? "Copied" : "Copy"
+    ]
+  }, undefined, true, undefined, this);
+};
+var MarkdownComponent = ({
+  markdownText,
+  theme = "light",
+  defaultMarkdownThemeLight = "a11yDark",
+  defaultMarkdownThemeDark = "twilight"
+}) => {
+  const [markdownTheme, setMarkdownTheme] = useState();
+  useEffect(() => {
+    import("react-syntax-highlighter/dist/esm/styles/prism").then((module) => {
+      setMarkdownTheme(module[theme === "dark" ? defaultMarkdownThemeDark : defaultMarkdownThemeLight]);
+    });
+  }, [defaultMarkdownThemeLight, defaultMarkdownThemeDark, theme]);
+  return /* @__PURE__ */ jsxDEV("section", {
+    className: `${markdown_module_default.markdownBody} ${theme}`,
+    children: /* @__PURE__ */ jsxDEV(ReactMarkdown, {
+      remarkPlugins: [remarkGfm],
+      components: {
+        code(props) {
+          const { className, children, ref, ...rest } = props;
+          const match = /language-(\w+)/.exec(className || "");
+          const codeText = String(children).replace(/\n$/, "");
+          return match ? /* @__PURE__ */ jsxDEV("div", {
+            style: { position: "relative" },
+            children: [
+              /* @__PURE__ */ jsxDEV(SyntaxHighlighter, {
+                ...rest,
+                PreTag: "div",
+                ref,
+                customStyle: { borderRadius: "1rem" },
+                language: match[1],
+                style: markdownTheme,
+                children: codeText
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV(CopyToClipboard, {
+                text: codeText
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this) : /* @__PURE__ */ jsxDEV("code", {
+            ...rest,
+            className,
+            children
+          }, undefined, false, undefined, this);
+        }
+      },
+      children: markdownText
+    }, undefined, false, undefined, this)
+  }, undefined, false, undefined, this);
+};
+export {
+  prismStyleNames,
+  MarkdownComponent
+};
+
+//# debugId=06022BF521D3780764756E2164756E21

package/dist/index.js.map

@@ -0,0 +1,10 @@
+{
+  "version": 3,
+  "sources": ["..\\src\\components\\markdown.tsx"],
+  "sourcesContent": [
+    "\"use client\";\r\n\r\nimport type { Ref } from \"react\";\r\nimport React, { useCallback, useEffect, useState } from \"react\";\r\nimport ReactMarkdown from \"react-markdown\";\r\nimport { Prism as SyntaxHighlighter } from \"react-syntax-highlighter\";\r\nimport remarkGfm from \"remark-gfm\";\r\n\r\n// @ts-ignore\r\nimport styles from \"./markdown.module.css\";\r\n\r\nconst prismStyleNames = [\r\n  \"a11yDark\",\r\n  \"atomDark\",\r\n  \"base16AteliersulphurpoolLight\",\r\n  \"cb\",\r\n  \"coldarkCold\",\r\n  \"coldarkDark\",\r\n  \"coyWithoutShadows\",\r\n  \"coy\",\r\n  \"darcula\",\r\n  \"dark\",\r\n  \"dracula\",\r\n  \"duotoneDark\",\r\n  \"duotoneEarth\",\r\n  \"duotoneForest\",\r\n  \"duotoneLight\",\r\n  \"duotoneSea\",\r\n  \"duotoneSpace\",\r\n  \"funky\",\r\n  \"ghcolors\",\r\n  \"gruvboxDark\",\r\n  \"gruvboxLight\",\r\n  \"holiTheme\",\r\n  \"hopscotch\",\r\n  \"lucario\",\r\n  \"materialDark\",\r\n  \"materialLight\",\r\n  \"materialOceanic\",\r\n  \"nightOwl\",\r\n  \"nord\",\r\n  \"okaidia\",\r\n  \"oneDark\",\r\n  \"oneLight\",\r\n  \"pojoaque\",\r\n  \"prism\",\r\n  \"shadesOfPurple\",\r\n  \"solarizedDarkAtom\",\r\n  \"solarizedlight\",\r\n  \"synthwave84\",\r\n  \"tomorrow\",\r\n  \"twilight\",\r\n  \"vs\",\r\n  \"vscDarkPlus\",\r\n  \"xonokai\",\r\n  \"zTouch\",\r\n] as const;\r\n\r\ntype MarkdownTheme = (typeof prismStyleNames)[number];\r\n\r\nconst CheckMarkIcon = () => {\r\n  return (\r\n    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\">\r\n      <path\r\n        fill=\"none\"\r\n        stroke=\"currentColor\"\r\n        stroke-linecap=\"round\"\r\n        stroke-linejoin=\"round\"\r\n        stroke-width=\"24\"\r\n        d=\"M416 128L192 384l-96-96\"\r\n      />\r\n    </svg>\r\n  );\r\n};\r\n\r\nconst CopyIcon = () => {\r\n  return (\r\n    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\">\r\n      <rect\r\n        x=\"128\"\r\n        y=\"128\"\r\n        width=\"336\"\r\n        height=\"336\"\r\n        rx=\"57\"\r\n        ry=\"57\"\r\n        fill=\"none\"\r\n        stroke=\"currentColor\"\r\n        stroke-linejoin=\"round\"\r\n        stroke-width=\"24\"\r\n      />\r\n      <path\r\n        d=\"M383.5 128l.5-24a56.16 56.16 0 00-56-56H112a64.19 64.19 0 00-64 64v216a56.16 56.16 0 0056 56h24\"\r\n        fill=\"none\"\r\n        stroke=\"currentColor\"\r\n        stroke-linecap=\"round\"\r\n        stroke-linejoin=\"round\"\r\n        stroke-width=\"24\"\r\n      />\r\n    </svg>\r\n  );\r\n};\r\n\r\nconst CopyToClipboard = ({ text }: { text: string }) => {\r\n  const [isCopied, setIsCopied] = useState(false);\r\n\r\n  const copyToClipboard = useCallback(async () => {\r\n    if (isCopied) return;\r\n\r\n    try {\r\n      await navigator.clipboard.writeText(text);\r\n      setIsCopied(true);\r\n    } catch (err) {\r\n      console.error(\"Failed to copy text: \", err);\r\n      // Optionally, show a user-friendly error message\r\n    } finally {\r\n      setTimeout(() => {\r\n        setIsCopied(false);\r\n      }, 2000);\r\n    }\r\n  }, [text, isCopied]);\r\n\r\n  return (\r\n    <button\r\n      onClick={copyToClipboard}\r\n      className={styles.markdownAction}\r\n      aria-label={isCopied ? \"Copied to clipboard\" : \"Copy to clipboard\"}\r\n    >\r\n      {isCopied ? <CheckMarkIcon /> : <CopyIcon />}{\" \"}\r\n      {isCopied ? \"Copied\" : \"Copy\"}\r\n    </button>\r\n  );\r\n};\r\n\r\ntype Theme = \"dark\" | \"light\";\r\n\r\ninterface MarkdownComponentProps {\r\n  markdownText: string;\r\n  theme?: Theme;\r\n  defaultMarkdownThemeLight?: MarkdownTheme;\r\n  defaultMarkdownThemeDark?: MarkdownTheme;\r\n}\r\n\r\ntype SyntaxHighlighterStyle = { [key: string]: React.CSSProperties };\r\n\r\nconst MarkdownComponent: React.FC<MarkdownComponentProps> = ({\r\n  markdownText,\r\n  theme = \"light\",\r\n  defaultMarkdownThemeLight = \"a11yDark\",\r\n  defaultMarkdownThemeDark = \"twilight\",\r\n}) => {\r\n  const [markdownTheme, setMarkdownTheme] = useState<SyntaxHighlighterStyle>();\r\n\r\n  useEffect(() => {\r\n    import(\"react-syntax-highlighter/dist/esm/styles/prism\").then((module) => {\r\n      setMarkdownTheme(\r\n        module[\r\n          theme === \"dark\"\r\n            ? defaultMarkdownThemeDark\r\n            : defaultMarkdownThemeLight\r\n        ],\r\n      );\r\n    });\r\n  }, [defaultMarkdownThemeLight, defaultMarkdownThemeDark, theme]);\r\n\r\n  return (\r\n    <section className={`${styles.markdownBody} ${theme}`}>\r\n      <ReactMarkdown\r\n        remarkPlugins={[remarkGfm]}\r\n        components={{\r\n          code(props) {\r\n            const { className, children, ref, ...rest } = props;\r\n            const match = /language-(\\w+)/.exec(className || \"\");\r\n            const codeText = String(children).replace(/\\n$/, \"\");\r\n            return match ? (\r\n              <div style={{ position: \"relative\" }}>\r\n                <SyntaxHighlighter\r\n                  {...rest}\r\n                  PreTag=\"div\"\r\n                  ref={ref as Ref<SyntaxHighlighter>}\r\n                  customStyle={{ borderRadius: \"1rem\" }}\r\n                  language={match[1]}\r\n                  style={markdownTheme}\r\n                >\r\n                  {codeText}\r\n                </SyntaxHighlighter>\r\n                <CopyToClipboard text={codeText} />\r\n              </div>\r\n            ) : (\r\n              <code {...rest} className={className}>\r\n                {children}\r\n              </code>\r\n            );\r\n          },\r\n        }}\r\n      >\r\n        {markdownText}\r\n      </ReactMarkdown>\r\n    </section>\r\n  );\r\n};\r\n\r\nexport { MarkdownComponent, prismStyleNames };\r\n"
+  ],
+  "mappings": "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",
+  "debugId": "06022BF521D3780764756E2164756E21",
+  "names": []
+}

package/package.json

@@ -0,0 +1,51 @@
+{
+  "name": "@codearcade/markdown",
+  "type": "module",
+  "version": "1.0.0",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "license": "MIT",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    }
+  },
+  "sideEffects": [
+    "dist/*.css"
+  ],
+  "scripts": {
+    "build": "bun ./builder.ts && bun run generate-types",
+    "prepublishOnly": "bun run build",
+    "generate-types": "bunx tsc --emitDeclarationOnly --declaration --outDir dist",
+    "clear": "rm -rf dist"
+  },
+  "files": [
+    "dist"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "homepage": "https://github.com/codearcade-io/markdown.git#readme",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/codearcade-io/markdown.git"
+  },
+  "bugs": "https://github.com/codearcade-io/markdown/issues",
+  "author": "Abhishek Singh <official.6packprogrammer@gmail.com>",
+  "devDependencies": {
+    "@types/bun": "^1.2.20",
+    "@types/react-syntax-highlighter": "^15.5.13",
+    "tslib": "^2.8.1",
+    "typedoc": "^0.28.10"
+  },
+  "peerDependencies": {
+    "react": ">=18",
+    "react-dom": ">=18"
+  },
+  "dependencies": {
+    "react-markdown": "^10.1.0",
+    "react-syntax-highlighter": "^16.1.0",
+    "remark-gfm": "^4.0.1"
+  }
+}