A SiYuan note widget that automatically displays the diff between two code blocks in a super block.
- 🔄 Auto-refresh: Automatically updates the diff result every 5 seconds
- 📝 Template insertion: One-click button to insert the comparison template structure
- 🎨 Visual diff display: Clear visualization with green (additions) and red (deletions)
- 🧬 Character-level highlighting: Added vs deleted characters inside modified lines now use distinct soft green/red highlight colors
- 📊 Statistics: Shows the number of added and removed lines
- 🖥️ 100% width: Full-width display by default
- ⚡ Real-time: Reads content from super block above and displays diff immediately
┌────────────────────────────────────────┐
│ Super Block (Side by Side) │
│ ┌─────────────┐ ┌─────────────┐ │
│ │ ``` │ │ ``` │ │
│ │ Original │ │ Modified │ │
│ │ Code │ │ Code │ │
│ │ ``` │ │ ``` │ │
│ └─────────────┘ └─────────────┘ │
└────────────────────────────────────────┘
↓
┌────────────────────────────────────────┐
│ Widget (Shows diff result only) │
│ - Deleted lines (red background) │
│ + Added lines (green background) │
│ Unchanged lines │
└────────────────────────────────────────┘
- Insert the Widget: Add the widget to your SiYuan document
- Insert Template: Click the "📝 插入对比模板" button to automatically insert the super block template above the widget
- Add Your Code: Replace the placeholder text with your actual code in both code blocks (left: original, right: modified)
- View Diff: The diff result will automatically appear in the widget below
If you prefer to create the structure manually:
- Create a super block with row layout above the widget
- Add two code blocks side by side in the super block
- Put your original code in the left code block
- Put your modified code in the right code block
- The widget will automatically detect and display the diff
- 📝 插入对比模板: Insert the comparison template structure above the widget
- 🔄 刷新对比: Manually refresh the diff (also auto-refreshes every 5 seconds)
- Line numbers: Shows line numbers for easy reference
- Color coding:
- 🟢 Green background: Added lines
- 🔴 Red background: Removed lines
- ⚪ White background: Unchanged lines
- 🟢 Soft green inline highlight: Added characters inside modified lines
- 🔴 Soft red inline highlight: Removed characters inside modified lines
- Statistics: Displays total number of additions and deletions
- Responsive: Full-width display adapts to container size
- Download the widget from the SiYuan marketplace
- Or clone this repository to
{workspace}/conf/appearance/widgets/sy-widget-show-diff - Restart SiYuan or refresh the widget list
- SiYuan version: 2.8.8 or higher
- The widget must be placed below a super block containing two code blocks
Error: "在挂件上方未找到超级块"
- Make sure there's a super block directly above the widget
- The super block should contain at least two code blocks
Empty diff result
- Check that both code blocks contain content
- Verify the code blocks are properly formatted with ``` markers
Widget not loading
- Ensure SiYuan is running
- Check that the API port 6806 is accessible
- Try clicking the "🔄 刷新对比" button manually
MIT License
xiaoduo