A powerful plugin for SiYuan Notes that transforms your blockquotes into beautiful, functional callout blocks with rich features and high customizability!
- 🎨 11 Preset Types - Beautiful styles for every use case
- 🎭 8 Theme Styles - From modern minimalist to neon glow
- 🛠️ Fully Customizable - Create your own callout types with custom icons and colors
- 📐 Smart Margin System - Support for left/right margins with drag-to-resize
- ⚡ 3 Creation Methods - Visual menu, command input, or smart autocomplete
- 🎯 Rich Interactions - Collapse/expand, type switching, drag-to-resize
- 📋 Outline Support - Callout content displays in sidebar outline panel for quick navigation
- 📱 Cross-Platform - Works on desktop, mobile, and browser
Search for "Custom Callout" in SiYuan marketplace and install.
There are two ways to create callouts - choose your favorite:
- Type
>followed by space to create a blockquote - Wait 1-2 seconds for the command menu to appear automatically
- Use arrow keys (↑↓←→) to select a type
- Press
Enterto confirm and start typing
- Type
>followed by space to create a blockquote - After the menu appears, type letters directly to filter
- For example, type
ito filterinfo, typetipto filtertip - Use arrow keys to select,
Enterto confirm
Supports Chinese search: Type 信 to match "信息", type 技 to match "技巧"
Includes info, concept, example, tip, best-practice, tradeoff, deep-dive, comparison, summary, pitfall, and highlight types for various note-taking scenarios.
Click directly on the Callout title to collapse or expand content:
┌─────────────────────────┐
│ 💡 Tip │ ← Click title to collapse
├─────────────────────────┤
│ Content goes here... │
│ Multiple lines... │
└─────────────────────────┘
↓ Collapsed ↓
┌─────────────────────────┐
│ 💡 Tip │ ← Click again to expand
└─────────────────────────┘
Use Cases:
- Temporarily hide content when organizing long documents
- Control progressive disclosure during presentations
- Save screen space and focus on current content
Click on the icon area on the left (about 40px wide) to switch types:
- Click the icon area
- Type selection menu appears
- Select a new type
- Content stays the same, style updates instantly
Use Cases:
- Adjust content positioning: change "info" to "tip"
- Adjust importance: change "note" to "warning"
- Quickly experiment with different visual effects
Callout supports drag-to-resize width and height:
Resize Width:
- Move mouse to the right edge of the Callout
- A semi-transparent resize handle appears
- Click and drag to desired width
- Release mouse, changes saved automatically
Resize Height:
- Move mouse to the bottom edge of the Callout
- A semi-transparent resize handle appears
- Click and drag to desired height
- Release mouse, changes saved automatically
Use Cases:
- Adjust display width based on content
- Fix height to maintain consistent page layout
- Optimize display for different screen sizes
Real-time Feedback:
- Shows current dimensions while dragging
- Green success notification after completion
- Automatically hidden on small screens (prevent accidental touches)
Offers modern, card, flat, classic, minimal, glassmorphism, neumorphism, and neon themes to suit different aesthetic preferences.
| Key | Function |
|---|---|
↑ ↓ ← → |
Navigate menu items |
Enter |
Confirm selection |
ESC |
Close menu |
| Letter/Number keys | Activate filter mode |
| Key | Function |
|---|---|
| Letter/Number keys | Add filter character |
Backspace |
Delete last character |
ESC |
Exit filter mode |
↑ ↓ |
Navigate filtered results |
Enter |
Confirm selection |
- Type
>+spaceto create blockquote - Use arrow keys or type letters to filter and select
- Press
Enterto confirm
Add commands (like info) at the beginning of existing blockquotes to convert them to Callouts.
Drag the right or bottom edge of Callouts to adjust width and height.
A: Please check:
- ✅ Is the blockquote empty (no content)?
- ✅ Did you wait 1-2 seconds (plugin initialization time)?
- ✅ Is the plugin enabled?
- ✅ Are you in edit mode (not preview mode)?
A: Two methods:
- Click the icon on the left of title, select "Native Style"
- Directly delete the command text (e.g., delete
@info)
A: No! All configurations are saved in plugin data, including:
- Custom types
- Modifications to preset types
- Hidden types
- Display order
- Theme selection
- Quick config
Backup plugin data before uninstalling.
A: Yes! Callout styles are preserved when exporting:
- ✅ Export as HTML - Style preserved
- ✅ Export as Markdown - Command format preserved
A: Mobile adapts automatically:
- On small screens, resize handles are automatically hidden (prevent accidental touches)
- Callouts maintain responsive width
- All other features work normally
A:
- Go to
workspace/data/storage/petal/siyuan-custom-callout/ - Copy config files (
callout-custom-config) - Restore by placing back in original location
A: When creating custom types, the system checks automatically:
- ❌ Type IDs cannot duplicate
- ❌ Commands cannot duplicate (including English and Chinese)
- ✅ If conflict exists, error message appears
A: Yes! Callouts can contain:
- ✅ Lists (ordered, unordered, task lists)
- ✅ Code blocks
- ✅ Tables
- ✅ Images
- ✅ Other block elements
A: Yes!
- Theme style: Controls overall visual style (corners, shadows, spacing, etc.)
- Type settings: Controls colors and icons for each type
- Quick config: Fine-tunes details based on theme
Switch theme, all callouts instantly apply new style.
A: Current version provides:
- 70+ selected icons (Heroicons style)
- 18 preset color schemes
- Custom color support
For more options, feel free to request on GitHub!
- ✨ Added Callout Line outline support
- 🎨 Optimized sidebar panel experience
- 🐛 Fixed various known issues
- 🐛 Fixed resource leak issues on plugin unload
- 🔧 Improved plugin stability and performance
- ✨ Added 8 theme style system
- ✨ Added theme quick config feature
- ✨ Added drag-to-resize width and height
- ✨ Added keyboard filter feature
- 🎨 Optimized command menu layout and styles
- 🐛 Fixed multiple known issues
- ✨ Added complete customization features (create, edit, delete types)
- ✨ Added 70+ icon library and 18 color schemes
- ✨ Added drag-to-reorder feature
- ✨ Added hide/show types feature
- 🎨 New settings panel UI
- ✨ Added keyboard filter search feature
- 🎨 Optimized command menu display
- ✨ Added collapse/expand feature
- ✨ Added type switching feature
- ✨ Added drag-to-resize feature
- 🎉 Initial release
- ✨ 11 preset callout types
- ✨ Automatic command menu
- ✨ Manual command input
- Check Documentation: Review this README and project documentation
- Submit Issue: GitHub Issues
- Feature Requests: We welcome new ideas!
If this plugin helps you:
- ⭐ Star on GitHub
- 📢 Share with other SiYuan users
- 💬 Share your experience in the community
Contributions of code or documentation are welcome! Check Contributing Guide (if available)
If this plugin makes your note-taking experience better, consider buying me a coffee! Your support motivates me to keep improving and maintaining this project ☕
Scan to Support · Thank You! 🙏
Every contribution is the greatest encouragement for open source projects!
MIT License - See LICENSE file
- Thanks to SiYuan Notes for the powerful platform
- Icons from Heroicons
Make your notes more beautiful and practical! 🎉
For questions or suggestions, please provide feedback on GitHub!