メインコンテンツへスキップ

Markdown Editor

Add detailed, formatted notes to your reminders with Vigilare's built-in WYSIWYG Markdown editor. Get a word processor experience while maintaining full compatibility with Apple Reminders.

What Is the Markdown Editor?​

A rich text editor for task notes that combines the ease of visual editing with the power of Markdown.

Key Features​

WYSIWYG (What You See Is What You Get):

  • Format text visually like a word processor
  • No need to learn Markdown syntax
  • See results as you type
  • Toolbar with formatting buttons

Markdown Compatible:

  • Stores as Markdown in Apple Reminders
  • Works with Reminders app's note format
  • Syncs perfectly across devices
  • Other apps can read the notes

Accessing the Editor​

Open the editor when editing reminder notes.

How to Open​

From Edit Reminder Window:

  1. Double-click any reminder
  2. Edit window opens
  3. Notes section contains the editor
  4. Click in notes area to start editing

What You'll See:

  • Formatting toolbar at top
  • Text editing area below
  • Save/Cancel buttons
  • Full editing canvas

Formatting Options​

Create rich, structured notes for your tasks.

Text Formatting​

Bold Text:

  • Button: Click B in toolbar
  • Keyboard: ⌘B
  • Use For: Emphasis, key points, headers
  • Example: Important deadline

Italic Text:

  • Button: Click I in toolbar
  • Keyboard: ⌘I
  • Use For: Subtle emphasis, technical terms, titles
  • Example: Review before Friday

Strikethrough:

  • Button: Click S in toolbar
  • Use For: Completed sub-items, outdated info
  • Example: Old requirement New approach

Inline Code:

  • Button: Click <> in toolbar
  • Use For: Code snippets, commands, technical terms
  • Example: Run npm install first

Headings​

Structure longer notes with hierarchy.

Heading Levels:

  • H1: Main title
  • H2: Section headers
  • H3: Subsections
  • H4: Minor sections

How to Use:

  1. Click heading button in toolbar
  2. Select level (H1-H4)
  3. Type heading text
  4. Press Enter to return to normal text

Example Structure:

# Project Kickoff Meeting

## Attendees
- John (PM)
- Sarah (Design)
- Mike (Engineering)

## Discussion Points
### Timeline
- Start: Next Monday
- Deadline: End of month

### Requirements
...

Lists​

Organize information with bulleted or numbered lists.

Bulleted Lists:

  • Button: Click bullet list icon
  • Use For: Unordered items, features, notes
  • Nesting: Tab to indent, Shift+Tab to outdent

Numbered Lists:

  • Button: Click numbered list icon
  • Use For: Steps, priorities, sequential items
  • Auto-numbering: Numbers update automatically

Example:

Meeting Action Items:
1. Review design mockups
2. Update API documentation
3. Schedule follow-up

Technical Requirements:
- Fast load times
- Mobile responsive
- Accessibility compliant
  - WCAG AA standard
  - Keyboard navigation

Add clickable links to external resources.

Insert Link:

  1. Select text to link
  2. Click link button in toolbar
  3. Enter URL in dialog
  4. Click OK

Or:

  1. Click link button
  2. Enter text and URL
  3. Link created with text

Link Examples:

- [Design Mockup](https://figma.com/file/...)
- [GitHub Issue #123](https://github.com/...)
- [Documentation](https://docs.example.com)

Use Cases:

  • Link to tickets or issues
  • Reference documentation
  • Meeting recordings
  • Related resources
  • Design files

Blockquotes​

Highlight important information or quotes.

How to Create:

  • Click blockquote button in toolbar
  • Or type > and space
  • Great for notes within notes

Example:

> Remember: All changes must be reviewed by Friday
> before the release.

Editing Workflow​

Efficient note-taking while managing tasks.

Quick Note Adding​

Fast Capture:

  1. Open reminder edit
  2. Click in notes area
  3. Type quick notes
  4. Save (⌘S)

No Formatting Needed:

  • Plain text works fine
  • Add formatting if helpful
  • Not required for simple notes

Structured Notes​

For Complex Tasks:

# Bug Fix: Login Issue

## Problem
Users can't login with Google OAuth

## Steps to Reproduce
1. Go to login page
2. Click "Login with Google"
3. Error appears after redirect

## Solution
- Update OAuth callback URL
- Test in staging
- Deploy to production

## Testing
- [ ] Works on Chrome
- [ ] Works on Safari
- [ ] Works on mobile

Meeting Notes​

Capture Discussions:

# Client Meeting - Nov 27

## Attendees
- John (Client)
- Me
- Sarah (Designer)

## Decisions
1. Launch date: Dec 15
2. Budget approved
3. Color scheme: Option B

## Action Items
- [ ] Send updated timeline
- [ ] Schedule design review
- [ ] Update project board

Reference Information​

Store Context:

# API Integration

**Endpoint**: `https://api.example.com/v1/users`

**Auth**: Bearer token in header

**Example Request**:

curl -H "Authorization: Bearer TOKEN"
https://api.example.com/v1/users


**Documentation**: [API Docs](https://docs.example.com)

Keyboard Shortcuts​

Work faster with editor shortcuts.

Common Shortcuts​

Formatting:

  • ⌘B: Bold
  • ⌘I: Italic
  • ⌘U: Underline

Actions:

  • ⌘S: Save changes
  • ⌘Z: Undo
  • ⌘Shift+Z: Redo
  • ⌘A: Select all

Navigation:

  • ⌘↑: Move to start of note
  • ⌘↓: Move to end of note
  • ⌘←: Move to line start
  • ⌘→: Move to line end

List Shortcuts​

While in List:

  • Tab: Indent (nest)
  • Shift+Tab: Outdent (unnest)
  • Enter: New list item
  • Enter (twice): Exit list

Compatibility​

How notes work across different apps.

Apple Reminders​

Full Compatibility:

  • Notes appear in Reminders app
  • Formatting preserved
  • Links clickable
  • Lists display correctly

Markdown Format:

  • Stored as Markdown
  • Reminders renders basic formatting
  • Complex Markdown may show as plain text in Reminders
  • Full formatting visible in Vigilare

iCloud Sync​

Cross-Device:

  • Notes sync via iCloud
  • Formatting travels with tasks
  • Edit on Mac, view on iPhone/iPad
  • Markdown preserved

iOS Reminders App:

  • Shows formatted notes
  • May not support all Markdown features
  • Basic formatting works well
  • Links are clickable

Other Apps​

Third-Party Apps:

  • Any app reading Reminders notes
  • Sees Markdown source
  • May or may not render formatting
  • Links always work

Best Practices​

Get the most from the editor.

When to Use Rich Formatting​

Good Uses:

  • Complex tasks with multiple components
  • Meeting notes attached to follow-up task
  • Reference information for projects
  • Step-by-step instructions
  • Links to related resources

Overkill:

  • Simple one-line tasks
  • "Buy milk" doesn't need formatting
  • Quick capture notes
  • Reminder titles (use notes for detail)

Note Organization​

Structure Large Notes:

Use headings for sections
Use lists for items
Use links for resources
Use blockquotes for emphasis

This makes notes scannable
Easy to find information
Professional appearance

Keep It Concise:

  • Notes support unlimited length
  • But shorter is better
  • Break into subtasks if too long
  • Use headings to organize

What to Link:

  • Tickets/issues
  • Documentation
  • Design files
  • Meeting recordings
  • Related tasks
  • External resources

Link Text:

  • ❌ [Click here](url) - Not descriptive
  • ✅ [Design Mockups](url) - Clear purpose
  • ✅ [GitHub Issue #123](url) - Specific reference
  • Descriptive text helps future you

Common Workflows​

The Detailed Task​

Creating comprehensive task:
1. Add task title (what)
2. Open edit, add notes (how/why)
3. Use headings for structure
4. Add links to resources
5. Create checklist in notes
6. Save for future reference

The Meeting Follow-Up​

After meeting:
1. Create "Follow up: [Meeting Name]" task
2. Add notes with discussion summary
3. List action items
4. Link to meeting recording
5. Link to shared docs
6. Set due date for follow-up

The Bug Report​

Found a bug:
1. Create task: "Fix: [Bug Description]"
2. Add notes with:
   - Problem description
   - Steps to reproduce
   - Expected vs actual behavior
   - Screenshots (describe or link)
   - Related issues (link)
3. Assign to appropriate list
4. Set priority

The Project Plan​

Planning phase:
1. Create main task: "[Project Name]"
2. Add comprehensive notes:
   - Overview
   - Goals
   - Timeline
   - Resources
   - Stakeholders
3. Break into subtasks
4. Link to project docs

Editor Limitations​

What to know about the editor.

Current Limitations​

No Images:

  • Cannot embed images directly
  • Can link to images
  • Describe image content in text
  • Use external hosting + link

No Tables:

  • Use lists instead
  • Or link to spreadsheet
  • Plain text tables possible but not formatted

Basic Markdown:

  • Supports common Markdown
  • Some advanced features not available
  • Focus on readability
  • Complex formatting may not render

Workarounds​

For Images:

Link to image hosting:
- Upload to imgur, etc.
- Link in notes
- Or describe what image shows

For Tables:

Use nested lists:
- Product A
  - Price: $10
  - Stock: 50
- Product B
  - Price: $15
  - Stock: 30

Troubleshooting​

Editor Not Loading​

Causes:

  • First load may be slow
  • Internet required for initial load
  • Resources cached after first use

Solutions:

  • Wait a moment
  • Check internet connection
  • Try editing different reminder
  • Restart Vigilare

Formatting Lost​

Check:

  • Did you save? (⌘S)
  • Sync delay with iCloud
  • Viewing in app without Markdown support
  • Refresh Vigilare view

Cursor Jumping​

If Cursor Moves Unexpectedly:

  • Click where you want to edit
  • Use keyboard navigation
  • Save work frequently
  • May be auto-save triggering