Minimap section headers are not shown for regions in HTML and CSS

[Chrysaloid]

Type: Bug

1. Open any .html or .css file.
2. Type a comment: in .html

<!-- #region Test -->
<!-- #endregion -->

or in .css:

/* #region Test */
/* #endregion */

3. Look at the minimap and see that there is no "Test" section header displayed.

I have tried different layouts:
HTML

<!--
	#region Test 1
-->
<!-- #endregion -->

<!-- #region Test 2
-->
<!-- #endregion -->

<!--
	#region Test 3 -->
<!-- #endregion -->

<!--
	// #region Test 4
-->
<!-- #endregion -->

<!--
	//#region Test 5
-->
<!-- #endregion -->

CSS

/*
  #region Test 1
*/
/* #endregion */

/* #region Test 2
*/
/* #endregion */

/*
  #region Test 3 */
/* #endregion */

/*
	// #region Test 4
*/
/* #endregion */

/*
	//#region Test 5
*/
/* #endregion */

None of them work.

In both HTML and CSS comments 1-3 produce foldable regions and 4-5 don't produce foldable regions.

In JS though, line comments like // #region <NAME> produce section headers correctly.

For now I have figured a workaround for this by using MARK::

<!-- #region MARK: Test -->
<!-- #endregion -->

/* #region MARK: Test */
/* #endregion */

which does produce section header in the minimap, but it also includes the ending comment part so the resulting header is Test --> (or Test */). Not ideal but works for now.

VS Code version: Code 1.88.1 (e170252, 2024-04-10T17:41:02.734Z)
OS version: Windows_NT x64 10.0.19043
Modes:

System Info

Item	Value
CPUs	12th Gen Intel(R) Core(TM) i9-12900K (24 x 3187)
GPU Status	2d_canvas: enabled canvas_oop_rasterization: enabled_on direct_rendering_display_compositor: disabled_off_ok gpu_compositing: enabled multiple_raster_threads: enabled_on opengl: enabled_on rasterization: enabled raw_draw: disabled_off_ok skia_graphite: disabled_off video_decode: enabled video_encode: enabled vulkan: disabled_off webgl: enabled webgl2: enabled webgpu: enabled
Load (avg)	undefined
Memory (System)	31.79GB (16.77GB free)
Process Argv	--crash-reporter-id e9ca0812-669b-4c22-96cc-6578a0e47256
Screen Reader	no
VM	0%

Extensions (56)

Extension	Author (truncated)	Version
es6-string-css	bas	0.1.0
vscode-toggle-quotes	Bri	0.3.6
xml	Dot	2.5.1
code-runner	for	0.12.2
vscode-embrace-line	HAS	1.0.0
fracturedjsonvsc	j-b	4.0.0
latex-workshop	Jam	9.20.0
javadoc-generator	Kee	3.0.7
javadoc-tools	mad	1.6.0
vscode-autohotkey-plus-plus	mar	5.0.3
language-matlab	Mat	1.2.1
rainbow-csv	mec	3.11.0
vscode-language-pack-pl	MS-	1.88.2024041009
csdevkit	ms-	1.4.29
csharp	ms-	2.23.15
vscode-dotnet-runtime	ms-	2.0.3
vscodeintellicode-csharp	ms-	2.0.25
debugpy	ms-	2024.4.0
python	ms-	2024.4.1
vscode-pylance	ms-	2024.4.1
jupyter	ms-	2024.3.1
jupyter-keymap	ms-	1.1.2
jupyter-renderers	ms-	1.0.17
vscode-jupyter-cell-tags	ms-	0.1.9
vscode-jupyter-slideshow	ms-	0.1.6
remote-wsl	ms-	0.88.0
cmake-tools	ms-	1.17.17
cpptools	ms-	1.19.9
cpptools-extension-pack	ms-	1.3.0
powershell	ms-	2024.2.1
vsliveshare	ms-	1.0.5918
copyplaintext	p26	1.1.5
colorful-comments	Par	1.0.0
material-icon-theme	PKi	4.34.0
vscode-template-literal-editor	pli	0.10.0
java	red	1.29.0
vscode-xml	red	0.26.1
vscode-sort-json	ric	1.20.0
action-buttons	seu	1.2.2
toggle-boolean	sil	0.10.0
html-to-css-autocompletion	sol	1.1.2
es6-string-html	Tob	2.15.0
cmake	twx	0.0.17
sort-lines	Tyr	1.11.0
remove-empty-lines	use	1.0.1
intellicode-api-usage-examples	Vis	0.2.8
vscodeintellicode	Vis	1.3.1
intouch-language	Vit	1.4.0
vscode-java-debug	vsc	0.57.0
vscode-java-dependency	vsc	0.23.6
vscode-java-pack	vsc	0.26.0
vscode-java-test	vsc	0.41.0
vscode-maven	vsc	0.44.0
JavaScriptSnippets	xab	1.8.0
json	Zai	2.0.2
ts-essential-plugins	zar	0.0.77

(1 theme extensions excluded)

A/B Experiments

vsliv368:30146709
vspor879:30202332
vspor708:30202333
vspor363:30204092
vscod805cf:30301675
binariesv615:30325510
vsaa593cf:30376535
py29gd2263:30899288
c4g48928:30535728
azure-dev_surveyone:30548225
2i9eh265:30646982
962ge761:30959799
pythongtdpath:30769146
welcomedialogc:30910334
pythonidxpt:30866567
pythonnoceb:30805159
asynctok:30898717
pythontestfixt:30902429
pythonregdiag2:30936856
pyreplss1:30897532
pythonmypyd1:30879173
pythoncet0:30885854
2e7ec940:31000449
pythontbext0:30879054
accentitlementst:30995554
dsvsc016:30899300
dsvsc017:30899301
dsvsc018:30899302
cppperfnew:31000557
d34g3935:30971562
fegfb526:30981948
bg6jg535:30979843
ccp2r3:30993541
dsvsc020:30976470
pythonait:31006305
gee8j676:31009558
dsvsc021:30996838
9c06g630:31013171

[alexdima]

The current implementation uses the folding rules of the outer language for the entire file

vscode/src/vs/editor/contrib/sectionHeaders/browser/sectionHeaders.ts

Lines 108 to 110 in 4af0c6a

	const commentsConfiguration = this.languageConfigurationService.getLanguageConfiguration(languageId).comments;
	const foldingRules = this.languageConfigurationService.getLanguageConfiguration(languageId).foldingRules;

, so in HTML , the following markers will be searched for

vscode/extensions/html/language-configuration.json

Lines 28 to 33 in 4af0c6a

	"folding": {
	"markers": {
	"start": "^\\s*<!--\\s*#region\\b.*-->",
	"end": "^\\s*<!--\\s*#endregion\\b.*-->"
	}
	},

[VSCodeTriageBot]

This feature request is now a candidate for our backlog. The community has 60 days to upvote the issue. If it receives 20 upvotes we will move it to our backlog. If not, we will close it. To learn more about how we handle feature requests, please see our documentation.

Happy Coding!

[troy351]

It would be better to support embed language regions in minimap. The most useful case is in .vue file's <script> section when using composition api