Search code examples
visual-studio-codevscode-extensions

APIs to add a borders to a section of code in the VS Code editor using the VS Code extension


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.


Solution

  • 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.

    decorate a range of lines with a border