2023年8月9日 13:59:32go评论94阅读模式

英文:

How to set VS Code code block background coloring from the Blockman extension?

问题

我正在使用the leodevbro.blockman extension。如何设置图片中我标记的代码块的新颜色？

在 "workbench.colorCustomizations" 中我应该设置哪个属性？

是否可以在不添加新扩展的情况下实现？

图片中我标记的颜色应该随我的设置而改变。

英文:

I'm using the leodevbro.blockman extension. How can I set a new color to code block that I have marked in the picture?

Which property I should set in "workbench.colorCustomizations"?

Can I achieve it without adding a new extension?

The color that I marked in picture should change with my settings.

答案1

得分: 0

如果您想更改编辑器面板的背景颜色，您需要查找的颜色自定义点是 editor.background。例如：

"workbench.colorCustomizations": {
    "editor.background": "#ff0000", // TODO
    "editor.lineHighlightBackground": "#ff0000", // TODO

    // 要查看其他可用选项，请取消注释以下行，
    // 并将光标放在末尾，触发建议。
    // "editor.background
}

对于 Blockman，请参阅其文档：https://github.com/leodevbro/vscode-blockman#all-blockman-settings，其中在其自述文件中包含以下内容：

"blockman.n04ColorComboPreset": "Classic Dark 1 (Gradients)", // 这不会更改 VS Code 主题。选择颜色预设组合。如果未设置为空字符串，则自定义颜色将覆盖相应颜色。此设置可以由下面的 3 个组合设置覆盖
"blockman.n04Sub01ColorComboPresetForDarkTheme": "none", // 当当前主题种类为 Dark 时应用的颜色组合。
"blockman.n04Sub02ColorComboPresetForLightTheme": "none", // 当当前主题种类为 Light 时应用的颜色组合。
"blockman.n04Sub03ColorComboPresetForHighContrastTheme": "none", // 当当前主题种类为 High Contrast 时应用的颜色组合。

"blockman.n05CustomColorOfDepth0": "", // 任何 CSS 颜色，例如 rgb、rgba、hsl。键入 'none' 以使用编辑器背景相同的颜色。

"blockman.n06CustomColorOfDepth1": "", // 任何 CSS 颜色，例如 rgb、rgba、hsl。键入 'none' 以使用编辑器背景相同的颜色。
"blockman.n07CustomColorOfDepth2": "", // 任何 CSS 颜色，例如 rgb、rgba、hsl。键入 'none' 以使用编辑器背景相同的颜色。
"blockman.n08CustomColorOfDepth3": "", // 任何 CSS 颜色，例如 rgb、rgba、hsl。键入 'none' 以使用编辑器背景相同的颜色。
"blockman.n09CustomColorOfDepth4": "", // 任何 CSS 颜色，例如 rgb、rgba、hsl。键入 'none' 以使用编辑器背景相同的颜色。
"blockman.n10CustomColorOfDepth5": "", // 任何 CSS 颜色，例如 rgb、rgba、hsl。键入 'none' 以使用编辑器背景相同的颜色。

"blockman.n11CustomColorOfDepth6": "", // 任何 CSS 颜色，例如 rgb、rgba、hsl。键入 'none' 以使用编辑器背景相同的颜色。
"blockman.n12CustomColorOfDepth7": "", // 任何 CSS 颜色，例如 rgb、rgba、hsl。键入 'none' 以使用编辑器背景相同的颜色。
"blockman.n13CustomColorOfDepth8": "", // 任何 CSS 颜色，例如 rgb、rgba、hsl。键入 'none' 以使用编辑器背景相同的颜色。
"blockman.n14CustomColorOfDepth9": "", // 任何 CSS 颜色，例如 rgb、rgba、hsl。键入 'none' 以使用编辑器背景相同的颜色。
"blockman.n15CustomColorOfDepth10": "", // 任何 CSS 颜色，例如 rgb、rgba、hsl。键入 'none' 以使用编辑器背景相同的颜色。

"blockman.n17CustomColorOfFocusedBlock": "", // 需要启用 'Enable Focus'。如果要与未聚焦时的颜色相同，请键入 'same'。
"blockman.n18CustomColorOfFocusedBlockBorder": "", // 需要启用 'Enable Focus'。如果要与未聚焦时的颜色相同，请键入 'same'。
"blockman.n19CustomColorOfBlockBorder": "",
"blockman.n20CustomColorOfDepth0Border": "",

// 高级着色：
// 视频教程：https://youtu.be/UsET6-kPu90

// 文本说明：
// '!' 表示已禁用。
// 如果启用，高级着色字符串将覆盖基本着色设置。

// 右边：颜色/渐变序列。

// 左边：
// --- 第一个数字与优先级相关，
// --- 第二个数字与第一个循环的零基索引相关，因此它将序列分成不应循环的部分和应循环的部分，
// --- 第三个数字与循环部分的反转相关（0：原始，1：反转），
// --- 第四个数字与循环策略相关（0：所有继续项都是 'neutral'，'neutral' 表示它将被任何其他设置覆盖，1：只有最后一项将被循环。是的，它将忽略第二个选项号（分割索引），2：正向循环，3：正向和反向的一对循环）。

// 'neutral' 颜色表示它将被任何其他着色设置覆盖。
// 'basic' 颜色表示它将从基本颜色设置中设置颜色。

// 'transparent' 和部分透明的颜色对边框来说效果很好，但是背景对这些值有些问题，
// 因此，如果在背景上键入 'transparent'，它将是 VS Code 编辑器背景的颜色。

"blockman.n33A01B1FromDepth0ToInwardForAllBorders": "!10,0,0,0; red > green > blue",
"blockman.n33A01B2FromDepth0ToInwardForAllBackgrounds": "!10,1,0,3; hsl(235, 30%, 7%) > hsl(0, 0%, 7

<details>
<summary>英文:</summary>

If you want to change the background of the editor panels, the colour customization point you&#39;re looking for is `editor.background`. Ex.

```json
&quot;workbench.colorCustomizations&quot;: {
    &quot;editor.background&quot;: &quot;#ff0000&quot;, // TODO
    &quot;editor.lineHighlightBackground&quot;: &quot;#ff0000&quot;, // TODO

    // To find out what else is available, uncomment the following line,
    // and put your cursor at the end of it and trigger suggestions.
    // &quot;editor.background
}

For blockman, see its docs: https://github.com/leodevbro/vscode-blockman#all-blockman-settings, which has the following in its readme:

> json > "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 > "blockman.n04Sub01ColorComboPresetForDarkTheme": "none", // Color combo to apply when current theme kind is Dark. > "blockman.n04Sub02ColorComboPresetForLightTheme": "none", // Color combo to apply when current theme kind is Light. > "blockman.n04Sub03ColorComboPresetForHighContrastTheme": "none", // Color combo to apply when current theme kind is High Contrast. > > "blockman.n05CustomColorOfDepth0": "", // Any CSS color, e.g. rgb, rgba, hsl. Type 'none' for same color as editor background. > > "blockman.n06CustomColorOfDepth1": "", // Any CSS color, e.g. rgb, rgba, hsl. Type 'none' for same color as editor background. > "blockman.n07CustomColorOfDepth2": "", // Any CSS color, e.g. rgb, rgba, hsl. Type 'none' for same color as editor background. > "blockman.n08CustomColorOfDepth3": "", // Any CSS color, e.g. rgb, rgba, hsl. Type 'none' for same color as editor background. > "blockman.n09CustomColorOfDepth4": "", // Any CSS color, e.g. rgb, rgba, hsl. Type 'none' for same color as editor background. > "blockman.n10CustomColorOfDepth5": "", // Any CSS color, e.g. rgb, rgba, hsl. Type 'none' for same color as editor background. > > "blockman.n11CustomColorOfDepth6": "", // Any CSS color, e.g. rgb, rgba, hsl. Type 'none' for same color as editor background. > "blockman.n12CustomColorOfDepth7": "", // Any CSS color, e.g. rgb, rgba, hsl. Type 'none' for same color as editor background. > "blockman.n13CustomColorOfDepth8": "", // Any CSS color, e.g. rgb, rgba, hsl. Type 'none' for same color as editor background. > "blockman.n14CustomColorOfDepth9": "", // Any CSS color, e.g. rgb, rgba, hsl. Type 'none' for same color as editor background. > "blockman.n15CustomColorOfDepth10": "", // Any CSS color, e.g. rgb, rgba, hsl. Type 'none' for same color as editor background. > > "blockman.n17CustomColorOfFocusedBlock": "", // Requires 'Enable Focus' to be true/enabled. Type 'same' if you want it to be same color as if not focused. > "blockman.n18CustomColorOfFocusedBlockBorder": "", // Requires 'Enable Focus' to be true/enabled. Type 'same' if you want it to be same color as if not focused. > "blockman.n19CustomColorOfBlockBorder": "", > "blockman.n20CustomColorOfDepth0Border": "", > > // Advanced Coloring: > // Video instruction: https://youtu.be/UsET6-kPu90 > > // Textual instruction: > // '!' means disabled. > // Advanced coloring string, if enabled, will override basic coloring settings. > > // Right side: sequence of colors/gradients. > > // Left side: > // --- FIRST number relates priority, > // --- 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, > // --- THIRD number relates loop part reversion (0: original, 1: reversed), > // --- 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). > > // 'neutral' color means it will be overriden by any other coloring setting. > // 'basic' color means it will set a color from basic color settings. > > // 'transparent' and partially transparent colors work fine for borders, but backgrounds have some problems with such values, > // so, if you type 'transparent' on background, it will be the color of VS Code editor backgound. > > "blockman.n33A01B1FromDepth0ToInwardForAllBorders": "!10,0,0,0; red > green > blue", > "blockman.n33A01B2FromDepth0ToInwardForAllBackgrounds": "!10,1,0,3; hsl(235, 30%, 7%) > hsl(0, 0%, 7.1%) > hsl(0, 0%, 9.5%) > hsl(0, 0%, 11.15%) > hsl(0, 0%, 12.8%)", > > "blockman.n33A02B1FromFocusToOutwardForAllBorders": "!20,0,0,0; red > green > blue", > "blockman.n33A02B2FromFocusToOutwardForAllBackgrounds": "!20,0,0,0; red > green > blue", > > "blockman.n33A03B1FromDepth0ToInwardForFocusTreeBorders": "!30,1,0,2; linear-gradient(to right, hsl(251, 22%, 25%), hsl(292, 20%, 18%)) > linear-gradient(to right, hsl(20, 50%, 30%), hsl(250, 30%, 30%))", > "blockman.n33A03B2FromDepth0ToInwardForFocusTreeBackgrounds": "!30,0,0,0; red > green > blue", > > "blockman.n33A04B1FromFocusToOutwardForFocusTreeBorders": "40,0,0,0; basic", > "blockman.n33A04B2FromFocusToOutwardForFocusTreeBackgrounds": "40,0,0,0; basic", > > "blockman.n33A05B1FromFocusToInwardForAllBorders": "!50,0,0,0; red > green > blue", > "blockman.n33A05B2FromFocusToInwardForAllBackgrounds": "!50,0,0,0; red > green > blue", >

For code blocks rendered in things like Markdown Preview and extension pages, use textCodeBlock.background.

答案2

得分: -1

你可以使用“workbench.colorCustomization”来设置背景颜色，在其中可以指定“editor.background”的颜色值。这是我的代码示例：

workbench.colorCustomizations": {
     "tab.activeBackground": "#23272e",
     "tab.inactiveBackground": "#2c2f38",
     "tab.hoverBackground": "#323842",
     "activityBar.background": "#2c2f38",
     "activityBar.foreground": "#d7dae0",
     "activityBarBadge.background": "#d7dae0",
     "activityBarBadge.foreground": "#23272e",
     "badge.background": "#404754",
     "sideBar.background": "#282c34",
     "sideBar.foreground": "#abb2bf",
     "tab.activeBorder": "#d19a66",
     "editor.background": "#23272e",
     "editor.foreground": "#abb2bf",
     "button.background": "#404754",
     "debugToolBar.background": "#21252b",
     "descriptionForeground": "#abb2bf",
     "dropdown.background": "#1e2227",
     "dropdown.border": "#404754",
     "statusBar.background": "#404754",
     "titleBar.activeBackground": "#404754",
     "focusBorder": "#404754",
     "editorSuggestWidget.selectedBackground": "#2c313a",
     "panel.border": "#404754",
     "scrollbarSlider.background": "#4e566660",
     "scrollbarSlider.activeBackground": "#747d9180",
     "scrollbarSlider.hoverBackground": "#5a637580"
   }

这是您的代码片段。

英文:

You can set the background color use "workbench.colorCustomization", inside that you can give "editor.background" color value what you want. This is the example from my code:

workbench.colorCustomizations&quot;: {
&quot;tab.activeBackground&quot;: &quot;#23272e&quot;,
&quot;tab.inactiveBackground&quot;: &quot;#2c2f38&quot;,
&quot;tab.hoverBackground&quot;: &quot;#323842&quot;,
&quot;activityBar.background&quot;: &quot;#2c2f38&quot;,
&quot;activityBar.foreground&quot;: &quot;#d7dae0&quot;,
&quot;activityBarBadge.background&quot;: &quot;#d7dae0&quot;,
&quot;activityBarBadge.foreground&quot;: &quot;#23272e&quot;,
&quot;badge.background&quot;: &quot;#404754&quot;,
&quot;sideBar.background&quot;: &quot;#282c34&quot;,
&quot;sideBar.foreground&quot;: &quot;#abb2bf&quot;,
&quot;tab.activeBorder&quot;: &quot;#d19a66&quot;,
&quot;editor.background&quot;: &quot;#23272e&quot;,
&quot;editor.foreground&quot;: &quot;#abb2bf&quot;,
&quot;button.background&quot;: &quot;#404754&quot;,
&quot;debugToolBar.background&quot;: &quot;#21252b&quot;,
&quot;descriptionForeground&quot;: &quot;#abb2bf&quot;,
&quot;dropdown.background&quot;: &quot;#1e2227&quot;,
&quot;dropdown.border&quot;: &quot;#404754&quot;,
&quot;statusBar.background&quot;: &quot;#404754&quot;,
&quot;titleBar.activeBackground&quot;: &quot;#404754&quot;,
&quot;focusBorder&quot;: &quot;#404754&quot;,
&quot;editorSuggestWidget.selectedBackground&quot;: &quot;#2c313a&quot;,
&quot;panel.border&quot;: &quot;#404754&quot;,
&quot;scrollbarSlider.background&quot;: &quot;#4e566660&quot;,
&quot;scrollbarSlider.activeBackground&quot;: &quot;#747d9180&quot;,
&quot;scrollbarSlider.hoverBackground&quot;: &quot;#5a637580&quot;
},

通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。

如何从Blockman扩展中设置VS Code代码块的背景颜色？

问题

答案1

答案2

Prettier不会根据打印宽度自动修复更长的Tailwind CSS类名堆栈。

关闭在VS Code上的Jupyter Notebook内核。

VS Code 报告 PHP 中从父类继承的方法出现假阳性。

VS Code为什么将HTML闭合标签中标签名称和右尖括号之间的空格标记为无效？

What's the correct way to type hint an empty list as a literal in python?

如何在Highcharts Gantt中更改本地化的星期名称

如何在同一个流中使用多个过滤器和映射函数？

如何使用Map/Set来将代码优化到O(n)？

.NET MAUI Android在GitHub Actions上构建失败，错误代码为1。

如何在Playwright视觉比较中屏蔽多个定位器？

在C++中，可以使用可变模板参数来检索类型的内部类型。

selenium.common.exceptions.StaleElementReferenceException: Message: stale element reference: stale element not found

Creating and opening a URL to log in to Website via Basic Auth with Robot Framework/Selenium (Python)

AG Grid 在上下文菜单中以大文本形式打开

发表评论