4.4 KiB
4.4 KiB
SiYuan Code Line Highlighter Plugin
Highlight specific code lines in SiYuan code blocks using an intuitive context menu or comment syntax with multi-color support and customizable colors.
Usage
Method 1: Context Menu (New in v3.0.0) 🎨
Simply right-click on any line (or select multiple lines) in a code block to:
- Highlight single or multiple lines with your choice of color (yellow, red, green, blue + 3 Custom Colors)
- Remove existing highlights from single or multiple lines
Multi-Line Selection: Select lines 3-10 and right-click to highlight all of them at once!
This is the recommended method as it:
- Stores highlights in block attributes (doesn't modify your code)
- Works with any programming language
- Provides a visual, user-friendly interface
- Supports multi-line selection
Method 2: Comment Syntax (Legacy, still supported)
Add a comment in the first line of your code block:
// hl:1,3-5
const foo = "line 1 - highlighted yellow";
const bar = "line 2 - normal";
const baz = "line 3 - highlighted yellow";
const qux = "line 4 - highlighted yellow";
const test = "line 5 - highlighted yellow";
Multi-Color Syntax
hl:(default) — yellowhlr:— redhlg:— greenhlb:— blue
Combine multiple colors with ;:
// hlr:1;hlg:3;hlb:5-7
const error = "line 1 - red";
const normal = "line 2 - normal";
const success = "line 3 - green";
const info = "line 4 - normal";
const note1 = "line 5 - blue";
const note2 = "line 6 - blue";
const note3 = "line 7 - blue";
New Numerical Syntax (v3.0.0+)
You can also use numbers 1-7 instead of letters:
hl1...hl4: Standard colors (Yellow, Red, Green, Blue)hl5...hl7: Custom Colors defined in settings
Example:
// hl5:1-3;hl2:10
Supported Comment Syntaxes
// ...(JavaScript, TypeScript, C++, Java, etc.)# ...(Python, Ruby, Bash, etc.)<!-- ... -->(HTML, XML)/* ... */(CSS, C)
Features
- ✅ Context menu integration - Right-click to highlight/unhighlight lines
- ✅ Quick Access - Set a default color for one-click highlighting
- ✅ Multi-line selection - Select and highlight multiple lines at once (e.g., lines 3-10)
- ✅ 7 Color Slots - 4 Standard + 3 Custom Colors
- ✅ Customizable colors - Personalize colors via settings panel (background, border, opacity)
- ✅ Renamable Labels - Give your colors meaningful names (e.g., "Error", "Todo")
- ✅ Toggle Visibility - Hide colors you don't use
- ✅ Attribute-based storage - Highlights stored in block attributes, not in code
- ✅ Non-invasive overlays (not saved into note content)
- ✅ Multi-color support (yellow, red, green, blue)
- ✅ Responsive to window resize and code editing
- ✅ Works with SiYuan's native syntax highlighting
- ✅ Backward compatible with comment syntax
Customization
Access plugin settings to customize highlight colors:
- Go to Settings → Plugins → Code Line Highlighter → Settings
- Customize each color (yellow, red, green, blue, custom1-3):
- Default: Select which color appears at the top of the context menu
- Visible: Show/Hide color in the menu
- Label: Rename colors (e.g., "Important" instead of "Red")
- Background/Border/Opacity: Full color control
- Click individual reset buttons or "Reset All Colors to Default"
- Changes apply immediately to all highlighted code blocks
Installation
From Marketplace (recommended)
- Open SiYuan → Settings → Marketplace → Plugins
- Search for "Code Line Highlighter"
- Click Install
Manual Installation
- Download
package.zipfrom Releases - Extract to
{SiYuan}/data/plugins/code-line-highlighter - Restart SiYuan
Build from Source
npm install
npm run build
# package.zip is created in project root
Changelog (recent)
- v3.2.1 — Legacy highlight comment syntax can be used via context menu (option added)
- v3.1.2 — Minor visual adjustments
- v3.1.1 — Z-Index Fix
- v3.1.0 — Custom colors for highlights and more improvements
- v3.0.0 — Major Update: Context menu integration, multi-line selection, color customization, attribute-based storage
- v2.1.4 — Prevent duplicate overlays on note open
- v2.1.3 — Better re-render detection when overlays missing
- v2.1.2 — Input listeners for code editing detection
License
MIT