1 files changed, 31 insertions, 12 deletions
diff --git a/apps/mobile/components/bookmarks/BookmarkLinkPreview.tsx b/apps/mobile/components/bookmarks/BookmarkLinkPreview.tsx
index 730bcd08..e0b592d6 100644
--- a/apps/mobile/components/bookmarks/BookmarkLinkPreview.tsx
+++ b/apps/mobile/components/bookmarks/BookmarkLinkPreview.tsx
@@ -5,6 +5,7 @@ import WebView from "react-native-webview";
 import { WebViewSourceUri } from "react-native-webview/lib/WebViewTypes";
 import { Text } from "@/components/ui/Text";
 import { useAssetUrl } from "@/lib/hooks";
+import { useReaderSettings, WEBVIEW_FONT_FAMILIES } from "@/lib/readerSettings";
 import { api } from "@/lib/trpc";
 import { useColorScheme } from "@/lib/useColorScheme";
 
@@ -38,6 +39,7 @@ export function BookmarkLinkReaderPreview({
   bookmark: ZBookmark;
 }) {
   const { isDarkColorScheme: isDark } = useColorScheme();
+  const { settings: readerSettings } = useReaderSettings();
 
   const {
     data: bookmarkWithContent,
@@ -61,6 +63,10 @@ export function BookmarkLinkReaderPreview({
     throw new Error("Wrong content type rendered");
   }
 
+  const fontFamily = WEBVIEW_FONT_FAMILIES[readerSettings.fontFamily];
+  const fontSize = readerSettings.fontSize;
+  const lineHeight = readerSettings.lineHeight;
+
   return (
     <View className="flex-1 bg-background">
       <WebView
@@ -73,8 +79,9 @@ export function BookmarkLinkReaderPreview({
                   <meta name="viewport" content="width=device-width, initial-scale=1.0">
                   <style>
                     body {
-                      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
-                      line-height: 1.6;
+                      font-family: ${fontFamily};
+                      font-size: ${fontSize}px;
+                      line-height: ${lineHeight};
                       color: ${isDark ? "#e5e7eb" : "#374151"};
                       margin: 0;
                       padding: 16px;
@@ -85,17 +92,29 @@ export function BookmarkLinkReaderPreview({
                     img { max-width: 100%; height: auto; border-radius: 8px; }
                     a { color: #3b82f6; text-decoration: none; }
                     a:hover { text-decoration: underline; }
-                    blockquote { 
-                      border-left: 4px solid ${isDark ? "#374151" : "#e5e7eb"}; 
-                      margin: 1em 0; 
-                      padding-left: 1em; 
-                      color: ${isDark ? "#9ca3af" : "#6b7280"}; 
+                    blockquote {
+                      border-left: 4px solid ${isDark ? "#374151" : "#e5e7eb"};
+                      margin: 1em 0;
+                      padding-left: 1em;
+                      color: ${isDark ? "#9ca3af" : "#6b7280"};
+                    }
+                    pre, code {
+                      font-family: ui-monospace, Menlo, Monaco, 'Courier New', monospace;
+                      background: ${isDark ? "#1f2937" : "#f3f4f6"};
+                    }
+                    pre {
+                      padding: 1em;
+                      border-radius: 6px;
+                      overflow-x: auto;
+                    }
+                    code {
+                      padding: 0.2em 0.4em;
+                      border-radius: 3px;
+                      font-size: 0.9em;
                     }
-                    pre { 
-                      background: ${isDark ? "#1f2937" : "#f3f4f6"}; 
-                      padding: 1em; 
-                      border-radius: 6px; 
-                      overflow-x: auto; 
+                    pre code {
+                      padding: 0;
+                      background: none;
                     }
                   </style>
                 </head>