@codearcade/expo-markdown-native 1.0.0 → 2.0.1

package/README.md

@@ -1,37 +1,152 @@
-# @codearcade/expo-markdown-native-markdown
 
-Native Markdown rendering for Expo & React Native with built-in syntax highlighting.
+# @codearcade/expo-markdown-native 🚀
 
-## Installation
+A powerful, fully customizable, pure JavaScript/TypeScript Markdown renderer for React Native and Expo.
 
+Featuring beautiful native syntax highlighting, interactive code blocks, copy-to-clipboard functionality, and dark mode support out of the box.
 
-```sh
-npm install @codearcade/expo-markdown-native-markdown
+## ✨ Features (v2.0)
+
+*   **100% Pure JS/TS:** No native linking required! Works seamlessly with Expo Go and bare React Native.
+*   **Beautiful Code Blocks:** Built-in syntax highlighting using highlight.js.
+*   **Standalone CodeBlock:** Exported <CodeBlock /> component for when you just need to highlight a snippet without parsing full markdown.
+*   **Highly Customizable:** Style every single markdown node, plus granular control over code block containers, headers, and padding via the new codeStyle prop.
+*   **Interactive:** Built-in support for intercepting links and copying code to the clipboard.
+
+## 📦 Installation
+
+```bash 
+npm install @codearcade/expo-markdown-native  
+# or  
+yarn add @codearcade/expo-markdown-native  
+```
+
+_Note: If you haven't already, you may need to install peer dependencies depending on your package manager: react-native-svg and react-native-safe-area-context._
+
+## 🚀 Quick Start
+```ts
+import React from 'react';  
+import { SafeAreaView, Alert } from 'react-native';  
+import { Markdown } from '@codearcade/expo-markdown-native';  
+  
+const content = \`  
+\# Hello World  
+This is a \*\*bold\*\* statement.  
+  
+Here is some code:  
+\\\`\\\`\\\`javascript  
+const greeting = "Hello, React Native!";  
+console.log(greeting);  
+\\\`\\\`\\\`  
+\`;  
+  
+export default function App() {  
+return (  
+<SafeAreaView style={{ flex: 1, padding: 20 }}>  
+<Markdown  
+content={content}  
+theme="dark"  
+onCopy={(text) => Alert.alert('Copied to clipboard!')}  
+onLinkPress={(url) => {  
+console.log(\`Navigating to ${url}\`);  
+return true; // Return true to prevent default opening behavior  
+}}  
+/>  
+</SafeAreaView>  
+);  
+} 
 ```
 
+## 🎨 Styling Guide
+
+### 1\. Styling Code Blocks (`codeStyle`)
+
+In v2, we introduced a single, powerful `codeStyle` object to give you granular control over code blocks without prop-clutter.
+```ts
+<Markdown  
+content={content}  
+codeStyle={{  
+// 1. Outer Box: Border radius, margins, border colors  
+container: {  
+borderRadius: 16,  
+borderColor: '#444',  
+borderWidth: 1,  
+},  
+// 2. Header Bar: Height, background color, padding  
+header: {  
+backgroundColor: '#1e1e1e',  
+paddingVertical: 10,  
+},  
+// 3. Header Text: The "JAVASCRIPT" label  
+headerText: {  
+color: '#a0a0a0',  
+},  
+// 4. Inner Padding: Give the code some breathing room  
+content: {  
+padding: 20,  
+},  
+// 5. Code Text: Font size, line height  
+text: {  
+fontSize: 14,  
+}  
+}}  
+/>  
+```
 
-## Usage
+### 2\. Styling Markdown Nodes (`styles`)
+
+You can override the default text and layout styles by passing a styles object. The keys correspond to the Markdown nodes.
+```ts
+<Markdown  
+content={content}  
+styles={{  
+body: { fontSize: 16, color: '#333' },  
+heading1: { fontSize: 32, fontWeight: 'bold' },  
+code\_inline: { backgroundColor: '#f0f0f0', color: '#e01e5a', borderRadius: 4 },  
+link: { color: '#007AFF', textDecorationLine: 'underline' },  
+}}  
+/>  
+```
 
+**Available Style Keys:**
 
-```js
-import { ExpoMarkdownNativeMarkdownView } from "@codearcade/expo-markdown-native-markdown";
+`body`, `heading1` through `heading6`, `hr,` `strong`, `em`, `s` (strikethrough), `blockquote`, `bullet_list`, `ordered_list`, `list_item`, `code_inline`, `code_block`, `fence`, `table`, `thead`, `tbody`, `th`, `tr`, `td`, `link`, `image`.
 
-// ...
+## 🧩 Standalone `<CodeBlock />`
 
-<ExpoMarkdownNativeMarkdownView color="tomato" />
+Don't need a full markdown parser? You can use our syntax highlighter completely standalone!
+```ts
+import { CodeBlock } from '@codearcade/expo-markdown-native';  
+  
+<CodeBlock  
+content="console.log('Just a standalone snippet!');"  
+language="javascript"  
+appTheme="dark"  
+onCopy={() => console.log('Copied!')}  
+/>  
 ```
 
+## 📖 API Reference
 
-## Contributing
+### <Markdown /> Props
 
-- [Development workflow](CONTRIBUTING.md#development-workflow)
-- [Sending a pull request](CONTRIBUTING.md#sending-a-pull-request)
-- [Code of conduct](CODE_OF_CONDUCT.md)
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| content | string | Required | The raw markdown string to render. |
+| theme | 'light' | 'dark' | 'light' | Base theme for background/text colors. |
+| codeTheme | ReactStyle | github / monokai | Highlight.js theme object for syntax. |
+| styles | Record<string, Style> | {} | Override styles for specific markdown nodes. |
+| codeStyle | MarkdownCodeStyle | {} | Advanced styling for code block containers. |
+| onLinkPress | (url) => boolean | undefined | Fired when a link is pressed. |
+| onCopy | (text) => void | undefined | Fired when the code block copy button is pressed. |
 
-## License
+## ⚠️ Upgrading to v2.0
 
-MIT
+Version 2.0 is a complete rewrite to 100% TypeScript/JavaScript.
 
----
+*   **Native Modules Removed:** You no longer need to rebuild your native app or deal with auto-linking.
+*   **Prop Changes:** Individual props like codePadding, codeRadius, and codeHeaderHeight have been removed. Please use the new unified codeStyle prop instead.
 
-Made with [create-react-native-library](https://github.com/callstack/react-native-builder-bob)
+## 📄 License
+
+MIT

package/lib/module/codeblock.js

@@ -0,0 +1,117 @@
+"use strict";
+
+import { memo, useMemo, useState } from 'react';
+import { Platform, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
+import CodeHighlighter from 'react-native-code-highlighter';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const CodeBlock = /*#__PURE__*/memo(({
+  content,
+  language,
+  syntaxTheme,
+  appTheme,
+  codeStyle,
+  onCopy
+}) => {
+  const [copied, setCopied] = useState(false);
+  const handleCopy = async () => {
+    if (!onCopy) return;
+    try {
+      const textToCopy = content.replace(/\n$/, '');
+      await onCopy(textToCopy);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    } catch (e) {
+      console.warn('[Markdown] Copy failed', e);
+    }
+  };
+
+  // Dynamic Styles based on theme
+  const isDark = appTheme === 'dark';
+  const containerBg = isDark ? '#2d2d2d' : '#f5f5f5';
+  const borderColor = isDark ? 'rgba(255,255,255,0.1)' : '#e0e0e0';
+  const headerBg = isDark ? 'rgba(255,255,255,0.05)' : '#eaeaea';
+  const textColor = isDark ? '#fff' : '#333';
+  const textStyle = useMemo(() => [staticStyles.codeText, codeStyle.text], [codeStyle.text]);
+  const scrollProps = useMemo(() => ({
+    contentContainerStyle: [staticStyles.syntaxContainer, {
+      backgroundColor: 'transparent'
+    }, codeStyle.content]
+  }), [codeStyle.content]);
+  return /*#__PURE__*/_jsxs(View, {
+    style: [staticStyles.codeContainer, {
+      backgroundColor: containerBg,
+      borderColor
+    }, codeStyle.container],
+    children: [/*#__PURE__*/_jsxs(View, {
+      style: [staticStyles.codeHeader, {
+        backgroundColor: headerBg,
+        borderBottomColor: borderColor
+      }, codeStyle.header],
+      children: [/*#__PURE__*/_jsx(Text, {
+        style: [staticStyles.languageLabel, codeStyle.headerText],
+        children: language || 'Code'
+      }), onCopy && /*#__PURE__*/_jsx(TouchableOpacity, {
+        onPress: handleCopy,
+        style: staticStyles.copyButton,
+        children: /*#__PURE__*/_jsx(Text, {
+          style: [staticStyles.copyText, {
+            color: textColor
+          }],
+          children: copied ? 'Copied!' : 'Copy'
+        })
+      })]
+    }), /*#__PURE__*/_jsx(CodeHighlighter, {
+      language: language ?? 'javascript',
+      hljsStyle: syntaxTheme,
+      textStyle: textStyle,
+      scrollViewProps: scrollProps,
+      customStyle: {
+        backgroundColor: 'transparent'
+      },
+      children: content
+    })]
+  });
+});
+const staticStyles = StyleSheet.create({
+  codeContainer: {
+    marginVertical: 10,
+    borderRadius: 8,
+    overflow: 'hidden',
+    borderWidth: 1
+  },
+  codeHeader: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    paddingHorizontal: 12,
+    paddingVertical: 6,
+    borderBottomWidth: 1
+  },
+  languageLabel: {
+    color: '#888',
+    fontSize: 11,
+    fontWeight: '600',
+    textTransform: 'uppercase'
+  },
+  copyButton: {
+    padding: 4
+  },
+  copyText: {
+    fontSize: 11,
+    fontWeight: '600'
+  },
+  codeText: {
+    fontFamily: Platform.select({
+      ios: 'Menlo',
+      android: 'monospace',
+      default: 'monospace'
+    }),
+    lineHeight: 20
+  },
+  syntaxContainer: {
+    padding: 12,
+    margin: 0,
+    minWidth: '100%'
+  }
+});
+//# sourceMappingURL=codeblock.js.map

package/lib/module/codeblock.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["memo","useMemo","useState","Platform","StyleSheet","Text","TouchableOpacity","View","CodeHighlighter","jsx","_jsx","jsxs","_jsxs","CodeBlock","content","language","syntaxTheme","appTheme","codeStyle","onCopy","copied","setCopied","handleCopy","textToCopy","replace","setTimeout","e","console","warn","isDark","containerBg","borderColor","headerBg","textColor","textStyle","staticStyles","codeText","text","scrollProps","contentContainerStyle","syntaxContainer","backgroundColor","style","codeContainer","container","children","codeHeader","borderBottomColor","header","languageLabel","headerText","onPress","copyButton","copyText","color","hljsStyle","scrollViewProps","customStyle","create","marginVertical","borderRadius","overflow","borderWidth","flexDirection","justifyContent","alignItems","paddingHorizontal","paddingVertical","borderBottomWidth","fontSize","fontWeight","textTransform","padding","fontFamily","select","ios","android","default","lineHeight","margin","minWidth"],"sourceRoot":"..\\..\\src","sources":["codeblock.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/index.js

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

package/lib/module/index.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sourceRoot":"..\\..\\src","sources":["index.tsx"],"mappings":";;AAAA,cAAc,eAAY","ignoreList":[]}
+{"version":3,"names":[],"sourceRoot":"..\\..\\src","sources":["index.tsx"],"mappings":";;AAAA,cAAc,eAAY;AAC1B,cAAc,gBAAa","ignoreList":[]}

package/lib/module/markdown.js

@@ -1,19 +1,18 @@
 "use strict";
 
-import React, { memo, useMemo, useState } from 'react';
-import { Platform, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
-import CodeHighlighter from 'react-native-code-highlighter';
+import React, { useMemo } from 'react';
+import { Platform, Text } from 'react-native';
 import MarkdownDisplay from 'react-native-markdown-display';
 import { github, monokai } from 'react-syntax-highlighter/dist/esm/styles/hljs';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CodeBlock } from "./codeblock.js";
+import { jsx as _jsx } from "react/jsx-runtime";
 export const Markdown = ({
   content,
   theme = 'light',
   codeTheme,
   styles = {},
-  codeContainerStyle,
+  codeStyle = {},
   onLinkPress,
-  codeFontSize = 13,
   onCopy
 }) => {
   // 1. Select default Syntax Theme
@@ -21,6 +20,18 @@ export const Markdown = ({
 
   // 2. Define Custom Rules
   const rules = useMemo(() => ({
+    code_inline: (node, _children, _parent, style) => {
+      return /*#__PURE__*/_jsx(Text, {
+        style: [style, {
+          overflow: 'hidden',
+          fontFamily: Platform.select({
+            ios: 'Menlo',
+            default: 'monospace'
+          })
+        }],
+        children: node.content
+      }, node.key);
+    },
     fence: (node, _children, _parent, _style) => {
       const fenceNode = node;
       return /*#__PURE__*/_jsx(CodeBlock, {
@@ -28,8 +39,7 @@ export const Markdown = ({
         language: fenceNode.sourceInfo,
         syntaxTheme: activeCodeTheme,
         appTheme: theme,
-        codeFontSize: codeFontSize,
-        codeContainerStyle: codeContainerStyle,
+        codeStyle: codeStyle,
         onCopy: onCopy
       }, node.key);
     },
@@ -38,13 +48,12 @@ export const Markdown = ({
       language: null,
       syntaxTheme: activeCodeTheme,
       appTheme: theme,
-      codeFontSize: codeFontSize,
-      codeContainerStyle: codeContainerStyle,
+      codeStyle: codeStyle,
       onCopy: onCopy
     }, node.key)
-  }), [activeCodeTheme, theme, codeFontSize, onCopy]);
-  const baseStyles = theme === 'dark' ? markdownDark : markdownLight;
+  }), [activeCodeTheme, theme, codeStyle, onCopy]);
   const mergedStyles = useMemo(() => {
+    const baseStyles = theme === 'dark' ? markdownDark : markdownLight;
     const result = {
       ...baseStyles
     };
@@ -62,7 +71,7 @@ export const Markdown = ({
       }
     }
     return result;
-  }, [baseStyles, styles]);
+  }, [theme, styles]);
   return /*#__PURE__*/_jsx(MarkdownDisplay, {
     style: mergedStyles,
     rules: rules,
@@ -70,107 +79,6 @@ export const Markdown = ({
     children: content
   });
 };
-// --- Sub-Component: Code Block ---
-const CodeBlock = /*#__PURE__*/memo(({
-  content,
-  language,
-  syntaxTheme,
-  appTheme,
-  codeFontSize,
-  codeContainerStyle,
-  onCopy
-}) => {
-  const [copied, setCopied] = useState(false);
-  const handleCopy = async () => {
-    if (!onCopy) return;
-    try {
-      const textToCopy = content.replace(/\n$/, '');
-      await onCopy(textToCopy);
-      setCopied(true);
-      setTimeout(() => setCopied(false), 2000);
-    } catch (e) {
-      console.warn('[Markdown] Copy failed', e);
-    }
-  };
-
-  // Dynamic Styles based on theme
-  const isDark = appTheme === 'dark';
-  const containerBg = isDark ? '#2d2d2d' : '#f5f5f5';
-  const borderColor = isDark ? 'rgba(255,255,255,0.1)' : '#e0e0e0';
-  const headerBg = isDark ? 'rgba(255,255,255,0.05)' : '#eaeaea';
-  const textColor = isDark ? '#fff' : '#333';
-  const codeStyle = useMemo(() => ({
-    ...staticStyles.codeText,
-    fontSize: codeFontSize
-  }), [codeFontSize]);
-  return /*#__PURE__*/_jsxs(View, {
-    style: [staticStyles.codeContainer, {
-      backgroundColor: containerBg,
-      borderColor
-    }, codeContainerStyle],
-    children: [/*#__PURE__*/_jsxs(View, {
-      style: [staticStyles.codeHeader, {
-        backgroundColor: headerBg,
-        borderBottomColor: borderColor
-      }],
-      children: [/*#__PURE__*/_jsx(Text, {
-        style: staticStyles.languageLabel,
-        children: language || 'Code'
-      }), onCopy && /*#__PURE__*/_jsx(TouchableOpacity, {
-        onPress: handleCopy,
-        style: staticStyles.copyButton,
-        children: /*#__PURE__*/_jsx(Text, {
-          style: [staticStyles.copyText, {
-            color: textColor
-          }],
-          children: copied ? 'Copied!' : 'Copy'
-        })
-      })]
-    }), /*#__PURE__*/_jsx(CodeHighlighter, {
-      language: language ?? undefined,
-      hljsStyle: syntaxTheme,
-      textStyle: codeStyle,
-      children: content
-    })]
-  });
-});
-const staticStyles = StyleSheet.create({
-  codeContainer: {
-    marginVertical: 10,
-    borderRadius: 8,
-    overflow: 'hidden',
-    borderWidth: 1
-  },
-  codeHeader: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-    paddingHorizontal: 12,
-    paddingVertical: 6,
-    borderBottomWidth: 1
-  },
-  languageLabel: {
-    color: '#888',
-    fontSize: 11,
-    fontWeight: '600',
-    textTransform: 'uppercase'
-  },
-  copyButton: {
-    padding: 4
-  },
-  copyText: {
-    fontSize: 11,
-    fontWeight: '600'
-  },
-  codeText: {
-    fontFamily: Platform.select({
-      ios: 'Menlo',
-      android: 'monospace',
-      default: 'monospace'
-    }),
-    lineHeight: 20
-  }
-});
 const markdownLight = {
   body: {
     color: '#222',

package/lib/module/markdown.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","memo","useMemo","useState","Platform","StyleSheet","Text","TouchableOpacity","View","CodeHighlighter","MarkdownDisplay","github","monokai","jsx","_jsx","jsxs","_jsxs","Markdown","content","theme","codeTheme","styles","codeContainerStyle","onLinkPress","codeFontSize","onCopy","activeCodeTheme","rules","fence","node","_children","_parent","_style","fenceNode","CodeBlock","language","sourceInfo","syntaxTheme","appTheme","key","code_block","baseStyles","markdownDark","markdownLight","mergedStyles","result","userStyle","Array","isArray","style","children","copied","setCopied","handleCopy","textToCopy","replace","setTimeout","e","console","warn","isDark","containerBg","borderColor","headerBg","textColor","codeStyle","staticStyles","codeText","fontSize","codeContainer","backgroundColor","codeHeader","borderBottomColor","languageLabel","onPress","copyButton","copyText","color","undefined","hljsStyle","textStyle","create","marginVertical","borderRadius","overflow","borderWidth","flexDirection","justifyContent","alignItems","paddingHorizontal","paddingVertical","borderBottomWidth","fontWeight","textTransform","padding","fontFamily","select","ios","android","default","lineHeight","body","heading1","code_inline","blockquote","borderLeftColor"],"sourceRoot":"..\\..\\src","sources":["markdown.tsx"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["React","useMemo","Platform","Text","MarkdownDisplay","github","monokai","CodeBlock","jsx","_jsx","Markdown","content","theme","codeTheme","styles","codeStyle","onLinkPress","onCopy","activeCodeTheme","rules","code_inline","node","_children","_parent","style","overflow","fontFamily","select","ios","default","children","key","fence","_style","fenceNode","language","sourceInfo","syntaxTheme","appTheme","code_block","mergedStyles","baseStyles","markdownDark","markdownLight","result","userStyle","Array","isArray","body","color","fontSize","lineHeight","heading1","fontWeight","marginVertical","backgroundColor","borderRadius","blockquote","borderLeftColor"],"sourceRoot":"..\\..\\src","sources":["markdown.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/types/codeblock.js

@@ -0,0 +1,4 @@
+"use strict";
+
+export {};
+//# sourceMappingURL=codeblock.js.map

package/lib/module/types/codeblock.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sourceRoot":"..\\..\\..\\src","sources":["types/codeblock.ts"],"mappings":"","ignoreList":[]}

package/lib/module/types/index.js

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

package/lib/module/types/index.js.map

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

package/lib/module/types/markdown.js

@@ -0,0 +1,4 @@
+"use strict";
+
+export {};
+//# sourceMappingURL=markdown.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":[],"sourceRoot":"..\\..\\..\\src","sources":["types/markdown.ts"],"mappings":"","ignoreList":[]}

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

@@ -0,0 +1,3 @@
+import type { CodeBlockProps } from './types';
+export declare const CodeBlock: import("react").MemoExoticComponent<({ content, language, syntaxTheme, appTheme, codeStyle, onCopy, }: CodeBlockProps) => import("react/jsx-runtime").JSX.Element>;
+//# sourceMappingURL=codeblock.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"codeblock.d.ts","sourceRoot":"","sources":["../../../src/codeblock.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAE9C,eAAO,MAAM,SAAS,yGAQjB,cAAc,6CAkFlB,CAAC"}

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

@@ -1,2 +1,3 @@
 export * from './markdown';
+export * from './codeblock';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.tsx"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.tsx"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC;AAC3B,cAAc,aAAa,CAAC"}

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

@@ -1,16 +1,4 @@
 import React from 'react';
-import type { StyleProp, TextStyle, ViewStyle } from 'react-native';
-import type { ReactStyle } from 'react-native-code-highlighter';
-interface Props {
-    content: string;
-    theme?: 'light' | 'dark';
-    codeTheme?: ReactStyle;
-    styles?: Record<string, StyleProp<ViewStyle | TextStyle>>;
-    codeContainerStyle?: StyleProp<ViewStyle>;
-    codeFontSize?: number;
-    onLinkPress?: (url: string) => boolean;
-    onCopy?: (text: string) => Promise<void> | void;
-}
-export declare const Markdown: React.FC<Props>;
-export {};
+import type { MarkdownProps } from './types';
+export declare const Markdown: React.FC<MarkdownProps>;
 //# sourceMappingURL=markdown.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"markdown.d.ts","sourceRoot":"","sources":["../../../src/markdown.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkC,MAAM,OAAO,CAAC;AACvD,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAQpE,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,+BAA+B,CAAC;AAMhE,UAAU,KAAK;IACb,OAAO,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IACzB,SAAS,CAAC,EAAE,UAAU,CAAC;IACvB,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,SAAS,GAAG,SAAS,CAAC,CAAC,CAAC;IAC1D,kBAAkB,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC1C,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,OAAO,CAAC;IACvC,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC;CACjD;AAED,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAsFpC,CAAC"}
+{"version":3,"file":"markdown.d.ts","sourceRoot":"","sources":["../../../src/markdown.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkB,MAAM,OAAO,CAAC;AAMvC,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAE7C,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CA2G5C,CAAC"}

package/lib/typescript/src/types/codeblock.d.ts

@@ -0,0 +1,41 @@
+import type { ReactStyle } from 'react-native-code-highlighter';
+import type { MarkdownCodeStyle } from './markdown';
+/**
+ * Props for the internal `CodeBlock` component.
+ * This component handles the rendering of fenced code blocks with syntax highlighting,
+ * a header, and an optional copy button.
+ */
+interface CodeBlockProps {
+    /**
+     * The raw code string to be highlighted and displayed.
+     * This is the content inside the markdown fence.
+     */
+    content: string;
+    /**
+     * The programming language identifier specified in the markdown fence (e.g., 'js', 'python').
+     * If null or undefined, the highlighter will attempt to auto-detect or default to text.
+     */
+    language?: string | null;
+    /**
+     * The Highlight.js theme object used for syntax coloring.
+     * Examples: `monokai`, `github`, `dracula`.
+     */
+    syntaxTheme: ReactStyle;
+    /**
+     * Custom style object to override the look of the code block.
+     * Allows styling the outer container, header, inner content padding, and font text.
+     */
+    codeStyle: MarkdownCodeStyle;
+    /**
+     * The current theme of the application.
+     * Used to determine default background colors and border colors if no overrides are provided.
+     */
+    appTheme: 'light' | 'dark';
+    /**
+     * Optional callback triggered when the "Copy" button is pressed.
+     * @param text The raw code content that was copied.
+     */
+    onCopy?: (text: string) => Promise<void> | void;
+}
+export type { CodeBlockProps };
+//# sourceMappingURL=codeblock.d.ts.map

package/lib/typescript/src/types/codeblock.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"codeblock.d.ts","sourceRoot":"","sources":["../../../../src/types/codeblock.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,+BAA+B,CAAC;AAChE,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,YAAY,CAAC;AAEpD;;;;GAIG;AACH,UAAU,cAAc;IACtB;;;OAGG;IACH,OAAO,EAAE,MAAM,CAAC;IAEhB;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAEzB;;;OAGG;IACH,WAAW,EAAE,UAAU,CAAC;IAExB;;;OAGG;IACH,SAAS,EAAE,iBAAiB,CAAC;IAE7B;;;OAGG;IACH,QAAQ,EAAE,OAAO,GAAG,MAAM,CAAC;IAE3B;;;OAGG;IACH,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC;CACjD;AAED,YAAY,EAAE,cAAc,EAAE,CAAC"}

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

@@ -0,0 +1,3 @@
+export * from './markdown';
+export * from './codeblock';
+//# sourceMappingURL=index.d.ts.map

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

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

package/lib/typescript/src/types/markdown.d.ts

@@ -0,0 +1,77 @@
+import type { StyleProp, TextStyle, ViewStyle } from 'react-native';
+import type { ReactStyle } from 'react-native-code-highlighter';
+/**
+ * Configuration object for customizing the appearance of code blocks.
+ * Use this to style the container, header, scrollable content area, and the code text itself.
+ */
+interface MarkdownCodeStyle {
+    /**
+     * Styles the outer container of the code block.
+     * Useful for setting `borderRadius`, `borderColor`, `borderWidth`, and `margin`.
+     */
+    container?: StyleProp<ViewStyle>;
+    /**
+     * Styles the header bar (where the language label and copy button reside).
+     * Useful for setting `backgroundColor`, `height`, `padding`, or `borderBottomWidth`.
+     */
+    header?: StyleProp<ViewStyle>;
+    /**
+     * Styles the language label text (e.g., "JAVASCRIPT").
+     * Useful for setting `fontSize`, `color`, or `fontWeight`.
+     */
+    headerText?: StyleProp<TextStyle>;
+    /**
+     * Styles the internal scrollable content container.
+     * **Crucial for padding:** Use this to set the `padding` around the code text inside the scroll view.
+     */
+    content?: StyleProp<ViewStyle>;
+    /**
+     * Styles the code text itself.
+     * Useful for setting `fontSize`, `fontFamily`, and `lineHeight`.
+     * Note: Colors are typically handled by the `syntaxTheme`, but you can override base text styles here.
+     */
+    text?: StyleProp<TextStyle>;
+}
+/**
+ * Props for the main `Markdown` component.
+ */
+interface MarkdownProps {
+    /**
+     * The raw markdown string to be parsed and rendered.
+     */
+    content: string;
+    /**
+     * The base theme for the markdown content.
+     * Determines the default background colors and text colors for non-code elements.
+     * @default 'light'
+     */
+    theme?: 'light' | 'dark';
+    /**
+     * A specific Highlight.js theme object for syntax highlighting in code blocks.
+     * If not provided, defaults to `github` (light) or `monokai` (dark) based on the `theme` prop.
+     */
+    codeTheme?: ReactStyle;
+    /**
+     * A generic style object to override standard markdown elements.
+     * Keys correspond to markdown nodes (e.g., `body`, `heading1`, `link`, `blockquote`).
+     */
+    styles?: Record<string, StyleProp<ViewStyle | TextStyle>>;
+    /**
+     * Advanced styling configuration for code blocks.
+     * Allows granular control over the code container, header, and inner content.
+     */
+    codeStyle?: MarkdownCodeStyle;
+    /**
+     * Callback triggered when a link is pressed.
+     * @param url The URL of the link.
+     * @returns `true` to prevent the default behavior (opening the link), `false` or `undefined` to let it open.
+     */
+    onLinkPress?: (url: string) => boolean;
+    /**
+     * Callback triggered when the "Copy" button in a code block is pressed.
+     * @param text The raw code content that was copied.
+     */
+    onCopy?: (text: string) => Promise<void> | void;
+}
+export type { MarkdownCodeStyle, MarkdownProps };
+//# sourceMappingURL=markdown.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"markdown.d.ts","sourceRoot":"","sources":["../../../../src/types/markdown.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACpE,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,+BAA+B,CAAC;AAEhE;;;GAGG;AACH,UAAU,iBAAiB;IACzB;;;OAGG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAEjC;;;OAGG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAE9B;;;OAGG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAElC;;;OAGG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAE/B;;;;OAIG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC7B;AAED;;GAEG;AACH,UAAU,aAAa;IACrB;;OAEG;IACH,OAAO,EAAE,MAAM,CAAC;IAEhB;;;;OAIG;IACH,KAAK,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IAEzB;;;OAGG;IACH,SAAS,CAAC,EAAE,UAAU,CAAC;IAEvB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,SAAS,GAAG,SAAS,CAAC,CAAC,CAAC;IAE1D;;;OAGG;IACH,SAAS,CAAC,EAAE,iBAAiB,CAAC;IAE9B;;;;OAIG;IACH,WAAW,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,OAAO,CAAC;IAEvC;;;OAGG;IACH,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC;CACjD;AAED,YAAY,EAAE,iBAAiB,EAAE,aAAa,EAAE,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@codearcade/expo-markdown-native",
-  "version": "1.0.0",
+  "version": "2.0.1",
   "description": "Native Markdown rendering for Expo & React Native with built-in syntax highlighting.",
   "main": "./lib/module/index.js",
   "private": false,

package/src/codeblock.tsx

@@ -0,0 +1,145 @@
+import { memo, useMemo, useState } from 'react';
+import {
+  Platform,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  View,
+} from 'react-native';
+import CodeHighlighter from 'react-native-code-highlighter';
+import type { CodeBlockProps } from './types';
+
+export const CodeBlock = memo(
+  ({
+    content,
+    language,
+    syntaxTheme,
+    appTheme,
+    codeStyle,
+    onCopy,
+  }: CodeBlockProps) => {
+    const [copied, setCopied] = useState(false);
+
+    const handleCopy = async () => {
+      if (!onCopy) return;
+
+      try {
+        const textToCopy = content.replace(/\n$/, '');
+        await onCopy(textToCopy);
+        setCopied(true);
+        setTimeout(() => setCopied(false), 2000);
+      } catch (e) {
+        console.warn('[Markdown] Copy failed', e);
+      }
+    };
+
+    // Dynamic Styles based on theme
+    const isDark = appTheme === 'dark';
+    const containerBg = isDark ? '#2d2d2d' : '#f5f5f5';
+    const borderColor = isDark ? 'rgba(255,255,255,0.1)' : '#e0e0e0';
+    const headerBg = isDark ? 'rgba(255,255,255,0.05)' : '#eaeaea';
+    const textColor = isDark ? '#fff' : '#333';
+
+    const textStyle = useMemo(
+      () => [staticStyles.codeText, codeStyle.text],
+      [codeStyle.text]
+    );
+
+    const scrollProps = useMemo(
+      () => ({
+        contentContainerStyle: [
+          staticStyles.syntaxContainer,
+          { backgroundColor: 'transparent' },
+          codeStyle.content,
+        ],
+      }),
+      [codeStyle.content]
+    );
+
+    return (
+      <View
+        style={[
+          staticStyles.codeContainer,
+          { backgroundColor: containerBg, borderColor },
+          codeStyle.container,
+        ]}
+      >
+        <View
+          style={[
+            staticStyles.codeHeader,
+            { backgroundColor: headerBg, borderBottomColor: borderColor },
+            codeStyle.header,
+          ]}
+        >
+          <Text style={[staticStyles.languageLabel, codeStyle.headerText]}>
+            {language || 'Code'}
+          </Text>
+
+          {onCopy && (
+            <TouchableOpacity
+              onPress={handleCopy}
+              style={staticStyles.copyButton}
+            >
+              <Text style={[staticStyles.copyText, { color: textColor }]}>
+                {copied ? 'Copied!' : 'Copy'}
+              </Text>
+            </TouchableOpacity>
+          )}
+        </View>
+
+        <CodeHighlighter
+          language={language ?? 'javascript'}
+          hljsStyle={syntaxTheme}
+          textStyle={textStyle}
+          scrollViewProps={scrollProps}
+          customStyle={{ backgroundColor: 'transparent' }}
+        >
+          {content}
+        </CodeHighlighter>
+      </View>
+    );
+  }
+);
+
+const staticStyles = StyleSheet.create({
+  codeContainer: {
+    marginVertical: 10,
+    borderRadius: 8,
+    overflow: 'hidden',
+    borderWidth: 1,
+  },
+  codeHeader: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    paddingHorizontal: 12,
+    paddingVertical: 6,
+    borderBottomWidth: 1,
+  },
+  languageLabel: {
+    color: '#888',
+    fontSize: 11,
+    fontWeight: '600',
+    textTransform: 'uppercase',
+  },
+  copyButton: {
+    padding: 4,
+  },
+  copyText: {
+    fontSize: 11,
+    fontWeight: '600',
+  },
+  codeText: {
+    fontFamily: Platform.select({
+      ios: 'Menlo',
+      android: 'monospace',
+      default: 'monospace',
+    }),
+    lineHeight: 20,
+  },
+  syntaxContainer: {
+    padding: 12,
+    margin: 0,
+    minWidth: '100%',
+  },
+});

package/src/index.tsx

@@ -1 +1,2 @@
 export * from './markdown';
+export * from './codeblock';

package/src/markdown.tsx

@@ -1,37 +1,18 @@
-import React, { memo, useMemo, useState } from 'react';
-import type { StyleProp, TextStyle, ViewStyle } from 'react-native';
-import {
-  Platform,
-  StyleSheet,
-  Text,
-  TouchableOpacity,
-  View,
-} from 'react-native';
-import type { ReactStyle } from 'react-native-code-highlighter';
-import CodeHighlighter from 'react-native-code-highlighter';
+import React, { useMemo } from 'react';
+import { Platform, Text } from 'react-native';
 import type { ASTNode } from 'react-native-markdown-display';
 import MarkdownDisplay from 'react-native-markdown-display';
 import { github, monokai } from 'react-syntax-highlighter/dist/esm/styles/hljs';
+import { CodeBlock } from './codeblock';
+import type { MarkdownProps } from './types';
 
-interface Props {
-  content: string;
-  theme?: 'light' | 'dark';
-  codeTheme?: ReactStyle;
-  styles?: Record<string, StyleProp<ViewStyle | TextStyle>>;
-  codeContainerStyle?: StyleProp<ViewStyle>;
-  codeFontSize?: number;
-  onLinkPress?: (url: string) => boolean;
-  onCopy?: (text: string) => Promise<void> | void;
-}
-
-export const Markdown: React.FC<Props> = ({
+export const Markdown: React.FC<MarkdownProps> = ({
   content,
   theme = 'light',
   codeTheme,
   styles = {},
-  codeContainerStyle,
+  codeStyle = {},
   onLinkPress,
-  codeFontSize = 13,
   onCopy,
 }) => {
   // 1. Select default Syntax Theme
@@ -40,6 +21,31 @@ export const Markdown: React.FC<Props> = ({
   // 2. Define Custom Rules
   const rules = useMemo(
     () => ({
+      code_inline: (
+        node: ASTNode,
+        _children: any,
+        _parent: any,
+        style: any
+      ) => {
+        return (
+          <Text
+            key={node.key}
+            style={[
+              style,
+              {
+                overflow: 'hidden',
+                fontFamily: Platform.select({
+                  ios: 'Menlo',
+                  default: 'monospace',
+                }),
+              },
+            ]}
+          >
+            {node.content}
+          </Text>
+        );
+      },
+
       fence: (node: ASTNode, _children: any, _parent: any, _style: any) => {
         const fenceNode = node as ASTNode & { sourceInfo: string };
 
@@ -50,8 +56,7 @@ export const Markdown: React.FC<Props> = ({
             language={fenceNode.sourceInfo}
             syntaxTheme={activeCodeTheme}
             appTheme={theme}
-            codeFontSize={codeFontSize}
-            codeContainerStyle={codeContainerStyle}
+            codeStyle={codeStyle}
             onCopy={onCopy}
           />
         );
@@ -68,18 +73,16 @@ export const Markdown: React.FC<Props> = ({
           language={null}
           syntaxTheme={activeCodeTheme}
           appTheme={theme}
-          codeFontSize={codeFontSize}
-          codeContainerStyle={codeContainerStyle}
+          codeStyle={codeStyle}
           onCopy={onCopy}
         />
       ),
     }),
-    [activeCodeTheme, theme, codeFontSize, onCopy]
+    [activeCodeTheme, theme, codeStyle, onCopy]
   );
 
-  const baseStyles = theme === 'dark' ? markdownDark : markdownLight;
-
   const mergedStyles = useMemo(() => {
+    const baseStyles = theme === 'dark' ? markdownDark : markdownLight;
     const result: Record<string, any> = { ...baseStyles };
 
     for (const key in styles) {
@@ -99,7 +102,7 @@ export const Markdown: React.FC<Props> = ({
     }
 
     return result;
-  }, [baseStyles, styles]);
+  }, [theme, styles]);
 
   return (
     <MarkdownDisplay
@@ -112,135 +115,6 @@ export const Markdown: React.FC<Props> = ({
   );
 };
 
-interface CodeBlockProps {
-  content: string;
-  language?: string | null;
-  syntaxTheme: ReactStyle;
-  codeContainerStyle?: StyleProp<ViewStyle>;
-  appTheme: 'light' | 'dark';
-  codeFontSize: number;
-  onCopy?: (text: string) => Promise<void> | void;
-}
-
-// --- Sub-Component: Code Block ---
-const CodeBlock = memo(
-  ({
-    content,
-    language,
-    syntaxTheme,
-    appTheme,
-    codeFontSize,
-    codeContainerStyle,
-    onCopy,
-  }: CodeBlockProps) => {
-    const [copied, setCopied] = useState(false);
-
-    const handleCopy = async () => {
-      if (!onCopy) return;
-
-      try {
-        const textToCopy = content.replace(/\n$/, '');
-        await onCopy(textToCopy);
-        setCopied(true);
-        setTimeout(() => setCopied(false), 2000);
-      } catch (e) {
-        console.warn('[Markdown] Copy failed', e);
-      }
-    };
-
-    // Dynamic Styles based on theme
-    const isDark = appTheme === 'dark';
-    const containerBg = isDark ? '#2d2d2d' : '#f5f5f5';
-    const borderColor = isDark ? 'rgba(255,255,255,0.1)' : '#e0e0e0';
-    const headerBg = isDark ? 'rgba(255,255,255,0.05)' : '#eaeaea';
-    const textColor = isDark ? '#fff' : '#333';
-
-    const codeStyle = useMemo(
-      () => ({
-        ...staticStyles.codeText,
-        fontSize: codeFontSize,
-      }),
-      [codeFontSize]
-    );
-
-    return (
-      <View
-        style={[
-          staticStyles.codeContainer,
-          { backgroundColor: containerBg, borderColor },
-          codeContainerStyle,
-        ]}
-      >
-        <View
-          style={[
-            staticStyles.codeHeader,
-            { backgroundColor: headerBg, borderBottomColor: borderColor },
-          ]}
-        >
-          <Text style={staticStyles.languageLabel}>{language || 'Code'}</Text>
-
-          {onCopy && (
-            <TouchableOpacity
-              onPress={handleCopy}
-              style={staticStyles.copyButton}
-            >
-              <Text style={[staticStyles.copyText, { color: textColor }]}>
-                {copied ? 'Copied!' : 'Copy'}
-              </Text>
-            </TouchableOpacity>
-          )}
-        </View>
-
-        <CodeHighlighter
-          language={language ?? undefined}
-          hljsStyle={syntaxTheme}
-          textStyle={codeStyle}
-        >
-          {content}
-        </CodeHighlighter>
-      </View>
-    );
-  }
-);
-
-const staticStyles = StyleSheet.create({
-  codeContainer: {
-    marginVertical: 10,
-    borderRadius: 8,
-    overflow: 'hidden',
-    borderWidth: 1,
-  },
-  codeHeader: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-    paddingHorizontal: 12,
-    paddingVertical: 6,
-    borderBottomWidth: 1,
-  },
-  languageLabel: {
-    color: '#888',
-    fontSize: 11,
-    fontWeight: '600',
-    textTransform: 'uppercase',
-  },
-  copyButton: {
-    padding: 4,
-  },
-  copyText: {
-    fontSize: 11,
-    fontWeight: '600',
-  },
-  codeText: {
-    fontFamily: Platform.select({
-      ios: 'Menlo',
-      android: 'monospace',
-      default: 'monospace',
-    }),
-    lineHeight: 20,
-  },
-});
-
 const markdownLight = {
   body: { color: '#222', fontSize: 16, lineHeight: 24 },
   heading1: {

package/src/types/codeblock.ts

@@ -0,0 +1,47 @@
+import type { ReactStyle } from 'react-native-code-highlighter';
+import type { MarkdownCodeStyle } from './markdown';
+
+/**
+ * Props for the internal `CodeBlock` component.
+ * This component handles the rendering of fenced code blocks with syntax highlighting,
+ * a header, and an optional copy button.
+ */
+interface CodeBlockProps {
+  /**
+   * The raw code string to be highlighted and displayed.
+   * This is the content inside the markdown fence.
+   */
+  content: string;
+
+  /**
+   * The programming language identifier specified in the markdown fence (e.g., 'js', 'python').
+   * If null or undefined, the highlighter will attempt to auto-detect or default to text.
+   */
+  language?: string | null;
+
+  /**
+   * The Highlight.js theme object used for syntax coloring.
+   * Examples: `monokai`, `github`, `dracula`.
+   */
+  syntaxTheme: ReactStyle;
+
+  /**
+   * Custom style object to override the look of the code block.
+   * Allows styling the outer container, header, inner content padding, and font text.
+   */
+  codeStyle: MarkdownCodeStyle;
+
+  /**
+   * The current theme of the application.
+   * Used to determine default background colors and border colors if no overrides are provided.
+   */
+  appTheme: 'light' | 'dark';
+
+  /**
+   * Optional callback triggered when the "Copy" button is pressed.
+   * @param text The raw code content that was copied.
+   */
+  onCopy?: (text: string) => Promise<void> | void;
+}
+
+export type { CodeBlockProps };

package/src/types/index.ts

@@ -0,0 +1,2 @@
+export * from './markdown';
+export * from './codeblock';

package/src/types/markdown.ts

@@ -0,0 +1,89 @@
+import type { StyleProp, TextStyle, ViewStyle } from 'react-native';
+import type { ReactStyle } from 'react-native-code-highlighter';
+
+/**
+ * Configuration object for customizing the appearance of code blocks.
+ * Use this to style the container, header, scrollable content area, and the code text itself.
+ */
+interface MarkdownCodeStyle {
+  /**
+   * Styles the outer container of the code block.
+   * Useful for setting `borderRadius`, `borderColor`, `borderWidth`, and `margin`.
+   */
+  container?: StyleProp<ViewStyle>;
+
+  /**
+   * Styles the header bar (where the language label and copy button reside).
+   * Useful for setting `backgroundColor`, `height`, `padding`, or `borderBottomWidth`.
+   */
+  header?: StyleProp<ViewStyle>;
+
+  /**
+   * Styles the language label text (e.g., "JAVASCRIPT").
+   * Useful for setting `fontSize`, `color`, or `fontWeight`.
+   */
+  headerText?: StyleProp<TextStyle>;
+
+  /**
+   * Styles the internal scrollable content container.
+   * **Crucial for padding:** Use this to set the `padding` around the code text inside the scroll view.
+   */
+  content?: StyleProp<ViewStyle>;
+
+  /**
+   * Styles the code text itself.
+   * Useful for setting `fontSize`, `fontFamily`, and `lineHeight`.
+   * Note: Colors are typically handled by the `syntaxTheme`, but you can override base text styles here.
+   */
+  text?: StyleProp<TextStyle>;
+}
+
+/**
+ * Props for the main `Markdown` component.
+ */
+interface MarkdownProps {
+  /**
+   * The raw markdown string to be parsed and rendered.
+   */
+  content: string;
+
+  /**
+   * The base theme for the markdown content.
+   * Determines the default background colors and text colors for non-code elements.
+   * @default 'light'
+   */
+  theme?: 'light' | 'dark';
+
+  /**
+   * A specific Highlight.js theme object for syntax highlighting in code blocks.
+   * If not provided, defaults to `github` (light) or `monokai` (dark) based on the `theme` prop.
+   */
+  codeTheme?: ReactStyle;
+
+  /**
+   * A generic style object to override standard markdown elements.
+   * Keys correspond to markdown nodes (e.g., `body`, `heading1`, `link`, `blockquote`).
+   */
+  styles?: Record<string, StyleProp<ViewStyle | TextStyle>>;
+
+  /**
+   * Advanced styling configuration for code blocks.
+   * Allows granular control over the code container, header, and inner content.
+   */
+  codeStyle?: MarkdownCodeStyle;
+
+  /**
+   * Callback triggered when a link is pressed.
+   * @param url The URL of the link.
+   * @returns `true` to prevent the default behavior (opening the link), `false` or `undefined` to let it open.
+   */
+  onLinkPress?: (url: string) => boolean;
+
+  /**
+   * Callback triggered when the "Copy" button in a code block is pressed.
+   * @param text The raw code content that was copied.
+   */
+  onCopy?: (text: string) => Promise<void> | void;
+}
+
+export type { MarkdownCodeStyle, MarkdownProps };