@codearcade/markdown 1.0.2 → 1.3.0

package/README.md

@@ -1,19 +1,19 @@
-# @codearcade/mdx
+# @codearcade/markdown
 
 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.
+Packed with **dynamic syntax highlighting** (lazy-loaded for zero bloat), **copy-to-clipboard** functionality, and seamless **dark mode** support out of the box.
 
 ---
 
 ## ✨ Features
 
 - ⚡ **Powered by React Markdown**: Robust and reliable rendering.
+- 🚀 **Zero Initial Bloat**: Syntax highlighters and themes are dynamically lazy-loaded only when needed!
 - 🎨 **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.).
+- 💅 **Dual Engine Syntax Highlighting**: Choose between **Prism** or **Highlight.js** under the hood, with access to over 100+ combined themes.
 - 📋 **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.
 
 ---
 
@@ -22,38 +22,39 @@ Packed with **syntax highlighting**, **copy-to-clipboard** functionality, and se
 Install the package via your preferred package manager:
 
 ```bash
-npm install @codearcade/mdx
+npm install @codearcade/markdown
 # or
-yarn add @codearcade/mdx
+yarn add @codearcade/markdown
 # or
-pnpm add @codearcade/mdx
+pnpm add @codearcade/markdown
 # or
-bun add @codearcade/mdx
+bun add @codearcade/markdown
 ```
 
 ## Usage
 
-Using `@codearcade/mdx` is simple. Import the component and pass your markdown string.
+Using `@codearcade/markdown` is simple. Import the component, select your engine (`prism` or `hljs`), and pass your markdown string.
 
 ### Basic Usage
 
 ```tsx
-import { MarkdownComponent } from "@codearcade/mdx";
+import { MarkdownComponent } from "@codearcade/markdown";
 
 const markdown = `
 # Hello World
 
 This is a **markdown** component.
 
-\`\`\`javascript
+```javascript
 console.log("Hello from CodeArcade!");
-\`\`\`
+```
 `;
 
 export default function App() {
   return (
     <div style={{ padding: 20 }}>
-      <MarkdownComponent markdownText={markdown} />
+      {/* The engine prop is required! Choose "prism" or "hljs" */}
+      <MarkdownComponent engine="prism" markdownText={markdown} />
     </div>
   );
 }
@@ -61,11 +62,11 @@ export default function App() {
 
 ### Dark Mode & Custom Themes
 
-Easily switch between light and dark modes, and customize the syntax highlighting theme for each mode.
+Easily switch between light and dark modes, and customize the syntax highlighting theme. Because this component is fully strongly-typed, your IDE will auto-complete the available themes based on the engine you select!
 
 ```tsx
 import { useState } from "react";
-import { MarkdownComponent } from "@codearcade/mdx";
+import { MarkdownComponent } from "@codearcade/markdown";
 
 export default function BlogPost() {
   const [isDarkMode, setIsDarkMode] = useState(false);
@@ -75,9 +76,10 @@ export default function BlogPost() {
       <button onClick={() => setIsDarkMode(!isDarkMode)}>Toggle Theme</button>
 
       <MarkdownComponent
-        markdownText={content}
+        engine="prism"
+        markdownText={`console.log('test')`}
         theme={isDarkMode ? "dark" : "light"}
-        // Customize syntax highlighting themes
+        // These will auto-complete to valid Prism themes!
         defaultMarkdownThemeLight="atomDark"
         defaultMarkdownThemeDark="dracula"
       />
@@ -91,23 +93,35 @@ export default function BlogPost() {
 ### `<MarkdownComponent />`
 
 | Prop | Type | Default | Description |
-|Text | | | |
+|---|---|---|---|
+| `engine` | `"prism" \| "hljs"` | **Required** | The syntax highlighting engine to power the code blocks. |
 | `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"`. |
+| `theme` | `"light" \| "dark"` | `"light"` | Controls the rendering mode of the surrounding component. |
+| `defaultMarkdownThemeLight` | `string` | `"a11yDark"` | Syntax highlighting theme to use when `theme` is `"light"`. Allowed strings change based on the `engine`. |
+| `defaultMarkdownThemeDark` | `string` | `"twilight"` (Prism) / `"vs2015"` (HLJS) | Syntax highlighting theme to use when `theme` is `"dark"`. Allowed strings change based on the `engine`. |
 
 ### 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.
+We support a wide range of syntax highlighting themes. You can import the arrays directly if you want to build a theme-selector UI in your app!
+
+#### Prism Themes
 
 ```tsx
-import { prismStyleNames } from "@codearcade/mdx";
+import { prismStyleNames } from "@codearcade/markdown";
 
 console.log(prismStyleNames);
 // ["dracula", "atomDark", "nightOwl", "vs", "monokai", ...]
 ```
 
+#### Highlight.js Themes
+
+```tsx
+import { hljsStyleNames } from "@codearcade/markdown";
+
+console.log(hljsStyleNames);
+// ["atom-one-dark", "atom-one-light", "base16/darcula", "github-dark", "nord", ...]
+```
+
 ## License
 
-MIT © [CodeArcade](https://github.com/codearcade-io)
+MIT © [CodeArcade](https://github.com/codearcade-io)

package/dist/components/markdown.d.ts

@@ -7,12 +7,14 @@ type MarkdownComponentProps = {
     theme?: Theme;
     markdownText: string;
     defaultMarkdownThemeDark?: PrismTheme;
+    compact?: boolean;
 } | {
     engine: "hljs";
     defaultMarkdownThemeLight?: HljsTheme;
     markdownText: string;
     theme?: Theme;
     defaultMarkdownThemeDark?: HljsTheme;
+    compact?: boolean;
 };
 declare const MarkdownComponent: React.FC<MarkdownComponentProps>;
 export { MarkdownComponent };

package/dist/constants/theme.d.ts

@@ -1,6 +1,6 @@
 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"];
-export declare const hljsStyleNames: readonly ["a11yDark", "a11yLight", "agate", "anOldHope", "androidstudio", "arduinoLight", "arta", "ascetic", "atelierCaveDark", "atelierCaveLight", "atelierDuneDark", "atelierDuneLight", "atelierEstuaryDark", "atelierEstuaryLight", "atelierForestDark", "atelierForestLight", "atelierHeathDark", "atelierHeathLight", "atelierLakesideDark", "atelierLakesideLight", "atelierPlateauDark", "atelierPlateauLight", "atelierSavannaDark", "atelierSavannaLight", "atelierSeasideDark", "atelierSeasideLight", "atelierSulphurpoolDark", "atelierSulphurpoolLight", "atomOneDarkReasonable", "atomOneDark", "atomOneLight", "brownPaper", "codepenEmbed", "colorBrewer", "darcula", "dark", "defaultStyle", "docco", "dracula", "far", "foundation", "githubGist", "github", "gml", "googlecode", "gradientDark", "grayscale", "gruvboxDark", "gruvboxLight", "hopscotch", "hybrid", "idea", "irBlack", "isblEditorDark", "isblEditorLight", "kimbieDark", "kimbieLight", "lightfair", "lioshi", "magula", "monoBlue", "monokaiSublime", "monokai", "nightOwl", "nnfxDark", "nnfx", "nord", "obsidian", "ocean", "paraisoDark", "paraisoLight", "pojoaque", "purebasic", "qtcreatorDark", "qtcreatorLight", "railscasts", "rainbow", "routeros", "schoolBook", "shadesOfPurple", "solarizedDark", "solarizedLight", "srcery", "stackoverflowDark", "stackoverflowLight", "sunburst", "tomorrowNightBlue", "tomorrowNightBright", "tomorrowNightEighties", "tomorrowNight", "tomorrow", "vs", "vs2015", "xcode", "xt256", "zenburn"];
+declare const hljsStyleNames: readonly ["a11yDark", "a11yLight", "agate", "anOldHope", "androidstudio", "arduinoLight", "arta", "ascetic", "atelierCaveDark", "atelierCaveLight", "atelierDuneDark", "atelierDuneLight", "atelierEstuaryDark", "atelierEstuaryLight", "atelierForestDark", "atelierForestLight", "atelierHeathDark", "atelierHeathLight", "atelierLakesideDark", "atelierLakesideLight", "atelierPlateauDark", "atelierPlateauLight", "atelierSavannaDark", "atelierSavannaLight", "atelierSeasideDark", "atelierSeasideLight", "atelierSulphurpoolDark", "atelierSulphurpoolLight", "atomOneDarkReasonable", "atomOneDark", "atomOneLight", "brownPaper", "codepenEmbed", "colorBrewer", "darcula", "dark", "defaultStyle", "docco", "dracula", "far", "foundation", "githubGist", "github", "gml", "googlecode", "gradientDark", "grayscale", "gruvboxDark", "gruvboxLight", "hopscotch", "hybrid", "idea", "irBlack", "isblEditorDark", "isblEditorLight", "kimbieDark", "kimbieLight", "lightfair", "lioshi", "magula", "monoBlue", "monokaiSublime", "monokai", "nightOwl", "nnfxDark", "nnfx", "nord", "obsidian", "ocean", "paraisoDark", "paraisoLight", "pojoaque", "purebasic", "qtcreatorDark", "qtcreatorLight", "railscasts", "rainbow", "routeros", "schoolBook", "shadesOfPurple", "solarizedDark", "solarizedLight", "srcery", "stackoverflowDark", "stackoverflowLight", "sunburst", "tomorrowNightBlue", "tomorrowNightBright", "tomorrowNightEighties", "tomorrowNight", "tomorrow", "vs", "vs2015", "xcode", "xt256", "zenburn"];
 type PrismTheme = (typeof prismStyleNames)[number];
 type HljsTheme = (typeof hljsStyleNames)[number];
-export { prismStyleNames };
+export { prismStyleNames, hljsStyleNames };
 export type { PrismTheme, HljsTheme };

package/dist/index.css

@@ -179,3 +179,42 @@
   color: var(--color-foreground, #fff);
   background-color: #3f3f46;
 }
+
+.compactMode_A8U9fw {
+  padding: 0;
+  font-size: 13px;
+  line-height: 1.5;
+}
+
+.compactMode_A8U9fw > * + * {
+  margin-top: .25rem;
+}
+
+.compactMode_A8U9fw p {
+  margin-bottom: 0;
+}
+
+.compactMode_A8U9fw h1, .compactMode_A8U9fw h2, .compactMode_A8U9fw h3 {
+  margin-top: .5rem;
+  margin-bottom: .25rem;
+  font-size: 1.1rem;
+  line-height: 1.4;
+}
+
+.compactMode_A8U9fw h1:first-child, .compactMode_A8U9fw h2:first-child, .compactMode_A8U9fw h3:first-child, .compactMode_A8U9fw p:first-child {
+  margin-top: 0;
+}
+
+.compactMode_A8U9fw pre {
+  margin-top: .5rem;
+  margin-bottom: .5rem;
+}
+
+.compactMode_A8U9fw ul, .compactMode_A8U9fw ol {
+  margin-bottom: .25rem;
+  padding-left: 1.25rem;
+}
+
+.compactMode_A8U9fw li {
+  margin-bottom: 0;
+}

package/dist/index.js

@@ -17,16 +17,17 @@ import remarkGfm from "remark-gfm";
 var markdown_module_default = {
   markdownBody: "markdownBody_A8U9fw",
   markdownAction: "markdownAction_A8U9fw",
-  dark: "dark_A8U9fw"
+  dark: "dark_A8U9fw",
+  compactMode: "compactMode_A8U9fw"
 };
 
 // src/components/icons.tsx
-import { jsxDEV } from "react/jsx-dev-runtime";
+import { jsx } from "react/jsx-runtime";
 var CheckMarkIcon = () => {
-  return /* @__PURE__ */ jsxDEV("svg", {
+  return /* @__PURE__ */ jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 512 512",
-    children: /* @__PURE__ */ jsxDEV("path", {
+    children: /* @__PURE__ */ jsx("path", {
       fill: "none",
       stroke: "currentColor",
       "stroke-linecap": "round",
@@ -37,11 +38,11 @@ var CheckMarkIcon = () => {
   }, undefined, false, undefined, this);
 };
 var CopyIcon = () => {
-  return /* @__PURE__ */ jsxDEV("svg", {
+  return /* @__PURE__ */ jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 512 512",
     children: [
-      /* @__PURE__ */ jsxDEV("rect", {
+      /* @__PURE__ */ jsx("rect", {
         x: "128",
         y: "128",
         width: "336",
@@ -53,7 +54,7 @@ var CopyIcon = () => {
         "stroke-linejoin": "round",
         "stroke-width": "24"
       }, undefined, false, undefined, this),
-      /* @__PURE__ */ jsxDEV("path", {
+      /* @__PURE__ */ jsx("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",
@@ -66,7 +67,7 @@ var CopyIcon = () => {
 };
 
 // src/components/markdown.tsx
-import { jsxDEV as jsxDEV2 } from "react/jsx-dev-runtime";
+import { jsx as jsx2 } from "react/jsx-runtime";
 "use client";
 var CopyToClipboard = ({ text }) => {
   const [isCopied, setIsCopied] = useState(false);
@@ -84,19 +85,24 @@ var CopyToClipboard = ({ text }) => {
       }, 2000);
     }
   }, [text, isCopied]);
-  return /* @__PURE__ */ jsxDEV2("button", {
+  return /* @__PURE__ */ jsx2("button", {
     onClick: copyToClipboard,
     className: markdown_module_default.markdownAction,
     "aria-label": isCopied ? "Copied to clipboard" : "Copy to clipboard",
     children: [
-      isCopied ? /* @__PURE__ */ jsxDEV2(CheckMarkIcon, {}, undefined, false, undefined, this) : /* @__PURE__ */ jsxDEV2(CopyIcon, {}, undefined, false, undefined, this),
+      isCopied ? /* @__PURE__ */ jsx2(CheckMarkIcon, {}, undefined, false, undefined, this) : /* @__PURE__ */ jsx2(CopyIcon, {}, undefined, false, undefined, this),
       " ",
       isCopied ? "Copied" : "Copy"
     ]
   }, undefined, true, undefined, this);
 };
 var MarkdownComponent = (props) => {
-  const { markdownText, theme = "light", engine = "prism" } = props;
+  const {
+    markdownText,
+    theme = "light",
+    engine = "prism",
+    compact = false
+  } = props;
   const [markdownTheme, setMarkdownTheme] = useState();
   const [Highlighter, setHighlighter] = useState();
   useEffect(() => {
@@ -134,19 +140,19 @@ var MarkdownComponent = (props) => {
       isMounted = false;
     };
   }, [engine, theme]);
-  return /* @__PURE__ */ jsxDEV2("section", {
-    className: `${markdown_module_default.markdownBody} ${theme}`,
-    children: /* @__PURE__ */ jsxDEV2(ReactMarkdown, {
+  return /* @__PURE__ */ jsx2("section", {
+    className: `${markdown_module_default.markdownBody} ${theme} ${compact ? markdown_module_default.compactMode : ""}`,
+    children: /* @__PURE__ */ jsx2(ReactMarkdown, {
       remarkPlugins: [remarkGfm],
       components: {
         code(props2) {
           const { className, children, ref, ...rest } = props2;
           const match = /language-(\w+)/.exec(className || "");
           const codeText = String(children).replace(/\n$/, "");
-          return match && Highlighter ? /* @__PURE__ */ jsxDEV2("div", {
+          return match && Highlighter ? /* @__PURE__ */ jsx2("div", {
             style: { position: "relative" },
             children: [
-              /* @__PURE__ */ jsxDEV2(Highlighter, {
+              /* @__PURE__ */ jsx2(Highlighter, {
                 ...rest,
                 PreTag: "div",
                 ref,
@@ -155,11 +161,11 @@ var MarkdownComponent = (props) => {
                 style: markdownTheme,
                 children: codeText
               }, undefined, false, undefined, this),
-              /* @__PURE__ */ jsxDEV2(CopyToClipboard, {
+              /* @__PURE__ */ jsx2(CopyToClipboard, {
                 text: codeText
               }, undefined, false, undefined, this)
             ]
-          }, undefined, true, undefined, this) : /* @__PURE__ */ jsxDEV2("code", {
+          }, undefined, true, undefined, this) : /* @__PURE__ */ jsx2("code", {
             ...rest,
             className,
             children

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@codearcade/markdown",
   "type": "module",
-  "version": "1.0.2",
+  "version": "1.3.0",
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "license": "MIT",
@@ -24,7 +24,7 @@
     "dist/*.css"
   ],
   "scripts": {
-    "build": "bun ./builder.ts && bun run generate-types",
+    "build": "NODE_ENV=production && bun ./builder.ts && bun run generate-types",
     "prepublishOnly": "bun run build",
     "generate-types": "bunx tsc --emitDeclarationOnly --declaration --outDir dist",
     "clear": "rm -rf dist"