Donation is really appreciated. This VSCode extension is a work of many months.
Buy Me A Coffee (With PayPal): https://www.buymeacoffee.com/leodevbro
See crypto/Bitcoin and other donation options at the bottom.
My name is Levan Katsadze (ლევან კაცაძე), 1995-03-03, I'm a student in Tbilisi, Georgia (Not US State). I learn Frontend development (React, JavaScript, TypeScript.).
From version 1.2.0 (2021-06-20), for better experience, Blockman will change (only one-time at the installation event) these 5 items in VSCode settings:
You can change them again when you want. These 5 settings are very non-vital, so maybe you don't even need to backup them first.
// settings.json (User/Global config, not Workspace config)
{
// ...
"editor.renderIndentGuides": false,
"editor.wordWrap": "off",
"diffEditor.wordWrap": "off",
"workbench.colorCustomizations": {
// ...
"editor.lineHighlightBorder": "#9fced11f",
"editor.lineHighlightBackground": "#1073cf2d"
}
}
VSCode Extension For Nested Block Highlighting
You can toggle enable/disable: Press F1 and then type "blockman toggle".
Also You can go to Blockman settings and set Black List Of File Formats to disable Blockman for certain files.
Animated PNG:
Supported programming languages:
Non-indentation based languages: JavaScript, JSX, TypeScript, TSX, C, C#, C++, Java, HTML, CSS, LESS, SCSS and more...
Indentation based language(s): currently Python only.
If you use double width characters like these Chinese characters: 字符串最大字符串最
, then you may want to run the experimental command to support such characters. Type F1
and type the command name: Blockman Toggle Try Support Double Width Chars
.
Python code:
You can change nesting depth
You can choose color combos
You can change color of each depth
Colors can be any CSS color value: red, green... rgb(), hsl(), linear-gradient()...
You can change focused block colors and general border color
You can change basis of block analysis
(Curly brackets, square brackets, round brackets, tags, indentation)
Currently only Python is supported from indentation based languages
You can provide other tokenizer algorithms and we can add them into this extension, so Blockman will be able to highlight blocks based on different or more advanced logic, or add support for other indentation based languages.
You can disable rendering single line blocks
1) Each line of code must have less than 500 characters, otherwise blocks will not be rendered in entire file.
2) Please don't use non-monospace font. Use only monospace font like 'Oxygen Mono', 'BPG 2017 DejaVu Sans Mono' or other. Block-rendering is based on equal character-frame-widths, because pixel locations of characters is not accessible through VSCode API.
Just for the information, the letter "ლ" is Georgian alphabet character,
like: ა, ბ, გ, დ, ე, ვ, ზ, თ, ი, კ, ლ, მ, ნ, ო, პ, ჟ, რ, ს, ტ, უ, ფ, ქ, ღ, ყ, შ, ჩ, ც, ძ, წ, ჭ, ხ, ჯ, ჰ.
3) If you want to use mix of multiple fonts (like in the image above), Please don't use any non-monospace font. Use monospace fonts which have at least almost same width of character. For example: 'Oxygen Mono' and 'BPG 2017 DejaVu Sans Mono' have not only equal char frame width by themselves alone, but also almost equal char frame width to each other.
For Georgian (ქართული) language oriented developers: without multiple font mixing, just BPG 2017 DejaVu Sans Mono as a single font seems fine for me, and maybe you can use it too. I think it is the one and only monospace font which has English and Georgian lowercase letters, as well as Georgian CAPITAL (uppercase) letters.
For English language oriented developers: the same statement above goes here.
4) If you want to use ligatured monospace font like "Fira Code" (Typographic ligatures are when multiple characters appear to combine into a single character), please make sure that the font maintains the text width on every line with ligatures like there were no ligatures. "Fira Code" seems fine, and maybe most of ligatured monospace fonts are fine.
5) Recommended to turn off word wrap. Blocks will not render properly if there is any word wrapping.
6) Recommended to turn off "Editor: Highlight Active Indent Guide" and "Editor: Render Indent Guides".
7) Recommended to set pale color (e.g. pale blue) to lineHighlightBorder and lineHighlightBackground like this:
First, press F1
then, type >settings json
then, open and edit settings.json file:
{
// ...
"workbench.colorCustomizations": {
// ...
"editor.lineHighlightBorder": "#9fced11f",
"editor.lineHighlightBackground": "#1073cf2d",
// Or for specific vscode themes:
"[Default Dark+]": {
// "editor.lineHighlightBorder": "#9fced11f"
// "editor.lineHighlightBackground": "#1073cf2d",
},
"[Abyss]": {
"editor.lineHighlightBorder": "#9fced11f",
"editor.lineHighlightBackground": "#1073cf2d"
}
// ...
},
// ...
}
Optimization is taken very seriously, half of the work is dedicated just for the optimization. The source code is full of logic which prevents many unnecessary block re-renderings.
File analysis needs super short time, so it's not a big problem. The main problem is that the vscode block rendering functions (vscode.window.createTextEditorDecorationType and setDecorations) are very slow, and I cannot touch its internal code, because it's just an API of VSCode. So, almost all optimization algorithms are trying to prevent as many unnecessary block renderings as possible. For example, when scrolling, blocks are rendered into only newly visible code, and the blocks which are already visible, stay there and does not rerender.
Bracket Pair Colorizer 2 (by CoenraadS)
Highlight Matching Tag (by vincaslt)
dt-python-parser (by DTStack)
From 1.1.0 version, manual setup of line height and char width is not needed anymore, thanks to alexdima (Alexandru Dima).
From 1.2.0 version, the problem of block-rendering widths at the locations of Color Decorators have been fixed for most of monospace fonts. Thanks to rioV8 from stackoverflow.
Github repository: https://github.com/leodevbro/vscode-blockman
Marketplace: https://marketplace.visualstudio.com/items?itemName=leodevbro.blockman
Open VSX: https://open-vsx.org/extension/leodevbro/blockman
Buy Me A Coffee (With PayPal): https://www.buymeacoffee.com/leodevbro
Bitcoin: bc1qfc068aq6lhrl58l6cf4wk7nsjy44gnk23uwl2y
Etherium: 0xFDE2574549aB7b2d57C7c1beef6d15FB2416E811
Bank account (USD): GE08TB7774936615100013 (TBCBGE22)
Bank account (GEL/Lari): GE18TB7774936515100011 (TBCBGE22)