diff --git a/src/components/Bookmarks.tsx b/src/components/Bookmarks.tsx index b1b5cf47..576b6070 100644 --- a/src/components/Bookmarks.tsx +++ b/src/components/Bookmarks.tsx @@ -125,6 +125,7 @@ const Bookmarks: React.FC = ({ relayPool, onLogout }) => { loading={readerLoading} title={readerContent?.title} html={readerContent?.html} + markdown={readerContent?.markdown} selectedUrl={selectedUrl} /> diff --git a/src/components/ContentPanel.tsx b/src/components/ContentPanel.tsx index 1ee6f84f..4a2515a5 100644 --- a/src/components/ContentPanel.tsx +++ b/src/components/ContentPanel.tsx @@ -1,13 +1,16 @@ import React from 'react' +import ReactMarkdown from 'react-markdown' +import remarkGfm from 'remark-gfm' interface ContentPanelProps { loading: boolean title?: string html?: string + markdown?: string selectedUrl?: string } -const ContentPanel: React.FC = ({ loading, title, html, selectedUrl }) => { +const ContentPanel: React.FC = ({ loading, title, html, markdown, selectedUrl }) => { if (!selectedUrl) { return (
@@ -27,7 +30,13 @@ const ContentPanel: React.FC = ({ loading, title, html, selec return (
{title &&

{title}

} - {html ? ( + {markdown ? ( +
+ + {markdown} + +
+ ) : html ? (
) : (
diff --git a/src/index.css b/src/index.css index 592c6b67..ad5a2fc7 100644 --- a/src/index.css +++ b/src/index.css @@ -298,6 +298,45 @@ body { word-break: break-word; } +.content-markdown { + color: #ddd; + line-height: 1.7; +} + +.content-markdown h1, +.content-markdown h2, +.content-markdown h3, +.content-markdown h4 { + margin-top: 1.2rem; +} + +.content-markdown p { + margin: 0.5rem 0; +} + +.content-markdown a { + color: #8ab4f8; + text-decoration: none; +} + +.content-markdown a:hover { text-decoration: underline; } + +.content-markdown pre, +.content-markdown code { + background: #111; + border: 1px solid #333; + border-radius: 6px; +} + +.content-markdown pre { + padding: 0.75rem; + overflow: auto; +} + +.content-markdown code { + padding: 0.1rem 0.3rem; +} + .bookmark-item { background: #1a1a1a; padding: 1.5rem; diff --git a/src/services/readerService.ts b/src/services/readerService.ts index 8b2b97ab..b7489f19 100644 --- a/src/services/readerService.ts +++ b/src/services/readerService.ts @@ -4,7 +4,8 @@ export interface ReadableContent { url: string title?: string - html: string + html?: string + markdown?: string } function toProxyUrl(url: string): string { @@ -19,8 +20,24 @@ export async function fetchReadableContent(targetUrl: string): Promise]*>(.*?)<\/title>/i) return { url: targetUrl,