Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Docs: Improve Syntax Highlighting #54536

Closed
niklas-wortmann opened this issue Feb 21, 2024 · 4 comments
Closed

Docs: Improve Syntax Highlighting #54536

niklas-wortmann opened this issue Feb 21, 2024 · 4 comments
Labels
area: adev Angular.dev documentation area: dev-infra Issues related to Angular's own dev infra (build, test, CI, releasing) P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent
Milestone

Comments

@niklas-wortmann
Copy link
Contributor

Describe the problem that you experienced

Angular leverages embedded languages (have a combination of HTML, Typescript and CSS) in one file. A lot of syntax highlighter are not necessarily good with embedded language, this includes also highlighter js which is used in the new documentation.

Enter the URL of the topic with the problem

https://angular.dev/guide/components

Describe what you were looking for in the documentation

I'd expect HTML code to have HTML highlighting (+angular syntax for control flow syntax), the examples shown on that very page have Typescript syntax highlighting but not HTML for the template part.

Describe the actions that led you to experience the problem

Look at code examples in the new docs

Describe what you want to experience that would fix the problem

image

vs proper highlighting of the same code

image

Add a screenshot if that helps illustrate the problem

No response

If this problem caused an exception or error, please paste it here

No response

If the problem is browser-specific, please specify the device, OS, browser, and version

No response

Provide any additional information here in as much as detail as you can

I think this problem could be nicely solved by using [shiki](https://github.com/shikijs/shiki) which uses the textmate grammar files of the angular language server. It actually fetches the grammar files regular to be always up to date, in case there are additions (e.g. control flow)/fixes.
Shiki also comes with commonly used themes and has easy mechanisms to provide a custom theme.
@niklas-wortmann
Copy link
Contributor Author

I integrated Shiki now in various projects, so I'd be more than happy to take care of that, if interested

@bencodezen bencodezen added area: dev-infra Issues related to Angular's own dev infra (build, test, CI, releasing) P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent area: adev Angular.dev documentation labels Feb 21, 2024
@ngbot ngbot bot modified the milestone: Backlog Feb 21, 2024
@bencodezen
Copy link
Contributor

Thanks for filing the issue @niklas-wortmann! I'll chat with the team to see what the plan is for this. Happy to loop you in if the plan is to use shiki or something.

@bencodezen bencodezen added this to To Do in adev Feb 22, 2024
@bencodezen
Copy link
Contributor

Closing this issue in favor of consolidating into #52654

@bencodezen bencodezen moved this from To Do to In Progress in adev Mar 26, 2024
@bencodezen bencodezen removed this from In Progress in adev Mar 26, 2024
@angular-automatic-lock-bot
Copy link

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

This action has been performed automatically by a bot.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Apr 26, 2024
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
area: adev Angular.dev documentation area: dev-infra Issues related to Angular's own dev infra (build, test, CI, releasing) P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent
Projects
None yet
Development

No branches or pull requests

2 participants