{"id":13554950,"url":"https://github.com/leodevbro/vscode-blockman","last_synced_at":"2026-02-21T06:31:09.051Z","repository":{"id":43024195,"uuid":"366842948","full_name":"leodevbro/vscode-blockman","owner":"leodevbro","description":"VSCode extension to highlight nested code blocks","archived":false,"fork":false,"pushed_at":"2024-10-03T21:16:58.000Z","size":69778,"stargazers_count":488,"open_issues_count":74,"forks_count":19,"subscribers_count":7,"default_branch":"main","last_synced_at":"2025-10-20T21:25:38.451Z","etag":null,"topics":["abstract-syntax-tree","ast","highlight-blocks","indentation","parser","tokenizer","vscode-api","vscode-blockman","vscode-extension"],"latest_commit_sha":null,"homepage":"https://github.com/leodevbro/vscode-blockman","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/leodevbro.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-05-12T20:17:50.000Z","updated_at":"2025-09-18T02:25:10.000Z","dependencies_parsed_at":"2024-11-04T03:31:42.880Z","dependency_job_id":"52b613c4-f205-4a98-b8c0-8a029b4dcce4","html_url":"https://github.com/leodevbro/vscode-blockman","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/leodevbro/vscode-blockman","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/leodevbro%2Fvscode-blockman","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/leodevbro%2Fvscode-blockman/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/leodevbro%2Fvscode-blockman/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/leodevbro%2Fvscode-blockman/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/leodevbro","download_url":"https://codeload.github.com/leodevbro/vscode-blockman/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/leodevbro%2Fvscode-blockman/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29675428,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-21T06:23:40.028Z","status":"ssl_error","status_checked_at":"2026-02-21T06:23:39.222Z","response_time":107,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["abstract-syntax-tree","ast","highlight-blocks","indentation","parser","tokenizer","vscode-api","vscode-blockman","vscode-extension"],"created_at":"2024-08-01T12:02:58.309Z","updated_at":"2026-02-21T06:31:09.022Z","avatar_url":"https://github.com/leodevbro.png","language":"TypeScript","readme":"\u003cp align=\"left\"\u003e\n  \u003ca href=\"https://marketplace.visualstudio.com/items?itemName=leodevbro.blockman\"\u003e\n    \u003cimg alt=\"VS Code Marketplace Installs\" src=\"https://img.shields.io/visual-studio-marketplace/i/leodevbro.blockman\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://marketplace.visualstudio.com/items?itemName=leodevbro.blockman\"\u003e\n    \u003cimg alt=\"VS Code Marketplace Downloads\" src=\"https://img.shields.io/visual-studio-marketplace/d/leodevbro.blockman\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://marketplace.visualstudio.com/items?itemName=leodevbro.blockman\"\u003e\n    \u003cimg alt=\"VS Code Marketplace Version\" src=\"https://img.shields.io/visual-studio-marketplace/v/leodevbro.blockman\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://marketplace.visualstudio.com/items?itemName=leodevbro.blockman\"\u003e\n    \u003cimg alt=\"VS Code Marketplace Rating\" src=\"https://img.shields.io/visual-studio-marketplace/r/leodevbro.blockman\"\u003e\u003c/a\u003e\n\n\u003c/p\u003e\n\n\u003cp\u003e\u003cstrong\u003e\u003ca href=\"#donation\"\u003eDonation\u003c/a\u003e\u003c/strong\u003e is really appreciated. Blockman is a hard work of many months. My name is \u003ca href=\"https://leodevbro.github.io\"\u003eLevan Katsadze (ლევან კაცაძე)\u003c/a\u003e, 1995-03-03, from Tbilisi, \u003ca href=\"https://en.wikipedia.org/wiki/Georgia_(country)\"\u003eGeorgia (Not USA)\u003c/a\u003e.\u003c/p\u003e\n\n\u003cp float=\"left\"\u003e\n  \u003ca style=\"float: left; margin-right: 12px;\" href=\"https://www.buymeacoffee.com/leodevbro\" target=\"_blank\"\u003e\u003cimg src=\"https://raw.githubusercontent.com/leodevbro/vscode-blockman/main/demo-media/still-image/donation/buy-me-a-coffee_2.png\" alt=\"Buy Me A Coffee\" style=\"height: 44px !important; width: auto !important;\" /\u003e\u003c/a\u003e\n  \u003ca style=\"margin-right: 12px;\" href=\"https://ko-fi.com/leodevbro\" target=\"_blank\"\u003e\u003cimg src=\"https://raw.githubusercontent.com/leodevbro/vscode-blockman/main/demo-media/still-image/donation/ko-fi_2.png\" alt=\"ko-fi\" style=\"height: 44px !important; width: auto !important;\" /\u003e\u003c/a\u003e\n  \u003ca style=\"margin-right: 12px;\" href=\"https://www.facebook.com/leodevbropage\" target=\"_blank\"\u003e\u003cimg src=\"https://raw.githubusercontent.com/leodevbro/vscode-blockman/main/demo-media/still-image/social/fb-logo2.png\" alt=\"facebook logo\" style=\"height: 44px !important; width: auto !important;\" /\u003e\u003c/a\u003e\n  \u003ca style=\"margin-right: 12px;\" href=\"https://www.youtube.com/channel/UC5539gDeAdWqeXcczWuhnBA\" target=\"_blank\"\u003e\u003cimg src=\"https://raw.githubusercontent.com/leodevbro/vscode-blockman/main/demo-media/still-image/social/yt-logo3.png\" alt=\"youtube logo\" style=\"height: 44px !important; width: auto !important;\" /\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n\u003cbr /\u003e\n\u003cbr /\u003e\n\u003cbr /\u003e\n\n\u003cp\u003e\u003cstrong\u003eFor better experience:\u003c/strong\u003e Blockman will ask you to change these 7 items in VS Code settings (only one-time at the installation event). These 7 settings are very non-vital, so maybe you don't even need to backup them first.\u003c/p\u003e\n\n```jsonc\n// settings.json (User/Global config, not Workspace config)\n// To open this file in VS Code, press F1, type 'settings json' and choose 'Preferences: Open Settings (JSON)'\n{\n    // ...\n    \"editor.inlayHints.enabled\": \"off\",\n    \"editor.guides.indentation\": false, // new API for indent guides. The old one is: \"editor.renderIndentGuides\": false,\n    \"editor.guides.bracketPairs\": false, // advanced indent guides (But only for brackets) (This does not turn off editor.bracketPairColorization)\n    \"editor.wordWrap\": \"off\",\n    \"diffEditor.wordWrap\": \"off\",\n\n    \"workbench.colorCustomizations\": {\n        // ...\n        \"editor.lineHighlightBorder\": \"#9fced11f\",\n        \"editor.lineHighlightBackground\": \"#1073cf2d\"\n    }\n}\n```\n\n\u003cbr /\u003e\n\u003cbr /\u003e\n\u003cbr /\u003e\n\n\u003cp align=\"center\"\u003e\u003cimg\n  src=\"https://raw.githubusercontent.com/leodevbro/vscode-blockman/main/demo-media/still-image/icon-prod/blockman-icon-128---png.png\"\n  alt=\"VS Code Blockman Icon\"\n  width=\"128px\"\n/\u003e\u003c/p\u003e\n\u003ch3 align=\"center\" style=\"color: hsl(262, 90%, 45%);\"\u003e\u003cstrong\u003eBlockman\u003c/strong\u003e\u003c/h3\u003e\n\u003cp align=\"center\"\u003eVS Code Extension For Nested Block Highlighting\u003c/p\u003e\n\u003cp align=\"center\"\u003e\u003ca href=\"https://www.youtube.com/watch?v=_BedxVCzZ7o\"\u003eWatch Video Intro\u003c/a\u003e\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\u003cem\u003eYou can toggle enable/disable: Press F1 and then type \"blockman toggle\".\u003c/em\u003e\u003c/p\u003e\n\u003cp align=\"center\"\u003e\u003cem\u003eAlso You can go to Blockman settings and set Black List Of File Formats to disable Blockman for certain files.\u003c/em\u003e\u003c/p\u003e\n  \n\u003cp align=\"center\"\u003e\u003cimg\n  src=\"https://raw.githubusercontent.com/leodevbro/vscode-blockman/main/demo-media/still-image/infograph/intro-before-after---png.png\"\n  alt=\"alt text testing\"\n/\u003e\u003c/p\u003e\n  \n\u003cp align=\"center\"\u003eAnimated PNG:\u003c/p\u003e\n\u003cp align=\"center\"\u003e\u003cimg\n  src=\"https://raw.githubusercontent.com/leodevbro/vscode-blockman/main/demo-media/video/main-demo---c2-apng.png\"\n  alt=\"alt text testing\"\n/\u003e\u003c/p\u003e\n\n\u003cbr /\u003e\n\n\u003cp align=\"center\"\u003e\u003cstrong\u003eAdded NEW color combos as \"Super gradients\".\u003c/strong\u003e\u003c/p\u003e\n\u003cp align=\"center\"\u003e\u003cstrong\u003eBlockman now supports gradients for both: borders and backgrounds.\u003c/strong\u003e\u003c/p\u003e\n\u003cp align=\"center\"\u003e\u003cimg\n  src=\"https://raw.githubusercontent.com/leodevbro/vscode-blockman/main/demo-media/still-image/infograph/super-gradients-demo-0.png\"\n  alt=\"super gradients color combos in Blockman\"\n/\u003e\u003c/p\u003e\n\u003cp align=\"center\"\u003e\u003cimg\n  src=\"https://raw.githubusercontent.com/leodevbro/vscode-blockman/main/demo-media/still-image/infograph/super-gradients-demo.png\"\n  alt=\"super gradients color combos in Blockman for Python\"\n/\u003e\u003c/p\u003e\n\n\u003cbr /\u003e\n\n\u003cp align=\"center\"\u003e\u003cstrong\u003eYou can hide backgrounds and keep only borders.\u003c/strong\u003e\u003c/p\u003e\n\u003cp align=\"center\"\u003e\u003cstrong\u003eGo to Blockman settings, find \"\u003ccode\u003eN33 A01 B2\u003c/code\u003e\" and type \"\u003ccode\u003e45,0,0,2; none\u003c/code\u003e\".\u003c/strong\u003e\u003c/p\u003e\n\u003cp align=\"center\"\u003e\u003cimg\n  src=\"https://raw.githubusercontent.com/leodevbro/vscode-blockman/main/demo-media/still-image/infograph/only-borders.png\"\n  alt=\"only borders instruction in Blockman\"\n/\u003e\u003c/p\u003e\n\n\u003cbr /\u003e\n\n\u003cp align=\"center\"\u003e\u003cstrong\u003eYou can highlight all the parents of the focused block.\u003c/strong\u003e\u003c/p\u003e\n\u003cp align=\"center\"\u003e\u003cimg\n  src=\"https://raw.githubusercontent.com/leodevbro/vscode-blockman/main/demo-media/still-image/infograph/highlight-all-parents-of-focused.png\"\n  alt=\"only borders instruction in Blockman\"\n/\u003e\u003c/p\u003e\n\n\u003cbr /\u003e\n\n\u003cp align=\"center\"\u003e\u003cstrong\u003eHow to do it? Go to Blockman settings, find \"\u003ccode\u003eN33 A03 B1\u003c/code\u003e\" and delete \"\u003ccode\u003e!\u003c/code\u003e\".\u003c/strong\u003e\u003c/p\u003e\n\u003cp align=\"center\"\u003e\u003cstrong\u003e\"\u003ccode\u003e!\u003c/code\u003e\" (exclamation mark) means the option is disabled.\u003c/strong\u003e\u003c/p\u003e\n\u003cp align=\"center\"\u003e\u003cimg\n  src=\"https://raw.githubusercontent.com/leodevbro/vscode-blockman/main/demo-media/video/highlight-all-parents-of-focused-block.gif\"\n  alt=\"only borders instruction in Blockman\"\n/\u003e\u003c/p\u003e\n\u003cp align=\"center\"\u003e\u003cstrong\u003eAlso you can type other colors and other propagation logic with your taste. See the instructions of advanced coloring.\u003c/strong\u003e\u003c/p\u003e\n\n\u003cbr /\u003e\n\u003cbr /\u003e\n\u003cbr /\u003e\n\n\u003ch3\u003eSupported programming languages:\u003c/h3\u003e\n\u003cp\u003e\u003cstrong\u003eNon-indentation based languages:\u003c/strong\u003e JavaScript, JSX, TypeScript, TSX, C, C#, C++, Java, Ruby, PHP, R, Go (Golang), Dart, Rust, Swift, PowerShell, SQL, HTML, CSS, LESS, SCSS and more...\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eIndentation based languages:\u003c/strong\u003e currently Python and Yaml.\u003c/p\u003e\n\n\u003cbr /\u003e\n  \n\u003cp align=\"center\"\u003ePython code:\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\u003cimg\n  src=\"https://raw.githubusercontent.com/leodevbro/vscode-blockman/main/demo-media/video/python-demo---c2-apng.png\"\n  alt=\"alt text testing\"\n/\u003e\u003c/p\u003e\n\n\u003cbr /\u003e\n\nIf you use \u003cstrong\u003edouble width\u003c/strong\u003e characters, then you may want to run the experimental command to support such characters. Press `F1` and type the command name: `Blockman Toggle Try Support Double Width Chars`.\n\nSuch as,\n\n-   Chinese characters (汉字): ex. `字符串最大字符串最`\n-   Korean characters (한글): ex. `한글 텍스트`\n\n\u003cbr /\u003e\n\n\u003ch1 align=\"center\"\u003eBlockman settings\u003c/h1\u003e\n  \n\u003cp align=\"center\"\u003eYou can change nesting depth\u003c/p\u003e\n\u003cp align=\"center\"\u003e\u003cimg\n  src=\"https://raw.githubusercontent.com/leodevbro/vscode-blockman/main/demo-media/video/settings/depth---c2-apng.png\"\n  alt=\"alt text testing\"\n/\u003e\u003c/p\u003e\n  \n\u003cbr /\u003e\n  \n\u003cp align=\"center\"\u003eYou can choose color combos\u003c/p\u003e\n\u003cp align=\"center\"\u003e\u003cimg\n  src=\"https://raw.githubusercontent.com/leodevbro/vscode-blockman/main/demo-media/video/settings/color-combos---c2-apng.png\"\n  alt=\"alt text testing\"\n/\u003e\u003c/p\u003e\n\u003cp align=\"center\"\u003e\u003cimg\n  src=\"https://raw.githubusercontent.com/leodevbro/vscode-blockman/main/demo-media/still-image/infograph/color-combos---png.png\"\n  alt=\"alt text testing\"\n/\u003e\u003c/p\u003e\n  \n\u003cbr /\u003e\n\n\u003cp align=\"center\"\u003eYou can choose right side padding strategies\u003c/p\u003e\n\u003cp align=\"center\"\u003e\u003cimg\n  src=\"https://raw.githubusercontent.com/leodevbro/vscode-blockman/main/demo-media/video/settings/right-side-padding-strategies-2-gif.gif\"\n  alt=\"alt text testing\"\n/\u003e\u003c/p\u003e\n  \n\u003cbr /\u003e\n  \n\u003cp align=\"center\"\u003eYou can change color of each depth\u003c/p\u003e\n\u003cp align=\"center\"\u003eColors can be any CSS color value: red, green... rgb(), hsl(), linear-gradient()...\u003c/p\u003e\n\u003cp align=\"center\"\u003e\u003cimg\n  src=\"https://raw.githubusercontent.com/leodevbro/vscode-blockman/main/demo-media/video/settings/custom-depth-colors---c2-apng.png\"\n  alt=\"alt text testing\"\n/\u003e\u003c/p\u003e\n  \n\u003cbr /\u003e\n  \n\u003cp align=\"center\"\u003eYou can change focused block colors and general border color\u003c/p\u003e\n\u003cp align=\"center\"\u003e\u003cimg\n  src=\"https://raw.githubusercontent.com/leodevbro/vscode-blockman/main/demo-media/video/settings/focus-colors-and-general-border-color---c2-apng.png\"\n  alt=\"alt text testing\"\n/\u003e\u003c/p\u003e\n\n\u003cbr /\u003e\n  \n\u003cp align=\"center\"\u003eYou can change basis of block analysis\u003c/p\u003e\n\u003cp align=\"center\"\u003e(Curly brackets, square brackets, round brackets, tags, indentation)\u003c/p\u003e\n\u003cp align=\"center\"\u003e\u003cimg\n  src=\"https://raw.githubusercontent.com/leodevbro/vscode-blockman/main/demo-media/video/settings/based-on-bracket-types---c2-apng.png\"\n  alt=\"alt text testing\"\n/\u003e\u003c/p\u003e\n  \n\u003cbr /\u003e\n  \n\u003cp align=\"center\"\u003eCurrently only Python and Yaml are supported from indentation based languages\u003c/p\u003e\n\u003cp align=\"center\"\u003e\u003cimg\n  src=\"https://raw.githubusercontent.com/leodevbro/vscode-blockman/main/demo-media/video/settings/indent-tokens---c2-apng.png\"\n  alt=\"alt text testing\"\n/\u003e\u003c/p\u003e\n\u003cp\u003eYou 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.\u003c/p\u003e\n  \n\u003cbr /\u003e\n  \n\u003cp align=\"center\"\u003eYou can disable rendering single line blocks\u003c/p\u003e\n\u003cp align=\"center\"\u003e\u003cimg\n  src=\"https://raw.githubusercontent.com/leodevbro/vscode-blockman/main/demo-media/video/settings/single-line-block---c2-apng.png\"\n  alt=\"alt text testing\"\n/\u003e\u003c/p\u003e\n\n\u003cbr /\u003e\n\n\u003ch1 align=\"center\"\u003eAll Blockman quick commands\u003c/h1\u003e\n\n```\nPress F1 and find:\n\n\u003eBlockman Toggle Enable/Disable\n\u003eBlockman Toggle Enable/Disable And Force Show/Hide Indent Guides\n\n\u003eBlockman Select Focused --- Select text inside focused block\n\u003eBlockman Toggle Freeze/Unfreeze Focus\n\n\u003eBlockman Toggle Try Support Double Width Chars (e.g. Chinese)\n\n\u003eBlockman Clear State Storage --- revert back to the first installation state\n```\n\n\u003cbr /\u003e\n\n\u003ch1 align=\"center\"\u003eAll Blockman settings\u003c/h1\u003e\n\n```jsonc\n// settings.json (User/Global config, not Workspace config)\n// To open this file in VS Code, press F1, type 'settings json' and choose 'Preferences: Open Settings (JSON)'\n\n// Each item is with default value\n{\n    // n01 and n02 are deprecated.\n    \"blockman.n03MaxDepth\": 12, // -1 is no blocks, 0 is ground block, 1 is first depth blocks, 2 is second depth blocks\n    \"blockman.n04ColorComboPreset\": \"Classic Dark 1 (Gradients)\", // This does not change VS Code theme. Choose preset combo of colors. Corresponding colors are overridden by custom colors (if not empty string). Also This setting can be overriden by the next 3 combo settings\n    \"blockman.n04Sub01ColorComboPresetForDarkTheme\": \"none\", // Color combo to apply when current theme kind is Dark.\n    \"blockman.n04Sub02ColorComboPresetForLightTheme\": \"none\", // Color combo to apply when current theme kind is Light.\n    \"blockman.n04Sub03ColorComboPresetForHighContrastTheme\": \"none\", // Color combo to apply when current theme kind is High Contrast.\n\n    \"blockman.n04Sub04RightSideBaseOfBlocks\": \"Rightmost Edge Of Inner Content\", // or \"Rightmost Edge Of Viewport\" or \"Rightmost Edge Of File Content\"\n    \"blockman.n04Sub05MinDistanceBetweenRightSideEdges\": 0, // CSS pixels. 4 is probably good. Keep in mind that for some devices, CSS pixel is larger/smaller than physical pixel.\n    \"blockman.n04Sub06AdditionalPaddingRight\": 0, // CSS pixels. Keep in mind that for some devices, CSS pixel is larger/smaller than physical pixel.\n\n    \"blockman.n05CustomColorOfDepth0\": \"\", // Any CSS color, e.g. rgb, rgba, hsl. Type 'none' for same color as editor background.\n\n    \"blockman.n06CustomColorOfDepth1\": \"\", // Any CSS color, e.g. rgb, rgba, hsl. Type 'none' for same color as editor background.\n    \"blockman.n07CustomColorOfDepth2\": \"\", // Any CSS color, e.g. rgb, rgba, hsl. Type 'none' for same color as editor background.\n    \"blockman.n08CustomColorOfDepth3\": \"\", // Any CSS color, e.g. rgb, rgba, hsl. Type 'none' for same color as editor background.\n    \"blockman.n09CustomColorOfDepth4\": \"\", // Any CSS color, e.g. rgb, rgba, hsl. Type 'none' for same color as editor background.\n    \"blockman.n10CustomColorOfDepth5\": \"\", // Any CSS color, e.g. rgb, rgba, hsl. Type 'none' for same color as editor background.\n\n    \"blockman.n11CustomColorOfDepth6\": \"\", // Any CSS color, e.g. rgb, rgba, hsl. Type 'none' for same color as editor background.\n    \"blockman.n12CustomColorOfDepth7\": \"\", // Any CSS color, e.g. rgb, rgba, hsl. Type 'none' for same color as editor background.\n    \"blockman.n13CustomColorOfDepth8\": \"\", // Any CSS color, e.g. rgb, rgba, hsl. Type 'none' for same color as editor background.\n    \"blockman.n14CustomColorOfDepth9\": \"\", // Any CSS color, e.g. rgb, rgba, hsl. Type 'none' for same color as editor background.\n    \"blockman.n15CustomColorOfDepth10\": \"\", // Any CSS color, e.g. rgb, rgba, hsl. Type 'none' for same color as editor background.\n\n    \"blockman.n16EnableFocus\": true, // Highlight block differently if caret is inside it.\n    \"blockman.n17CustomColorOfFocusedBlock\": \"\", // Requires 'Enable Focus' to be true/enabled. Type 'same' if you want it to be same color as if not focused.\n    \"blockman.n18CustomColorOfFocusedBlockBorder\": \"\", // Requires 'Enable Focus' to be true/enabled. Type 'same' if you want it to be same color as if not focused.\n    \"blockman.n19CustomColorOfBlockBorder\": \"\",\n    \"blockman.n20CustomColorOfDepth0Border\": \"\",\n\n    \"blockman.n21BorderRadius\": 6,\n    \"blockman.n22AnalyzeCurlyBrackets\": true, // Render blocks inside curly brackets {}, keep in mind: the parser/tokenizer will ignore brackets inside comments, inside strings and inside some other areas.\n    \"blockman.n23AnalyzeSquareBrackets\": false, // Render blocks inside square brackets [], keep in mind: the parser/tokenizer will ignore brackets inside comments, inside strings and inside some other areas.\n    \"blockman.n24AnalyzeRoundBrackets\": false, // Render blocks inside Round brackets (), keep in mind: the parser/tokenizer will ignore brackets inside comments, inside strings and inside some other areas.\n    \"blockman.n25AnalyzeTags\": true, // Render blocks inside HTML/XML/JSX/TSX tags \u003ctag\u003e\u003c/tag\u003e, keep in mind: the parser/tokenizer will ignore tags inside comments, inside strings and inside some other areas.\n\n    \"blockman.n26AnalyzeIndentDedentTokens\": true, // This option affects only files of indentation based languages like Python. Currently only Python and Yaml are supported for indentation analysis. Keep in mind: the parser/tokenizer will ignore indentations inside comments, inside strings and inside some other areas.\n    \"blockman.n27AlsoRenderBlocksInsideSingleLineAreas\": false, // {I am a single line area} \u003cp\u003eMe too\u003c/p\u003e. Focused single line block will still be rendered even if this setting is off. Use n27B01 to hide block of focused single line area.\n    \"blockman.n27B01HideBlockOfFocusedSingleLineArea\": false, // {I am a single line area} \u003cp\u003eMe too\u003c/p\u003e.\n\n    \"blockman.n28TimeToWaitBeforeRerenderAfterLastChangeEvent\": 1.2, // (Seconds). For optimization: enter more time for slow computers. Less than 0.05 is NOT recommended even for fast computers.\n    \"blockman.n29TimeToWaitBeforeRerenderAfterLastFocusEvent\": 0.2, // (Seconds). For optimization: enter more time for slow computers. Less than 0.2 is NOT recommended because double-clicking may become problematic.\n    \"blockman.n30TimeToWaitBeforeRerenderAfterLastScrollEvent\": 0.1, // (Seconds). For optimization: enter more time for slow computers. Less than 0.05 is NOT recommended even for fast computers.\n    \"blockman.n31RenderIncrementBeforeAndAfterVisibleRange\": 22, // Less is faster because less blocks will be rendered outside the viewport but scrolling may become less comfortable. If less than 1 (e.g. -5), the blocks will render in limited area.\n\n    \"blockman.n32BlackListOfFileFormats\": \"plaintext, markdown, \", // Disable Blockman for certain file formats, e.g. plaintext, markdown, css, less, scss, html, json, jsonc, typescriptreact, typescript, javascriptreact, javascript, python, go, dart, php, c, csharp, cpp, java. If the first character is '^' (caret symbol), the list will act as a white list, e.g. '^ typescript, typescriptreact'.\n\n    // Advanced Coloring:\n    // Video instruction: https://youtu.be/UsET6-kPu90\n\n    // Textual instruction:\n    // '!' means disabled.\n    // Advanced coloring string, if enabled, will override basic coloring settings.\n\n    // Right side: sequence of colors/gradients.\n\n    // Left side:\n    // --- FIRST number relates priority,\n    // --- SECOND number relates zero-based index of first item of first loop, So it splits the sequence into what should not be looped and what should be looped,\n    // --- THIRD number relates loop part reversion (0: original, 1: reversed),\n    // --- FOURTH number relates looping strategy (0: all the continuation items to be 'neutral', 'neutral' means it will be overriden by any other setting, 1: Only the last item will be looped. Yes, it will ignore the SECOND option number (split index), 2: loop as forward, 3: loop as pair of forward and backward).\n\n    // 'neutral' color means it will be overriden by any other coloring setting.\n    // 'basic' color means it will set a color from basic color settings.\n\n    // 'transparent' and partially transparent colors work fine for borders, but backgrounds have some problems with such values,\n    // so, if you type 'transparent' on background, it will be the color of VS Code editor backgound.\n\n    \"blockman.n33A01B1FromDepth0ToInwardForAllBorders\": \"!10,0,0,0; red \u003e green \u003e blue\",\n    \"blockman.n33A01B2FromDepth0ToInwardForAllBackgrounds\": \"!10,1,0,3; hsl(235, 30%, 7%) \u003e hsl(0, 0%, 7.1%) \u003e hsl(0, 0%, 9.5%) \u003e hsl(0, 0%, 11.15%) \u003e hsl(0, 0%, 12.8%)\",\n\n    \"blockman.n33A02B1FromFocusToOutwardForAllBorders\": \"!20,0,0,0; red \u003e green \u003e blue\",\n    \"blockman.n33A02B2FromFocusToOutwardForAllBackgrounds\": \"!20,0,0,0; red \u003e green \u003e blue\",\n\n    \"blockman.n33A03B1FromDepth0ToInwardForFocusTreeBorders\": \"!30,1,0,2; linear-gradient(to right, hsl(251, 22%, 25%), hsl(292, 20%, 18%)) \u003e linear-gradient(to right, hsl(20, 50%, 30%), hsl(250, 30%, 30%))\",\n    \"blockman.n33A03B2FromDepth0ToInwardForFocusTreeBackgrounds\": \"!30,0,0,0; red \u003e green \u003e blue\",\n\n    \"blockman.n33A04B1FromFocusToOutwardForFocusTreeBorders\": \"40,0,0,0; basic\",\n    \"blockman.n33A04B2FromFocusToOutwardForFocusTreeBackgrounds\": \"40,0,0,0; basic\",\n\n    \"blockman.n33A05B1FromFocusToInwardForAllBorders\": \"!50,0,0,0; red \u003e green \u003e blue\",\n    \"blockman.n33A05B2FromFocusToInwardForAllBackgrounds\": \"!50,0,0,0; red \u003e green \u003e blue\",\n\n    //\n    //\n    //\n\n    \"blockman.n34A01BorderThicknessOfNonFocusedBlock\": 1,\n    \"blockman.n34A02BorderThicknessOfFocusedBlock\": 2,\n\n    \"blockman.n35A01DisableRecommendationDialog\": false,\n\n    \"blockman.n36A01MaxCharCountInAnyLine\": 3000 // Blockman will not work in a file if the file has at least one line with N (or more) number of chars.\n}\n```\n\n\u003cbr /\u003e\n\n\u003ch1 align=\"center\"\u003eThings to consider\u003c/h1\u003e\n  \n\u003cp\u003e1) Each line of code must have less than 3000 (You can change this number) characters, otherwise blocks will not be rendered in entire file.\u003c/p\u003e\n\n\u003cp\u003e2) Please don't use non-monospace font. Use only monospace font like 'Oxygen Mono', '\u003ca href=\"https://bpgfonts.wordpress.com/2017/12/21/bpg-2017-dejavu-sansmono/\"\u003eBPG 2017 DejaVu Sans Mono\u003c/a\u003e' or other. Block-rendering is based on equal character-frame-widths, because pixel locations of characters \u003ca href=\"https://github.com/microsoft/vscode/issues/118994\"\u003eis not accessible\u003c/a\u003e through VS Code API.\u003c/p\u003e\n\u003cp align=\"center\"\u003e\u003cimg\n  src=\"https://raw.githubusercontent.com/leodevbro/vscode-blockman/main/demo-media/still-image/infograph/monospace-font---png.png\"\n  alt=\"alt text testing\"\n/\u003e\u003c/p\u003e\n\n```\nJust for the information, the letter \"ლ\" is Georgian alphabet character,\nlike: ა, ბ, გ, დ, ე, ვ, ზ, თ, ი, კ, ლ, მ, ნ, ო, პ, ჟ, რ, ს, ტ, უ, ფ, ქ, ღ, ყ, შ, ჩ, ც, ძ, წ, ჭ, ხ, ჯ, ჰ.\n```\n\n\u003cp\u003e3) 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 '\u003ca href=\"https://bpgfonts.wordpress.com/2017/12/21/bpg-2017-dejavu-sansmono/\"\u003eBPG 2017 DejaVu Sans Mono\u003c/a\u003e' have not only equal char frame width by themselves alone, but also almost equal char frame width to each other.\u003c/p\u003e\n  \n\u003cp\u003e\u003cstrong\u003eFor Georgian (ქართული) language oriented developers:\u003c/strong\u003e without multiple font mixing, just \u003ca href=\"https://bpgfonts.wordpress.com/2017/12/21/bpg-2017-dejavu-sansmono/\"\u003eBPG 2017 DejaVu Sans Mono\u003c/a\u003e as a single font seems fine for me, and maybe you can use it too. For now, 2022, I think it is the one and only monospace font which has English (both lowercase and UPPERCASE) and Georgian lowercase letters, as well as \u003ca href=\"https://en.wikipedia.org/wiki/Georgian_scripts#Summary\"\u003eGeorgian UPPERCASE (known as Mtavruli/მთავრული) letters\u003c/a\u003e. You can also see the \u003ca href=\"https://www.unicode.org/charts/script/chart_Georgian.html\"\u003eUnicode chart of Georgian lowercase and UPPERCASE letters\u003c/a\u003e.\u003c/p\u003e\n\n\u003cp\u003e\u003cstrong\u003eFor English language oriented developers:\u003c/strong\u003e the same statement above goes here.\u003c/p\u003e\n\n\u003cbr /\u003e\n\n\u003cp\u003e4) 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.\u003cbr /\u003e\n\n\u003c/p\u003e\n  \n\u003cp\u003e5) Recommended to turn off word wrap. Blocks will not render properly if there is any word wrapping.\u003c/p\u003e\n\u003cp align=\"center\"\u003e\u003cimg\n  src=\"https://raw.githubusercontent.com/leodevbro/vscode-blockman/main/demo-media/video/word-wrap---c2-apng.png\"\n  alt=\"alt text testing\"\n/\u003e\u003c/p\u003e\n  \n\u003cbr /\u003e\n\n\u003cp\u003e6) Recommended to turn off \"Editor: Guides: Indentation\" (new) / \"Editor: Render Indent Guides\" (old).\u003c/p\u003e\n\u003cp align=\"center\"\u003e\u003cimg\n  src=\"https://raw.githubusercontent.com/leodevbro/vscode-blockman/main/demo-media/video/indent-guide---c2-apng.png\"\n  alt=\"alt text testing\"\n/\u003e\u003c/p\u003e\n  \n\u003cbr /\u003e\n\n\u003cp\u003e7) Recommended to set pale color (e.g. pale blue) to lineHighlightBorder and lineHighlightBackground like this:\u003c/p\u003e\n\u003cp align=\"center\"\u003e\u003cimg\n  src=\"https://raw.githubusercontent.com/leodevbro/vscode-blockman/main/demo-media/video/line-hl---c2-apng.png\"\n  alt=\"alt text testing\"\n/\u003e\u003c/p\u003e\n\u003cp align=\"center\"\u003e\u003cimg\n  src=\"https://raw.githubusercontent.com/leodevbro/vscode-blockman/main/demo-media/still-image/infograph/line-hl---png.png\"\n  alt=\"alt text testing\"\n/\u003e\u003c/p\u003e\n\n```jsonc\n// settings.json\n// To open this file (as global config) in VS Code, press F1, type 'settings json' and choose 'Preferences: Open Settings (JSON)'\n{\n    // ...\n    \"workbench.colorCustomizations\": {\n        // ...\n        \"editor.lineHighlightBorder\": \"#9fced11f\",\n        \"editor.lineHighlightBackground\": \"#1073cf2d\",\n\n        // Or for specific VS Code themes:\n        \"[Default Dark+]\": {\n            // ...\n            // \"editor.lineHighlightBorder\": \"#9fced11f\"\n            // \"editor.lineHighlightBackground\": \"#1073cf2d\",\n        },\n        \"[Abyss]\": {\n            // ...\n            // \"editor.lineHighlightBorder\": \"#9fced11f\",\n            // \"editor.lineHighlightBackground\": \"#1073cf2d\"\n        }\n    }\n}\n```\n\n\u003cbr /\u003e\n\n\u003ch1\u003eOptimization Notes\u003c/h1\u003e\n\u003cp\u003eOptimization is taken very seriously, half of the work is dedicated just for the optimization.\u003c/p\u003e\n  \n\u003cp\u003eIf a file is already analyzed, rendering blocks takes about 0.02 seconds with default Blockman settings. So, rendering is not a big issue, but analyzing is quite heavy work. Here are some test cases of some programming languages:\u003c/p\u003e\n\n```\nYaml file:\n    analyze: 0.70 seconds (10,000 lines), 0.06 seconds (1,000 lines)\n\nDart file:\n    analyze: 0.90 seconds (10,000 lines), 0.09 seconds (1,000 lines)\n\nCSharp file:\n    analyze: 1.40 seconds (10,000 lines), 0.15 seconds (1,000 lines)\n\nTSX file:\n    analyze: 1.60 seconds (10,000 lines), 0.17 seconds (1,000 lines)\n\nJavaScript file:\n    analyze: 2.70 seconds (10,000 lines), 0.28 seconds (1,000 lines)\n\nPython file:\n   analyze: 10.70 seconds (10,000 lines), 0.86 seconds (1,000 lines)\n```\n\n\u003cp\u003eSo, currently I'm trying to find more optimized ways to analyze files, especially for Python langauge.\u003c/p\u003e\n\n\u003cbr /\u003e\n\n\u003ch1\u003eBig thanks to these source codes\u003c/h1\u003e\n\u003cp\u003e\u003ca href=\"https://github.com/CoenraadS/Bracket-Pair-Colorizer-2\"\u003eBracket Pair Colorizer 2\u003c/a\u003e (by CoenraadS)\u003c/p\u003e\n\u003cp\u003e\u003ca href=\"https://github.com/vincaslt/vscode-highlight-matching-tag\"\u003eHighlight Matching Tag\u003c/a\u003e (by vincaslt)\u003c/p\u003e\n\u003cp\u003e\u003ca href=\"https://github.com/DTStack/dt-python-parser\"\u003edt-python-parser\u003c/a\u003e (by DTStack)\u003c/p\u003e\n\n\u003cbr /\u003e\n\n\u003ch1\u003eAlso Big thanks\u003c/h1\u003e\n\u003cp\u003eFrom 1.1.0 version, manual setup of line height and char width is not needed anymore, thanks to \u003ca href=\"https://github.com/microsoft/vscode/issues/125341\"\u003ealexdima (Alexandru Dima)\u003c/a\u003e.\u003c/p\u003e\n\u003cp\u003eFrom 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 \u003ca href=\"https://stackoverflow.com/questions/68020444/how-to-get-positions-of-all-css-color-decorators-with-vscode-api\"\u003erioV8\u003c/a\u003e from stackoverflow.\u003c/p\u003e\n\n\u003cbr /\u003e\n\n\u003ch1\u003ePublished In:\u003c/h1\u003e\n\u003cp\u003eGithub repository: \u003ca href=\"https://github.com/leodevbro/vscode-blockman\"\u003ehttps://github.com/leodevbro/vscode-blockman\u003c/a\u003e\u003c/p\u003e\n\u003cp\u003eMarketplace: \u003ca href=\"https://marketplace.visualstudio.com/items?itemName=leodevbro.blockman\"\u003ehttps://marketplace.visualstudio.com/items?itemName=leodevbro.blockman\u003c/a\u003e\u003c/p\u003e\n\u003cp\u003eOpen VSX: \u003ca href=\"https://open-vsx.org/extension/leodevbro/blockman\"\u003ehttps://open-vsx.org/extension/leodevbro/blockman\u003c/a\u003e\u003c/p\u003e\n\n\u003cbr /\u003e\n\n\u003ch1 id=\"donation\"\u003eDonation\u003c/h1\u003e\n\u003cp\u003e\u003cstrong\u003eBuy Me A Coffee:\u003c/strong\u003e \u003ca href=\"https://www.buymeacoffee.com/leodevbro\"\u003ehttps://www.buymeacoffee.com/leodevbro\u003c/a\u003e\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eKo-fi:\u003c/strong\u003e \u003ca href=\"https://ko-fi.com/leodevbro\"\u003ehttps://ko-fi.com/leodevbro\u003c/a\u003e\u003c/p\u003e\n\n\u003cp\u003e\u003cstrong\u003eBank account (USD):\u003c/strong\u003e GE08TB7774936615100013 (TBCBGE22)\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eBank account (GEL/Lari):\u003c/strong\u003e GE18TB7774936515100011 (TBCBGE22)\u003c/p\u003e\n","funding_links":["https://www.buymeacoffee.com/leodevbro","https://ko-fi.com/leodevbro"],"categories":["TypeScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fleodevbro%2Fvscode-blockman","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fleodevbro%2Fvscode-blockman","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fleodevbro%2Fvscode-blockman/lists"}