137 lines
4.4 KiB
Markdown
137 lines
4.4 KiB
Markdown
# 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:
|
|
|
|
```javascript
|
|
// 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) — yellow
|
|
- `hlr:` — red
|
|
- `hlg:` — green
|
|
- `hlb:` — blue
|
|
|
|
Combine multiple colors with `;`:
|
|
|
|
```javascript
|
|
// 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:
|
|
```javascript
|
|
// 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:
|
|
1. Go to Settings → Plugins → Code Line Highlighter → Settings
|
|
2. 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
|
|
3. Click individual reset buttons or "Reset All Colors to Default"
|
|
4. Changes apply immediately to all highlighted code blocks
|
|
|
|
## Installation
|
|
|
|
### From Marketplace (recommended)
|
|
|
|
1. Open SiYuan → Settings → Marketplace → Plugins
|
|
2. Search for "Code Line Highlighter"
|
|
3. Click Install
|
|
|
|
### Manual Installation
|
|
|
|
1. Download `package.zip` from [Releases](https://github.com/langfeld/code-line-highlighter/releases)
|
|
2. Extract to `{SiYuan}/data/plugins/code-line-highlighter`
|
|
3. Restart SiYuan
|
|
|
|
### Build from Source
|
|
|
|
```bash
|
|
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
|