Skip to content

docs: set syntax highlighting of code examples MD code blocks#59026

Closed
hawkgs wants to merge 1 commit intoangular:mainfrom
hawkgs:docs/ts-code-examples-syntax-highlighing
Closed

docs: set syntax highlighting of code examples MD code blocks#59026
hawkgs wants to merge 1 commit intoangular:mainfrom
hawkgs:docs/ts-code-examples-syntax-highlighing

Conversation

@hawkgs
Copy link
Copy Markdown
Member

@hawkgs hawkgs commented Dec 3, 2024

PR Checklist

Please check if your PR fulfills the following requirements:

PR Type

What kind of change does this PR introduce?

  • Bugfix
  • Feature
  • Code style update (formatting, local variables)
  • Refactoring (no functional changes, no api changes)
  • Build related changes
  • CI related changes
  • Documentation content changes
  • angular.dev application / infrastructure changes
  • Other... Please describe:

What is the current behavior?

Currently, there are quite a few code examples in the API reference that don't have syntax highlighting. Some examples:

What is the new behavior?

By setting the syntax highlighting parameter of the Markdown code blocks, the examples are now displayed properly.

The change most likely also targets code snippets/examples that are not part of the API reference.

Screenshot 2024-12-03 at 17 16 42

Does this PR introduce a breaking change?

  • Yes
  • No

@angular-robot angular-robot bot added the area: docs Related to the documentation label Dec 3, 2024
@ngbot ngbot bot added this to the Backlog milestone Dec 3, 2024
@hawkgs hawkgs force-pushed the docs/ts-code-examples-syntax-highlighing branch from f0bdac1 to 06a47a4 Compare December 4, 2024 08:47
@hawkgs hawkgs requested a review from JeanMeche December 4, 2024 08:57
@github-actions
Copy link
Copy Markdown

github-actions bot commented Dec 4, 2024

Deployed adev-preview for a8eb451 to: https://ng-dev-previews-fw--pr-angular-angular-59026-adev-prev-dffbuqen.web.app

Note: As new commits are pushed to this pull request, this link is updated after the preview is rebuilt.

@hawkgs hawkgs force-pushed the docs/ts-code-examples-syntax-highlighing branch from 06a47a4 to 106921f Compare December 4, 2024 14:38
@hawkgs
Copy link
Copy Markdown
Member Author

hawkgs commented Dec 4, 2024

Leaving a short list with changes after the latest push:

  • Missing syntax highlighting params have been added to all MD code blocks that qualify for angular-ts, ts, angular-html or html in packages/*
  • All instances of typescript in packages/* have been renamed to ts
  • ts examples have been changed to angular-ts where there is a component decorator with an inlined template
  • html examples have been changed to angular-html where there is usage of the new control flow syntax

@josephperrott josephperrott added target: patch This PR is targeted for the next patch release action: merge The PR is ready for merge by the caretaker adev: preview and removed adev: preview labels Dec 4, 2024
@josephperrott
Copy link
Copy Markdown
Member

Looks like angular-ts is not loaded as a valid language and the build fails during the prerender pipeline.

@JeanMeche
Copy link
Copy Markdown
Member

It should be angular-ts instead of ts-angular

@JeanMeche JeanMeche added action: cleanup The PR is in need of cleanup, either due to needing a rebase or in response to comments from reviews and removed action: merge The PR is ready for merge by the caretaker labels Dec 4, 2024
@hawkgs
Copy link
Copy Markdown
Member Author

hawkgs commented Dec 4, 2024

Yeah, messed up the param at packages/core/src/di/forward_ref.ts somehow. Will issue a fix in a few minutes.

@hawkgs hawkgs force-pushed the docs/ts-code-examples-syntax-highlighing branch from 106921f to afeeef1 Compare December 4, 2024 15:17
Set the syntax highlighting based on the code examples' language.
@hawkgs hawkgs force-pushed the docs/ts-code-examples-syntax-highlighing branch from afeeef1 to a8eb451 Compare December 4, 2024 15:19
Copy link
Copy Markdown
Member

@josephperrott josephperrott left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

Reviewed-for: global-approvers

@josephperrott josephperrott removed the action: cleanup The PR is in need of cleanup, either due to needing a rebase or in response to comments from reviews label Dec 4, 2024
@josephperrott josephperrott added the action: merge The PR is ready for merge by the caretaker label Dec 4, 2024
@pkozlowski-opensource
Copy link
Copy Markdown
Member

This PR was merged into the repository by commit 0513fbc.

The changes were merged into the following branches: main, 19.0.x

pkozlowski-opensource pushed a commit that referenced this pull request Dec 4, 2024
Set the syntax highlighting based on the code examples' language.

PR Close #59026
@hawkgs hawkgs deleted the docs/ts-code-examples-syntax-highlighing branch December 6, 2024 11:20
hawkgs added a commit to hawkgs/angular that referenced this pull request Dec 6, 2024
… blocks

There are some code blocks that slipped through the initial Regex-es.

Related to angular#59026
@angular-automatic-lock-bot
Copy link
Copy Markdown

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 Jan 6, 2025
PrajaktaB27 pushed a commit to PrajaktaB27/angular that referenced this pull request Feb 7, 2025
…r#59026)

Set the syntax highlighting based on the code examples' language.

PR Close angular#59026
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Labels

action: merge The PR is ready for merge by the caretaker adev: preview area: docs Related to the documentation target: patch This PR is targeted for the next patch release

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants