@codearcade/expo-markdown 1.0.6 → 1.1.0

package/LICENSE

@@ -0,0 +1,20 @@
+MIT License
+
+Copyright (c) 2026 Abhishek Singh
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,128 +1,37 @@
-# @codearcade/expo-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.
-
----
-
-## ✨ Features
-
-- ⚡ **Powered by MarkdownIt**: Robust and reliable rendering using `markdown-it`.
-- 🎨 **Theming Support**: First-class support for Light and Dark modes with customizable colors.
-- 💅 **Syntax Highlighting**: Integrated Prism syntax highlighting (supports themes via toggling).
-- 📋 **Copy Code**: Automatic "Copy to Clipboard" button for all code blocks.
-- 🍭 **GFM Support**: GitHub Flavored Markdown (tables, autolinks, etc.) enabled by default.
-- 🔌 **Plug & Play**: Works instantly with minimal configuration.
-
----
-
-## Installation
-
-Install the package via your preferred package manager:
-
-```bash
-npm install @codearcade/expo-markdown
-# or
-yarn add @codearcade/expo-markdown
-# or
-pnpm add @codearcade/expo-markdown
-# or
-bun add @codearcade/expo-markdown
-```
-
-> **Note**: This package requires `expo-clipboard` as a peer dependency for the copy-to-clipboard functionality.
-
-```bash
-npx expo install expo-clipboard
-```
-
-## Usage
-
-Using `@codearcade/expo-markdown` is simple. Import the `Markdown` component and pass your content string.
-
-### Basic Usage
-
-```tsx
-import { Markdown } from "@codearcade/expo-markdown";
-
-const markdown = `
-# Hello World
-
-This is a **markdown** component.
-
-\`\`\`javascript
-console.log("Hello from CodeArcade!");
-\`\`\`
-`;
-
-export default function App() {
-  return (
-    <View style={{ flex: 1 }}>
-      <Markdown content={markdown} />
-    </View>
-  );
-}
-```
-
-### Dark Mode & Custom Themes
-
-Easily switch between light and dark modes, and customize the color palette for each mode.
-
-```tsx
-import { useState } from "react";
-import { View } from "react-native";
-import { Markdown } from "@codearcade/expo-markdown";
-
-const myDarkTheme = {
-  backgroundColor: "#1e1e1e",
-  textColor: "#e0e0e0",
-  codeBackgroundColor: "#252526",
-  primaryColor: "#569cd6",
-  secondaryColor: "#4ec9b0",
-};
-
-export default function BlogPost() {
-  const [isDarkMode, setIsDarkMode] = useState(false);
-
-  return (
-    <View style={{ flex: 1 }}>
-      <Markdown
-        content="# My Blog Post"
-        theme={isDarkMode ? "dark" : "light"}
-        // Optional: Customize themes
-        defaultDarkTheme={myDarkTheme}
-      />
-    </View>
-  );
-}
-```
-
-## API Reference
-
-### `<Markdown />`
-
-| Prop                | Type                | Default                 | Description                                   |
-| ------------------- | ------------------- | ----------------------- | --------------------------------------------- |
-| `content`           | `string`            | **Required**            | The raw markdown string to render.            |
-| `theme`             | `"light" \| "dark"` | `"light"`               | Controls the rendering mode of the component. |
-| `defaultLightTheme` | `ThemeConfig`       | `Default Light Palette` | Custom colors for light mode.                 |
-| `defaultDarkTheme`  | `ThemeConfig`       | `Default Dark Palette`  | Custom colors for dark mode.                  |
-
-### ThemeConfig Interface
-
-The theme objects (`defaultLightTheme` and `defaultDarkTheme`) should follow this structure:
-
-```typescript
-interface ThemeConfig {
-  backgroundColor: string;
-  textColor: string;
-  codeBackgroundColor: string;
-  primaryColor: string;
-  secondaryColor: string;
-}
-```
-
-## License
-
-MIT © [CodeArcade](https://github.com/codearcade-io)
+# @codearcade/expo-markdown
+
+Markdown component to render markdown in expo with syntax highlighting and styling
+
+## Installation
+
+
+```sh
+npm install @codearcade/expo-markdown
+```
+
+
+## Usage
+
+
+```js
+import { multiply } from '@codearcade/expo-markdown';
+
+// ...
+
+const result = await multiply(3, 7);
+```
+
+
+## Contributing
+
+- [Development workflow](CONTRIBUTING.md#development-workflow)
+- [Sending a pull request](CONTRIBUTING.md#sending-a-pull-request)
+- [Code of conduct](CODE_OF_CONDUCT.md)
+
+## License
+
+MIT
+
+---
+
+Made with [create-react-native-library](https://github.com/callstack/react-native-builder-bob)

package/{dist/index.js → lib/module/components/markdown.js}

@@ -1,4 +1,46 @@
-import*as N from"expo-clipboard";import _ from"markdown-it";import{useMemo as $}from"react";import{ActivityIndicator as A,StyleSheet as H,View as P}from"react-native";import{WebView as U}from"react-native-webview";import{jsxDEV as J}from"react/jsx-dev-runtime";var I=new _({html:!0,linkify:!0,typographer:!0}),S=({content:K,theme:q="light",defaultDarkTheme:F={backgroundColor:"#111111ff",textColor:"#fff",codeBackgroundColor:"#2d2d2d",primaryColor:"#326fdfff",secondaryColor:"#39c927ff"},defaultLightTheme:G={backgroundColor:"#ffffffff",textColor:"#000",codeBackgroundColor:"#f3f3f3ff",primaryColor:"#326fdfff",secondaryColor:"#39c927ff"}})=>{let z=q==="dark"?F:G,O=$(()=>I.render(K),[K]),Q=q==="dark"?"https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-tomorrow.min.css":"https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism.min.css",R=`
+"use strict";
+
+import * as Clipboard from 'expo-clipboard';
+import MarkdownIt from 'markdown-it';
+import React, { useMemo } from 'react';
+import { ActivityIndicator, StyleSheet, View } from 'react-native';
+import { WebView } from 'react-native-webview';
+import { jsx as _jsx } from "react/jsx-runtime";
+const mdParser = new MarkdownIt({
+  html: true,
+  linkify: true,
+  typographer: true
+});
+export const Markdown = ({
+  content,
+  theme = 'light',
+  defaultDarkTheme = {
+    backgroundColor: '#111111ff',
+    textColor: '#fff',
+    codeBackgroundColor: '#2d2d2d',
+    primaryColor: '#326fdfff',
+    secondaryColor: '#39c927ff'
+  },
+  defaultLightTheme = {
+    backgroundColor: '#ffffffff',
+    textColor: '#000',
+    codeBackgroundColor: '#f3f3f3ff',
+    primaryColor: '#326fdfff',
+    secondaryColor: '#39c927ff'
+  }
+}) => {
+  const activeTheme = theme === 'dark' ? defaultDarkTheme : defaultLightTheme;
+
+  // 1. Convert Markdown to HTML String
+  const htmlContent = useMemo(() => mdParser.render(content), [content]);
+
+  // 2. Select Prism Theme (CDN URLs)
+  // You can swap these URLs for any theme from the list you provided
+  const prismThemeUrl = theme === 'dark' ? 'https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-tomorrow.min.css' : 'https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism.min.css';
+
+  // 3. Your Custom CSS (Converted to String)
+  // I pasted your exact CSS here, plus some WebView specific tweaks
+  const userStyles = `
 
   * { box-sizing: border-box; }
    
@@ -8,8 +50,8 @@ import*as N from"expo-clipboard";import _ from"markdown-it";import{useMemo as $}
       font-size: 16px; /* Body text size */
       line-height: 1.6;
       margin: 0;
-      background-color: ${z.backgroundColor} !important;
-      color: ${z.textColor} !important;
+      background-color: ${activeTheme.backgroundColor} !important;
+      color: ${activeTheme.textColor} !important;
     }
 
  /* =========================
@@ -40,7 +82,7 @@ import*as N from"expo-clipboard";import _ from"markdown-it";import{useMemo as $}
     .markdownBody p { margin-bottom: 1rem; }
     
     .markdownBody a { 
-      color: ${z.primaryColor}; 
+      color: ${activeTheme.primaryColor}; 
       text-decoration: none; 
     }
     .markdownBody a:hover { text-decoration: underline; }
@@ -122,8 +164,8 @@ import*as N from"expo-clipboard";import _ from"markdown-it";import{useMemo as $}
       position: relative; /* Anchor for the absolute button */
       margin: 1.5rem 0;
       border-radius: 0.5rem;
-      background-color: ${z.codeBackgroundColor} !important;
-      border: 1px solid ${q==="dark"?"#3e3e3e":"#e0e0e0"};
+      background-color: ${activeTheme.codeBackgroundColor} !important;
+      border: 1px solid ${theme === 'dark' ? '#3e3e3e' : '#e0e0e0'};
       overflow: hidden; /* Ensures rounded corners */
     }
 
@@ -132,9 +174,9 @@ import*as N from"expo-clipboard";import _ from"markdown-it";import{useMemo as $}
       position: absolute;
       top: 6px;
       right: 6px;
-      background: ${q==="dark"?"rgba(255,255,255,0.1)":"rgba(0,0,0,0.05)"};
-      color: ${q==="dark"?"#ccc":"#666"};
-      border: 1px solid ${q==="dark"?"#555":"#ddd"};
+      background: ${theme === 'dark' ? 'rgba(255,255,255,0.1)' : 'rgba(0,0,0,0.05)'};
+      color: ${theme === 'dark' ? '#ccc' : '#666'};
+      border: 1px solid ${theme === 'dark' ? '#555' : '#ddd'};
       border-radius: 4px;
       padding: 4px 10px;
       font-size: 12px;
@@ -146,8 +188,8 @@ import*as N from"expo-clipboard";import _ from"markdown-it";import{useMemo as $}
     
     /* Code Block Container */
     pre {
-      background-color: ${q==="dark"?F.codeBackgroundColor:G.codeBackgroundColor} !important;
-      color: ${q==="dark"?F.textColor:G.textColor} !important;
+      background-color: ${theme === 'dark' ? defaultDarkTheme.codeBackgroundColor : defaultLightTheme.codeBackgroundColor} !important;
+      color: ${theme === 'dark' ? defaultDarkTheme.textColor : defaultLightTheme.textColor} !important;
       position: relative;
       padding: 1rem;
       border-radius: 0.5rem;
@@ -169,16 +211,17 @@ import*as N from"expo-clipboard";import _ from"markdown-it";import{useMemo as $}
       font-size: 13px; 
     }
 
-  `,X=`
+  `;
+  const htmlSource = `
 <!DOCTYPE html>
 <html>
 <head>
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <link href="${Q}" rel="stylesheet" />
-  <style>${R}</style>
+  <link href="${prismThemeUrl}" rel="stylesheet" />
+  <style>${userStyles}</style>
 </head>
 <body class="markdownBody">
-  ${O}
+  ${htmlContent}
 
   <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/autoloader/prism-autoloader.min.js"></script>
@@ -217,8 +260,51 @@ import*as N from"expo-clipboard";import _ from"markdown-it";import{useMemo as $}
       });
 
       wrapper.appendChild(button);
+
+      if (window.Prism) {
+      window.Prism.highlightAll();
+    }
     });
   </script>
 </body>
 </html>
-  `,Y=async(Z)=>{try{let B=JSON.parse(Z.nativeEvent.data);if(B.type==="copy")await N.setStringAsync(B.payload)}catch(B){console.error("Error parsing webview message",B)}};return J(P,{style:W.container,children:J(U,{originWhitelist:["*"],source:{html:X},onMessage:Y,javaScriptEnabled:!0,domStorageEnabled:!0,startInLoadingState:!0,renderLoading:()=>J(A,{size:"large"},void 0,!1,void 0,this),style:{flex:1,backgroundColor:"transparent"}},void 0,!1,void 0,this)},void 0,!1,void 0,this)},W=H.create({container:{flex:1}});export{S as Markdown};
+  `;
+
+  // 5. Handle Messages from WebView (Copy to Clipboard)
+  const handleMessage = async event => {
+    try {
+      const data = JSON.parse(event.nativeEvent.data);
+      if (data.type === 'copy') {
+        await Clipboard.setStringAsync(data.payload);
+      }
+    } catch (error) {
+      console.error('Error parsing webview message', error);
+    }
+  };
+  return /*#__PURE__*/_jsx(View, {
+    style: styles.container,
+    children: /*#__PURE__*/_jsx(WebView, {
+      originWhitelist: ['*'],
+      source: {
+        html: htmlSource
+      },
+      onMessage: handleMessage,
+      javaScriptEnabled: true,
+      domStorageEnabled: true,
+      startInLoadingState: true,
+      renderLoading: () => /*#__PURE__*/_jsx(ActivityIndicator, {
+        size: "large"
+      }),
+      style: {
+        flex: 1,
+        backgroundColor: 'transparent'
+      }
+    })
+  });
+};
+const styles = StyleSheet.create({
+  container: {
+    flex: 1
+  }
+});
+//# sourceMappingURL=markdown.js.map

package/lib/module/components/markdown.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["Clipboard","MarkdownIt","React","useMemo","ActivityIndicator","StyleSheet","View","WebView","jsx","_jsx","mdParser","html","linkify","typographer","Markdown","content","theme","defaultDarkTheme","backgroundColor","textColor","codeBackgroundColor","primaryColor","secondaryColor","defaultLightTheme","activeTheme","htmlContent","render","prismThemeUrl","userStyles","htmlSource","handleMessage","event","data","JSON","parse","nativeEvent","type","setStringAsync","payload","error","console","style","styles","container","children","originWhitelist","source","onMessage","javaScriptEnabled","domStorageEnabled","startInLoadingState","renderLoading","size","flex","create"],"sourceRoot":"..\\..\\..\\src","sources":["components/markdown.tsx"],"mappings":";;AAAA,OAAO,KAAKA,SAAS,MAAM,gBAAgB;AAC3C,OAAOC,UAAU,MAAM,aAAa;AACpC,OAAOC,KAAK,IAAIC,OAAO,QAAQ,OAAO;AACtC,SAASC,iBAAiB,EAAEC,UAAU,EAAEC,IAAI,QAAQ,cAAc;AAElE,SAASC,OAAO,QAAQ,sBAAsB;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAE/C,MAAMC,QAAQ,GAAG,IAAIT,UAAU,CAAC;EAC9BU,IAAI,EAAE,IAAI;EACVC,OAAO,EAAE,IAAI;EACbC,WAAW,EAAE;AACf,CAAC,CAAC;AAqBF,OAAO,MAAMC,QAAyB,GAAGA,CAAC;EACxCC,OAAO;EACPC,KAAK,GAAG,OAAO;EACfC,gBAAgB,GAAG;IACjBC,eAAe,EAAE,WAAW;IAC5BC,SAAS,EAAE,MAAM;IACjBC,mBAAmB,EAAE,SAAS;IAC9BC,YAAY,EAAE,WAAW;IACzBC,cAAc,EAAE;EAClB,CAAC;EACDC,iBAAiB,GAAG;IAClBL,eAAe,EAAE,WAAW;IAC5BC,SAAS,EAAE,MAAM;IACjBC,mBAAmB,EAAE,WAAW;IAChCC,YAAY,EAAE,WAAW;IACzBC,cAAc,EAAE;EAClB;AACF,CAAC,KAAK;EACJ,MAAME,WAAW,GAAGR,KAAK,KAAK,MAAM,GAAGC,gBAAgB,GAAGM,iBAAiB;;EAE3E;EACA,MAAME,WAAW,GAAGtB,OAAO,CAAC,MAAMO,QAAQ,CAACgB,MAAM,CAACX,OAAO,CAAC,EAAE,CAACA,OAAO,CAAC,CAAC;;EAEtE;EACA;EACA,MAAMY,aAAa,GACjBX,KAAK,KAAK,MAAM,GACZ,mFAAmF,GACnF,0EAA0E;;EAEhF;EACA;EACA,MAAMY,UAAU,GAAG;AACrB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,0BAA0BJ,WAAW,CAACN,eAAe;AACrD,eAAeM,WAAW,CAACL,SAAS;AACpC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,eAAeK,WAAW,CAACH,YAAY;AACvC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,0BAA0BG,WAAW,CAACJ,mBAAmB;AACzD,0BAA0BJ,KAAK,KAAK,MAAM,GAAG,SAAS,GAAG,SAAS;AAClE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,oBACQA,KAAK,KAAK,MAAM,GAAG,uBAAuB,GAAG,kBAAkB;AACvE,eACeA,KAAK,KAAK,MAAM,GAAG,MAAM,GAAG,MAAM;AACjD,0BAA0BA,KAAK,KAAK,MAAM,GAAG,MAAM,GAAG,MAAM;AAC5D;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,0BACQA,KAAK,KAAK,MAAM,GACZC,gBAAgB,CAACG,mBAAmB,GACpCG,iBAAiB,CAACH,mBAAmB;AACjD,eAEQJ,KAAK,KAAK,MAAM,GACZC,gBAAgB,CAACE,SAAS,GAC1BI,iBAAiB,CAACJ,SAAS;AACvC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,GACG;EAED,MAAMU,UAAU,GAAG;AACrB;AACA;AACA;AACA;AACA,gBAAgBF,aAAa;AAC7B,WAAWC,UAAU;AACrB;AACA;AACA,IAAIH,WAAW;AACf;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,GAAG;;EAED;EACA,MAAMK,aAAa,GAAG,MAAOC,KAA0B,IAAK;IAC1D,IAAI;MACF,MAAMC,IAAI,GAAGC,IAAI,CAACC,KAAK,CAACH,KAAK,CAACI,WAAW,CAACH,IAAI,CAAC;MAC/C,IAAIA,IAAI,CAACI,IAAI,KAAK,MAAM,EAAE;QACxB,MAAMpC,SAAS,CAACqC,cAAc,CAACL,IAAI,CAACM,OAAO,CAAC;MAC9C;IACF,CAAC,CAAC,OAAOC,KAAK,EAAE;MACdC,OAAO,CAACD,KAAK,CAAC,+BAA+B,EAAEA,KAAK,CAAC;IACvD;EACF,CAAC;EAED,oBACE9B,IAAA,CAACH,IAAI;IAACmC,KAAK,EAAEC,MAAM,CAACC,SAAU;IAAAC,QAAA,eAC5BnC,IAAA,CAACF,OAAO;MACNsC,eAAe,EAAE,CAAC,GAAG,CAAE;MACvBC,MAAM,EAAE;QAAEnC,IAAI,EAAEkB;MAAW,CAAE;MAC7BkB,SAAS,EAAEjB,aAAc;MACzBkB,iBAAiB,EAAE,IAAK;MACxBC,iBAAiB,EAAE,IAAK;MACxBC,mBAAmB,EAAE,IAAK;MAC1BC,aAAa,EAAEA,CAAA,kBAAM1C,IAAA,CAACL,iBAAiB;QAACgD,IAAI,EAAC;MAAO,CAAE,CAAE;MACxDX,KAAK,EAAE;QAAEY,IAAI,EAAE,CAAC;QAAEnC,eAAe,EAAE;MAAc;IAAE,CACpD;EAAC,CACE,CAAC;AAEX,CAAC;AAED,MAAMwB,MAAM,GAAGrC,UAAU,CAACiD,MAAM,CAAC;EAC/BX,SAAS,EAAE;IACTU,IAAI,EAAE;EACR;AACF,CAAC,CAAC","ignoreList":[]}

package/lib/module/index.js

@@ -0,0 +1,4 @@
+"use strict";
+
+export * from "./components/markdown.js";
+//# sourceMappingURL=index.js.map

package/lib/module/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sourceRoot":"..\\..\\src","sources":["index.ts"],"mappings":";;AAAA,cAAc,0BAAuB","ignoreList":[]}

package/lib/module/package.json

@@ -0,0 +1 @@
+{"type":"module"}

package/lib/typescript/package.json

@@ -0,0 +1 @@
+{"type":"module"}

package/{dist → lib/typescript/src}/components/markdown.d.ts

@@ -1,7 +1,7 @@
-import React from "react";
+import React from 'react';
 interface Props {
     content: string;
-    theme?: "light" | "dark";
+    theme?: 'light' | 'dark';
     defaultDarkTheme?: {
         backgroundColor: string;
         textColor: string;
@@ -19,3 +19,4 @@ interface Props {
 }
 export declare const Markdown: React.FC<Props>;
 export {};
+//# sourceMappingURL=markdown.d.ts.map

package/lib/typescript/src/components/markdown.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"markdown.d.ts","sourceRoot":"","sources":["../../../../src/components/markdown.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAkB,MAAM,OAAO,CAAC;AAWvC,UAAU,KAAK;IACb,OAAO,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IACzB,gBAAgB,CAAC,EAAE;QACjB,eAAe,EAAE,MAAM,CAAC;QACxB,SAAS,EAAE,MAAM,CAAC;QAClB,mBAAmB,EAAE,MAAM,CAAC;QAC5B,YAAY,EAAE,MAAM,CAAC;QACrB,cAAc,EAAE,MAAM,CAAC;KACxB,CAAC;IACF,iBAAiB,CAAC,EAAE;QAClB,eAAe,EAAE,MAAM,CAAC;QACxB,SAAS,EAAE,MAAM,CAAC;QAClB,mBAAmB,EAAE,MAAM,CAAC;QAC5B,YAAY,EAAE,MAAM,CAAC;QACrB,cAAc,EAAE,MAAM,CAAC;KACxB,CAAC;CACH;AAED,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CA2SpC,CAAC"}

package/lib/typescript/src/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./components/markdown";
+//# sourceMappingURL=index.d.ts.map

package/lib/typescript/src/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAC"}

package/package.json

@@ -1,60 +1,123 @@
 {
   "name": "@codearcade/expo-markdown",
-  "type": "module",
-  "version": "1.0.6",
-  "module": "./dist/index.js",
-  "types": "./dist/index.d.ts",
-  "license": "MIT",
+  "version": "1.1.0",
+  "description": "Markdown component to render markdown in expo with syntax highlighting and styling",
+  "main": "./lib/module/index.js",
+  "types": "./lib/typescript/src/index.d.ts",
   "exports": {
     ".": {
-      "types": "./dist/index.d.ts",
-      "default": "./dist/index.js"
-    }
-  },
-  "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"
+      "source": "./src/index.tsx",
+      "types": "./lib/typescript/src/index.d.ts",
+      "default": "./lib/module/index.js"
+    },
+    "./package.json": "./package.json"
   },
   "files": [
-    "dist",
-    "README.md",
-    "package.json"
+    "src",
+    "lib",
+    "android",
+    "ios",
+    "cpp",
+    "*.podspec",
+    "react-native.config.js",
+    "!ios/build",
+    "!android/build",
+    "!android/gradle",
+    "!android/gradlew",
+    "!android/gradlew.bat",
+    "!android/local.properties",
+    "!**/__tests__",
+    "!**/__fixtures__",
+    "!**/__mocks__",
+    "!**/.*"
   ],
+  "scripts": {
+    "example": "yarn workspace @codearcade/expo-markdown-example",
+    "clean": "del-cli lib",
+    "prepare": "bob build",
+    "typecheck": "tsc",
+    "lint": "eslint \"**/*.{js,ts,tsx}\""
+  },
   "keywords": [
-    "expo",
-    "markdown",
-    "markdown-expo",
     "react-native",
-    "react-native-markdown",
-    "expo-markdown",
-    "@codearcade/expo-markdown"
+    "ios",
+    "android"
   ],
-  "publishConfig": {
-    "access": "public"
-  },
-  "homepage": "https://github.com/codearcade-io/expo-markdown.git#readme",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/codearcade-io/expo-markdown.git"
   },
-  "bugs": "https://github.com/codearcade-io/expo-markdown/issues",
-  "author": "CodeArcade <abhi@codearcade.io>",
+  "author": "Abhishek Singh <official.6packprogrammer@gmail.com> (https://github.com/meabhisingh)",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/codearcade-io/expo-markdown/issues"
+  },
+  "homepage": "https://github.com/codearcade-io/expo-markdown#readme",
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/"
+  },
   "devDependencies": {
-    "@types/bun": "^1.2.20",
-    "@types/markdown-it": "^14.1.2",
-    "tslib": "^2.8.1",
-    "typedoc": "^0.28.10",
-    "typescript": ">=5.0.0",
-    "@types/react": ">=18.0.0"
+    "@eslint/compat": "^1.3.2",
+    "@eslint/eslintrc": "^3.3.1",
+    "@eslint/js": "^9.35.0",
+    "@react-native/babel-preset": "0.83.0",
+    "@react-native/eslint-config": "0.83.0",
+    "@types/markdown-it": "^14",
+    "@types/react": "^19.1.12",
+    "del-cli": "^6.0.0",
+    "eslint": "^9.35.0",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-prettier": "^5.5.4",
+    "expo-clipboard": "^8.0.8",
+    "prettier": "^2.8.8",
+    "react": "19.1.0",
+    "react-native": "0.81.5",
+    "react-native-builder-bob": "^0.40.13",
+    "react-native-webview": "^13.16.0",
+    "typescript": "^5.9.2"
   },
   "peerDependencies": {
-    "expo": ">=52.0.0",
-    "expo-clipboard": ">=6.0.0",
-    "react": ">=18.0.0",
-    "react-native": ">=0.72.0",
-    "react-native-webview": ">=13.0.0"
+    "expo-clipboard": "*",
+    "react": "*",
+    "react-native": "*",
+    "react-native-webview": "*"
+  },
+  "workspaces": [
+    "example"
+  ],
+  "packageManager": "yarn@4.11.0",
+  "react-native-builder-bob": {
+    "source": "src",
+    "output": "lib",
+    "targets": [
+      [
+        "module",
+        {
+          "esm": true
+        }
+      ],
+      [
+        "typescript",
+        {
+          "project": "tsconfig.build.json"
+        }
+      ]
+    ]
+  },
+  "prettier": {
+    "quoteProps": "consistent",
+    "singleQuote": true,
+    "tabWidth": 2,
+    "trailingComma": "es5",
+    "useTabs": false
+  },
+  "create-react-native-library": {
+    "type": "library",
+    "languages": "js",
+    "tools": [
+      "eslint"
+    ],
+    "version": "0.57.0"
   },
   "dependencies": {
     "markdown-it": "^14.1.0"

package/src/components/markdown.tsx

@@ -0,0 +1,338 @@
+import * as Clipboard from 'expo-clipboard';
+import MarkdownIt from 'markdown-it';
+import React, { useMemo } from 'react';
+import { ActivityIndicator, StyleSheet, View } from 'react-native';
+import type { WebViewMessageEvent } from 'react-native-webview';
+import { WebView } from 'react-native-webview';
+
+const mdParser = new MarkdownIt({
+  html: true,
+  linkify: true,
+  typographer: true,
+});
+
+interface Props {
+  content: string;
+  theme?: 'light' | 'dark';
+  defaultDarkTheme?: {
+    backgroundColor: string;
+    textColor: string;
+    codeBackgroundColor: string;
+    primaryColor: string;
+    secondaryColor: string;
+  };
+  defaultLightTheme?: {
+    backgroundColor: string;
+    textColor: string;
+    codeBackgroundColor: string;
+    primaryColor: string;
+    secondaryColor: string;
+  };
+}
+
+export const Markdown: React.FC<Props> = ({
+  content,
+  theme = 'light',
+  defaultDarkTheme = {
+    backgroundColor: '#111111ff',
+    textColor: '#fff',
+    codeBackgroundColor: '#2d2d2d',
+    primaryColor: '#326fdfff',
+    secondaryColor: '#39c927ff',
+  },
+  defaultLightTheme = {
+    backgroundColor: '#ffffffff',
+    textColor: '#000',
+    codeBackgroundColor: '#f3f3f3ff',
+    primaryColor: '#326fdfff',
+    secondaryColor: '#39c927ff',
+  },
+}) => {
+  const activeTheme = theme === 'dark' ? defaultDarkTheme : defaultLightTheme;
+
+  // 1. Convert Markdown to HTML String
+  const htmlContent = useMemo(() => mdParser.render(content), [content]);
+
+  // 2. Select Prism Theme (CDN URLs)
+  // You can swap these URLs for any theme from the list you provided
+  const prismThemeUrl =
+    theme === 'dark'
+      ? 'https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-tomorrow.min.css'
+      : 'https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism.min.css';
+
+  // 3. Your Custom CSS (Converted to String)
+  // I pasted your exact CSS here, plus some WebView specific tweaks
+  const userStyles = `
+
+  * { box-sizing: border-box; }
+   
+      .markdownBody {
+      padding: 1rem;
+      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+      font-size: 16px; /* Body text size */
+      line-height: 1.6;
+      margin: 0;
+      background-color: ${activeTheme.backgroundColor} !important;
+      color: ${activeTheme.textColor} !important;
+    }
+
+ /* =========================
+       Headings
+    ========================= */
+    .markdownBody h1, .markdownBody h2, .markdownBody h3, 
+    .markdownBody h4, .markdownBody h5, .markdownBody h6 {
+      font-weight: 600;
+      margin-top: 2rem;
+      margin-bottom: 1rem;
+      line-height: 1.25;
+      color: inherit;
+    }
+
+    .markdownBody h1 { font-size: 1.875rem; padding-bottom: 0.3em; }
+    .markdownBody h2 { font-size: 1.5rem; padding-bottom: 0.3em; }
+    .markdownBody h3 { font-size: 1.25rem; }
+    
+    .markdownBody h1:first-child,
+    .markdownBody h2:first-child,
+    .markdownBody h3:first-child {
+      margin-top: 0;
+    }
+
+    /* =========================
+       Paragraphs & Links
+    ========================= */
+    .markdownBody p { margin-bottom: 1rem; }
+    
+    .markdownBody a { 
+      color: ${activeTheme.primaryColor}; 
+      text-decoration: none; 
+    }
+    .markdownBody a:hover { text-decoration: underline; }
+
+    /* =========================
+       Lists (UL, OL, LI) - Added!
+    ========================= */
+    .markdownBody ul, 
+    .markdownBody ol {
+      padding-left: 1.5rem; /* Indentation */
+      margin-bottom: 1rem;
+    }
+
+    .markdownBody ul { list-style-type: disc; }
+    .markdownBody ol { list-style-type: decimal; }
+
+    .markdownBody li {
+      margin-bottom: 0.25rem;
+    }
+    
+    /* Nested Lists */
+    .markdownBody li > ul,
+    .markdownBody li > ol {
+      margin-top: 0.25rem;
+      margin-bottom: 0;
+    }
+
+    /* =========================
+       Blockquotes
+    ========================= */
+    .markdownBody blockquote {
+      border-left: 4px solid rgba(0,0,0,0.02);
+      padding-left: 1rem;
+      font-style: italic;
+      color: rgba(0,0,0,0.5);
+      margin: 1rem 0;
+      margin-left: 0;
+    }
+
+    /* =========================
+       Tables
+    ========================= */
+    .markdownBody table {
+      width: 100%;
+      border-collapse: collapse;
+      margin-bottom: 1rem;
+      display: block;
+      overflow-x: auto;
+    }
+
+    .markdownBody th,
+    .markdownBody td {
+      border: 1px solid rgba(0,0,0,0.02);
+      padding: 0.5rem;
+      text-align: left;
+    }
+
+    .markdownBody th { font-weight: 600; background-color: rgba(0,0,0,0.02) }
+
+    /* =========================
+       Images & HR
+    ========================= */
+    .markdownBody img { max-width: 100%; height: auto; border-radius: 0.375rem; }
+    
+    .markdownBody hr {
+      border: none;
+      border-top: 2px solid rgba(0,0,0,0.02);
+      margin: 2rem 0;
+    }
+
+    /* =========================
+       Text Emphasis
+    ========================= */
+    .markdownBody strong { font-weight: 700; }
+    .markdownBody em { font-style: italic; }
+    .markdownBody del { text-decoration: line-through; opacity: 0.7; }
+
+   .code-wrapper {
+      position: relative; /* Anchor for the absolute button */
+      margin: 1.5rem 0;
+      border-radius: 0.5rem;
+      background-color: ${activeTheme.codeBackgroundColor} !important;
+      border: 1px solid ${theme === 'dark' ? '#3e3e3e' : '#e0e0e0'};
+      overflow: hidden; /* Ensures rounded corners */
+    }
+
+    /* 2. The Copy Button (Stays fixed in top right of container) */
+   .copy-btn {
+      position: absolute;
+      top: 6px;
+      right: 6px;
+      background: ${
+        theme === 'dark' ? 'rgba(255,255,255,0.1)' : 'rgba(0,0,0,0.05)'
+      };
+      color: ${theme === 'dark' ? '#ccc' : '#666'};
+      border: 1px solid ${theme === 'dark' ? '#555' : '#ddd'};
+      border-radius: 4px;
+      padding: 4px 10px;
+      font-size: 12px;
+      font-weight: 600;
+      cursor: pointer;
+      z-index: 10;
+    }
+    .copy-btn:active { transform: scale(0.95); opacity: 0.8; }
+    
+    /* Code Block Container */
+    pre {
+      background-color: ${
+        theme === 'dark'
+          ? defaultDarkTheme.codeBackgroundColor
+          : defaultLightTheme.codeBackgroundColor
+      } !important;
+      color: ${
+        theme === 'dark'
+          ? defaultDarkTheme.textColor
+          : defaultLightTheme.textColor
+      } !important;
+      position: relative;
+      padding: 1rem;
+      border-radius: 0.5rem;
+      overflow-x: auto;
+    }
+
+    /* 4. The Code Font (Smaller & Sharper) */
+    code {
+      font-family: "Menlo", "Monaco", "Courier New", monospace !important;
+      font-size: 13px !important;
+      line-height: 1.5;
+    }
+    
+    /* Inline code styling (not blocks) */
+    p > code {
+      background-color: rgba(0, 0, 0, 0.13);
+      padding: 2px 4px;
+      border-radius: 4px;
+      font-size: 13px; 
+    }
+
+  `;
+
+  const htmlSource = `
+<!DOCTYPE html>
+<html>
+<head>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link href="${prismThemeUrl}" rel="stylesheet" />
+  <style>${userStyles}</style>
+</head>
+<body class="markdownBody">
+  ${htmlContent}
+
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/autoloader/prism-autoloader.min.js"></script>
+
+  <script>
+    // 1. Add Copy Buttons to all <pre> blocks
+    document.querySelectorAll('pre').forEach((pre) => {
+
+
+    const wrapper = document.createElement('div');
+    wrapper.className = 'code-wrapper';
+
+    pre.parentNode.insertBefore(wrapper, pre);
+    wrapper.appendChild(pre);
+
+      // Create button
+      const button = document.createElement('button');
+      button.innerText = 'Copy';
+      button.className = 'copy-btn';
+      
+      // Add click event
+      button.addEventListener('click', () => {
+        // Get code text
+        const code = pre.querySelector('code') ? pre.querySelector('code').innerText : pre.innerText;
+        
+        // Send to React Native
+        window.ReactNativeWebView.postMessage(JSON.stringify({
+          type: 'copy',
+          payload: code
+        }));
+
+        // Visual feedback
+        const originalText = button.innerText;
+        button.innerText = 'Copied!';
+        setTimeout(() => { button.innerText = originalText; }, 2000);
+      });
+
+      wrapper.appendChild(button);
+
+      if (window.Prism) {
+      window.Prism.highlightAll();
+    }
+    });
+  </script>
+</body>
+</html>
+  `;
+
+  // 5. Handle Messages from WebView (Copy to Clipboard)
+  const handleMessage = async (event: WebViewMessageEvent) => {
+    try {
+      const data = JSON.parse(event.nativeEvent.data);
+      if (data.type === 'copy') {
+        await Clipboard.setStringAsync(data.payload);
+      }
+    } catch (error) {
+      console.error('Error parsing webview message', error);
+    }
+  };
+
+  return (
+    <View style={styles.container}>
+      <WebView
+        originWhitelist={['*']}
+        source={{ html: htmlSource }}
+        onMessage={handleMessage}
+        javaScriptEnabled={true}
+        domStorageEnabled={true}
+        startInLoadingState={true}
+        renderLoading={() => <ActivityIndicator size="large" />}
+        style={{ flex: 1, backgroundColor: 'transparent' }}
+      />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+});

package/{dist/index.d.ts → src/index.ts}

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