Skip to content

[Feature] Add live Markdown preview panel #6

Description

@kom50

Summary

Show rendered Markdown preview alongside the editor.

Requirements

  • Split view: editor | preview
  • Real-time preview updates
  • Synchronized scrolling
  • Toggle preview on/off
  • Support GFM (GitHub Flavored Markdown)
  • Syntax highlighting in code blocks
  • Only show when language is Markdown

UI/UX

  • Preview panel on right (50% width)
  • Toggle button in header
  • Styled like GitHub Markdown
  • Smooth transitions

Technical Notes

  • Use marked or markdown-it library
  • Use highlight.js for code block highlighting
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>

Acceptance Criteria

  • Markdown renders correctly in preview
  • Preview updates in real-time as user types
  • Code blocks have syntax highlighting
  • Scrolling is synchronized between panels

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions