Syntax highlighting is absent in GitHub for .vue files with comment at top

[matthew-white]

Vue - Official extension or vue-tsc version

N/A

VSCode version

N/A

Vue version

N/A

TypeScript version

N/A

System Info

No response

package.json dependencies

No response

Steps to reproduce

In a GitHub repository I work on, I noticed that as of the last week, .vue files no longer have syntax highlighting when viewed in GitHub. I think that syntax highlighting in GitHub is determined by github-linguist/linguist. They had a release last week (v9.0.0) that updated the Vue grammar to use the one in this repository instead of the one from vuejs/vue-syntax-highlight (PR: github-linguist/linguist#7086).

I think the issue has to do with comments in .vue files. In my repository, there is a file header with copyright information at the top of every file. The file header is in a comment above <template>. When I remove that comment, I see that there is syntax highlighting for the file in GitHub.

If linguist needs to use a different grammar file or do something different from what they're doing, I'd be happy to file an issue with them.

What is expected?

I should see syntax highlighting when I view a .vue file in GitHub.

What is actually happening?

I do not see syntax highlighting when a .vue file starts with a comment.

Link to minimal reproduction

https://gist.github.com/matthew-white/1ed66c54adfef4b5153cc9ed793f7529

Any additional comments?

No response

[FeBe95]

We are having the same issue with some files in our repo.

[Orrison]

We have the same issue you can see in our public repo here: https://github.com/canyongbs/aidingapp/pull/365/files#diff-29ab79cf819c28a55805ffa38ceab6b755427c05501895fc3fc9e7499fe944d6R78-R81

[JoseGoncalves]

Same issue for me at: https://github.com/JoseGoncalves/vue-google-maps/blob/main/src/App.vue

[b-d-k]

Confirming same issue with all our Vue files in private (enterprise) repo.

[zyoshoka]

I found the reason why this problem does not reproduce in VS Code but it does on GitHub. The problem is the following reference (text.html.basic#comment):

language-tools/extensions/vscode/syntaxes/vue.tmLanguage.json

Lines 9 to 11 in fe54421

	{
	"include": "text.html.basic#comment"
	},

This reference resolves to standard HTML grammar in VS Code. You will see in the repository that there is a comment rule.

https://github.com/microsoft/vscode/blob/ea9b53fbcbcfd76f57d3f9414fb50ed2d05d3215/extensions/html/syntaxes/html.tmLanguage.json#L455-L478

Linguist, on the other hand, resolves to a different HTML grammar.

https://github.com/github-linguist/linguist/blob/1cc4b1a09f0bb64266386728966c1f839e386803/grammars.yml#L655-L656
https://github.com/github-linguist/linguist/blob/1cc4b1a09f0bb64266386728966c1f839e386803/.gitmodules#L701-L703

Looking at the grammar, there is no comment rules in the repository.

https://github.com/atom/language-html/blob/ee750a014a003c3d6f10b91e3cd5f9bfa0f051e6/grammars/html.cson

This means that syntax highlighting is not working because GitHub cannot resolve this reference.

One way to solve this problem is to replace this reference with the direct definition, but I think a separate definition file should be written for GitHub Linguist. It is because the idea of using the VS Code grammars for Linguist is not a good one, especially with this kind of reference problem. In fact, the reference source.json#value in the same file is also not referenced on GitHub for the same reason as above.

If the definition file is to be separated, it needs to be separated as a distinct Git repository, as Linguist only accepts grammars at the repository level. I would like to ask the maintainer to make a decision on this.