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
This commit is contained in:
drelich
2026-03-31 10:26:38 +02:00
parent 21cd9ced2f
commit f5b448808d
2 changed files with 32 additions and 0 deletions

View File

@@ -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;
}