search

leodevbro / vscode-blockman

VSCode extension to highlight nested code blocks
https://github.com/leodevbro/vscode-blockman
MIT License
345 stars 16 forks source link

Codeblock will cover the custom background image even background set to `none` #116

Closed lgc2333 closed 5 months ago

lgc2333 commented 1 year ago

Looks like this: image

My settings:

{
  "blockman.n21BorderRadius": 4,
  "blockman.n23AnalyzeSquareBrackets": true,
  "blockman.n24AnalyzeRoundBrackets": true,
  "blockman.n33A01B1FromDepth0ToInwardForAllBorders": "90,1,0,3; rgba(255, 255, 255, 0.05) > rgba(194, 59, 35, 0.35) > rgba(243, 154, 39, 0.35) > rgba(234, 218, 82, 0.35) > rgba(3, 192, 60, 0.35) > rgba(87, 154, 190, 0.35) > rgba(151, 110, 215, 0.35)",
  "blockman.n33A01B2FromDepth0ToInwardForAllBackgrounds": "90,0,0,3; none",
  "blockman.n33A05B1FromFocusToInwardForAllBorders": "100,0,0,0; rgba(255, 165, 0, 0.8)",
  "blockman.n34A01BorderThicknessOfNonFocusedBlock": 2,
  "blockman.n36A01MaxCharCountInAnyLine": 500,
}

I am using Doki Theme to customize my background image

leodevbro commented 1 year ago

Unfortunately this is due to the limitations of HTML div box and CSS and also the VS Code itself. The thing is that in order to support gradient background, I had to implement rendering engine (of Blockman) in such a way that the borders are also div boxes, and they have inner box, so the edges (paddings) appear as borders.

So, when you set the background to "none", Blockman will make it exactly the same color as VS Code editor background color, otherwise the border color will become the entire box.

For the future, I am going to try to implement SVG rendering instead of div rendering. SVG is very flexible, but I'm not sure that VS Code extension environment supports it without a huge headache.