Apply background colors to emphasize important text.
Color-coded highlighting for review, categorization, and emphasis.
OOXML Structure
<w:r>
<w:rPr>
<w:highlight w:val="yellow"/>
</w:rPr>
<w:t>Highlighted text</w:t>
</w:r>
Use case
- Document review - Color-code feedback
- Study notes - Highlight key concepts
- Status tracking - Visual progress indicators
- Multi-reviewer - Each person uses different color
- Categorization - Group related content by color
Options
Configure the extension behavior:
HTML attributes for highlight elements
Attributes
Node attributes that can be set and retrieved:
Background color (CSS color value)
Commands
setHighlight
Apply highlight with specified color
Example:
editor.commands.setHighlight('#FFEB3B')
editor.commands.setHighlight('rgba(255, 235, 59, 0.5)')
import { SuperDoc } from 'superdoc';
import 'superdoc/style.css';
const superdoc = new SuperDoc({
selector: '#editor',
document: yourFile,
onReady: (superdoc) => {
const editor = superdoc.activeEditor;
editor.commands.setHighlight('#FFEB3B');
editor.commands.setHighlight('rgba(255, 235, 59, 0.5)');
},
});
unsetHighlight
Remove highlight formatting
Example:
editor.commands.unsetHighlight()
import { SuperDoc } from 'superdoc';
import 'superdoc/style.css';
const superdoc = new SuperDoc({
selector: '#editor',
document: yourFile,
onReady: (superdoc) => {
const editor = superdoc.activeEditor;
editor.commands.unsetHighlight();
},
});
toggleHighlight
Toggle highlight formatting
Example:
editor.commands.toggleHighlight()
import { SuperDoc } from 'superdoc';
import 'superdoc/style.css';
const superdoc = new SuperDoc({
selector: '#editor',
document: yourFile,
onReady: (superdoc) => {
const editor = superdoc.activeEditor;
editor.commands.toggleHighlight();
},
});
Keyboard shortcuts
| Command | Shortcut | Description |
|---|
| toggleHighlight() | ⌘/Ctrl-Shift-h | Toggle highlighted formatting |
Source code
