vuejs
Syntax highlighting is absent in GitHub for .vue files with comment at top
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
We have the same issue you can see in our public repo here: https://github.com/canyongbs/aidingapp/pull/365/files#diff-29ab79cf819c28a55805ffa38ceab6b755427c05501895fc3fc9e7499fe944d6R78-R81
Same issue for me at: https://github.com/JoseGoncalves/vue-google-maps/blob/main/src/App.vue
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):
https://github.com/vuejs/language-tools/blob/fe544214c7ea7d38a612aacf22fab8c854fa0b65/extensions/vscode/syntaxes/vue.tmLanguage.json#L9-L11
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.
The new release of the Linguist (https://github.com/github-linguist/linguist/releases/tag/v9.2.0) with the changes from #5327 has been deployed and seems to have fixed the issue, so I believe it's okay to close this.