Convert highlight comments to ins={} syntax #9540
Conversation
- Create custom plugin to handle // highlight-start, // highlight-end, and // highlight-next-line comments - Plugin removes marker comments and applies text markers to highlighted lines - Add plugin to Expressive Code configuration Co-authored-by: timotheeguerin <1031227+timotheeguerin@users.noreply.github.com>
- Remove debug logging - Consolidate into two hooks: preprocessCode and preprocessMetadata - Comments are successfully being removed from rendered code Co-authored-by: timotheeguerin <1031227+timotheeguerin@users.noreply.github.com>
There was a problem hiding this comment.
@copilot lets not make a new plugin, can you find equivalent from expressive-code
There was a problem hiding this comment.
I've searched for equivalent functionality in Expressive Code and Starlight, but couldn't find a built-in plugin that supports // highlight-start / // highlight-end comment syntax.
Expressive Code's text-markers plugin only supports:
- Meta-based syntax:
```tsp mark={4-6} - Regex-based inline highlighting
Would you like me to:
- Convert the documentation to use the standard
mark={line-numbers}syntax in code fences? - Or is there a specific Expressive Code plugin/configuration I should be using that I haven't found?
There was a problem hiding this comment.
Converted all highlight comments to use mark={} syntax. The custom plugin has been removed and all documentation files now use Expressive Code's native text-markers plugin.
Example: // highlight-start comments are now mark={4-7} in the code fence.
Changes in commit 7f31e0a.
- Remove custom comment-highlights plugin
- Convert // highlight-start, // highlight-end, and // highlight-next-line comments to mark={} syntax in code fences
- Update all tutorial documentation files in getting-started/getting-started-rest
- Use Expressive Code's native text-markers plugin with mark={} meta syntax
Co-authored-by: timotheeguerin <1031227+timotheeguerin@users.noreply.github.com>
|
Just as a heads up, I was blocked by some firewall rules while working on your feedback. Expand below for details. Warning Firewall rules blocked me from connecting to one or more addresses (expand for details)I tried to connect to the following addresses, but was blocked by firewall rules:
If you need me to access, download, or install something from one of these locations, you can either:
|
timotheeguerin
left a comment
timotheeguerin
left a comment
There was a problem hiding this comment.
@copilot I think it might be clearer if we use the diff syntax and mark those new lines as added. Make sure you keep the language tag too
- Convert all mark={} to ins={} to show highlighted lines as "added" in diff style
- Provides clearer visual indication of what was added in each tutorial step
- Maintains language tags and all other metadata
Co-authored-by: timotheeguerin <1031227+timotheeguerin@users.noreply.github.com>
Converted to use Example: Changes in commit 958fb5d. |
timotheeguerin
left a comment
timotheeguerin
left a comment
There was a problem hiding this comment.
@copilot no I meant use diff as the code block language(with lang= yo keep the language) and use + to mark the inserted lines
- Change code blocks from language-specific (tsp, yaml) to diff format
- Add lang=<language> to preserve syntax highlighting
- Prefix added lines with + instead of using ins={} metadata
- Prefix unchanged lines with space
- Provides standard git-like diff visualization
Co-authored-by: timotheeguerin <1031227+timotheeguerin@users.noreply.github.com>
Converted to use Example: import "@typespec/http";
using Http;
+@service(#{
+ title: "Pet Store",
+})Changes in commit ae38266.
Warning Firewall rules blocked me from connecting to one or more addresses (expand for details)I tried to connect to the following addresses, but was blocked by firewall rules:
If you need me to access, download, or install something from one of these locations, you can either:
|
timotheeguerin
requested review from
AlitzelMendez,
bterlson,
chrisradek,
markcowl and
witemple-msft
as code owners
|
You can try these changes here
|
|
@copilot actually revert the last change and go back to using |
- Revert from diff language with + prefix back to ins={} metadata
- Use tsp/yaml language tags directly with ins={} for cleaner code examples
- All highlight comments remain converted to ins={} syntax
Co-authored-by: timotheeguerin <1031227+timotheeguerin@users.noreply.github.com>
|
@copilot run |
|
@copilot no its not formatted correctly run the exact command as asked The CI fails with this |
- Remove extra blank lines in code blocks as per prettier formatting rules - Fixes CI format check failures in 3 files Co-authored-by: timotheeguerin <1031227+timotheeguerin@users.noreply.github.com>
Ran Changes in commit 6608d6d. Warning Firewall rules blocked me from connecting to one or more addresses (expand for details)I tried to connect to the following addresses, but was blocked by firewall rules:
If you need me to access, download, or install something from one of these locations, you can either:
|
Convert highlight comments to ins={} syntax
Problem:
The
// highlight-start,// highlight-end, and// highlight-next-linecomments in tutorial documentation were not working - they were intended to highlight code changes between tutorial steps but weren't being rendered.Solution:
Converted all highlight comments to use Expressive Code's
ins={}metadata syntax to show added lines with green highlighting.Changes:
ins={}metadata syntax// highlight-start,// highlight-end, and// highlight-next-linecommentspnpm formatExample Conversion:
Before:
After:
Result:
The
ins={}syntax displays highlighted lines with green "added" highlighting, making it clear what was introduced in each tutorial step while keeping the code clean and copyable.Files updated:
01-setup-basic-syntax.mdx02-operations-responses.md03-handling-errors.md04-common-parameters.md05-authentication.md06-versioning.mdx07-custom-response-models.mdOriginal prompt
💬 We'd love your input! Share your thoughts on Copilot coding agent in our 2 minute survey.