Implement task list rendering in preview mode

- Enabled GitHub Flavored Markdown (GFM) in marked.js for task list support
- Added custom CSS styling for task lists:
  - Hide bullet points, show only checkboxes
  - Increased checkbox size to 20px for better visibility
  - Green accent color for checked items
  - Flexbox layout for proper multi-line text alignment
- Task lists render as read-only checkboxes in preview mode

src/components/NoteEditor.tsx

@@ -24,6 +24,12 @@ interface NoteEditorProps {
 
 const imageCache = new Map<string, string>();
 
+// Configure marked to support task lists
+marked.use({
+  gfm: true,
+  breaks: true,
+});
+
 
 export function NoteEditor({ note, onUpdateNote, onToggleFavorite, onUnsavedChanges, categories, isFocusMode, onToggleFocusMode, editorFont = 'Source Code Pro', editorFontSize = 14, previewFont = 'Merriweather', previewFontSize = 16, api }: NoteEditorProps) {
   const [localContent, setLocalContent] = useState('');

src/index.css

@@ -213,3 +213,29 @@ code {
 .dark .ProseMirror hr {
   border-top-color: #374151;
 }
+
+/* Task list styling for preview mode */
+.prose ul li:has(> input[type="checkbox"]) {
+  list-style: none;
+  margin-left: -1.5em;
+  display: flex;
+  align-items: flex-start;
+}
+
+.prose ul:has(li > input[type="checkbox"]) {
+  list-style: none;
+  padding-left: 1.5em;
+}
+
+.prose input[type="checkbox"] {
+  width: 1.25rem;
+  height: 1.25rem;
+  margin-right: 0.75rem;
+  margin-top: 0.32rem;
+  cursor: default;
+  flex-shrink: 0;
+}
+
+.prose input[type="checkbox"]:checked {
+  accent-color: #16a34a;
+}