I am working on a VS code extension where I have to differentiate a certain parts of the code with borders like python code cells in VS Code. I have tried out Decorations API but it is only can be use style part of text but I would to like to add border for the whole section.
Here is some code. The easy part is the border decoration:
const borderTopLeftRight = vscode.window.createTextEditorDecorationType({
borderWidth: '2px 2px 0 2px',
borderStyle: 'solid',
borderSpacing: '2px',
borderColor: '#f00',
isWholeLine: true,
backgroundColor: 'rgba(253, 253, 254, 0.53)',
rangeBehavior: vscode.DecorationRangeBehavior.OpenOpen
});
const borderBottomLeftRight = vscode.window.createTextEditorDecorationType({
borderWidth: '0 2px 2px 2px',
borderStyle: 'solid',
borderSpacing: '2px',
borderColor: '#f00',
isWholeLine: true,
backgroundColor: 'rgba(253, 253, 254, 0.53)',
rangeBehavior: vscode.DecorationRangeBehavior.OpenOpen
});
const borderLeftRight = vscode.window.createTextEditorDecorationType({
borderWidth: '0 2px 0 2px',
borderStyle: 'solid',
borderSpacing: '2px',
borderColor: '#f00',
isWholeLine: true,
backgroundColor: 'rgba(253, 253, 254, 0.53)',
rangeBehavior: vscode.DecorationRangeBehavior.OpenOpen
});
vscode.window.activeTextEditor.setDecorations(borderTopLeftRight, [new vscode.Range(2,0,2,0)]);
vscode.window.activeTextEditor.setDecorations(borderBottomLeftRight, [new vscode.Range(6,0,6,0)]);
vscode.window.activeTextEditor.setDecorations(borderLeftRight, [new vscode.Range(3,0,5,0)]);
vscode.window.onDidChangeActiveTextEditor(editor => {
vscode.window.activeTextEditor.setDecorations(borderTopLeftRight, [new vscode.Range(2, 0, 2, 0)]);
vscode.window.activeTextEditor.setDecorations(borderBottomLeftRight, [new vscode.Range(6, 0, 6, 0)]);
vscode.window.activeTextEditor.setDecorations(borderLeftRight, [new vscode.Range(3, 0, 5, 0)]);
});
// may have to watch this too
// vscode.window.onDidChangeTextEditorSelection()
This draws a border on the top/left/right with one set of decorations for the first line of your desired range. And then left/right with the in-between lines and finally bottom/left/right for the last line of your desired range of lines.
The trickier part is how you are going to determine the ranges to decorate - the code above just hard-codes a range but you will have to determine your ranges and loop through them applying the decorations.