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

feat: support focus, colored diffs, error highlights in code blocks #1534

Merged
merged 4 commits into from Oct 25, 2022
Merged

feat: support focus, colored diffs, error highlights in code blocks #1534

merged 4 commits into from Oct 25, 2022

Conversation

innocenzi
Copy link
Contributor

@innocenzi innocenzi commented Oct 25, 2022

Fixes #830
Fixes #1314

This pull request adds support for colored diffs and focused lines in code blocks. This is done thanks to shiki-processor, which makes possible to add custom processors that act on a code snippet.

Specifically, the focus, diff and highlight processors are added. They work by adding a // [!code <tag>] comment inline, similar to Torchlight.

In a follow-up PR or in this one if you agree, it would be nice to add support for userland to provide processors as well.

Here is a preview of the line focusing:

CleanShot.2022-10-25.at.15.32.32.mp4

And here is what the colored line diffing looks like:

CleanShot 2022-10-25 at 15 33 06

@brc-dd
Copy link
Member

brc-dd commented Oct 25, 2022

Might as well include error and warning processors there. There was a request for this: #1314

@brc-dd brc-dd added the enhancement New feature or request label Oct 25, 2022
@innocenzi
Copy link
Contributor Author

Sure. Feel free to tweak the CSS or anything else:

image

keeping the colors whole enables using color picker in dev tools
@brc-dd brc-dd changed the title feat: support focus and colored diffs feat: support focus, colored diffs, error highlights in code blocks Oct 25, 2022
@brc-dd brc-dd merged commit 04ab0eb into vuejs:main Oct 25, 2022
@jd-solanki
Copy link
Contributor

Thanks @innocenzi

This is impressive ❤️

@innocenzi innocenzi deleted the feat/better-shiki branch October 25, 2022 14:47
@github-actions github-actions bot locked as resolved and limited conversation to collaborators Jan 21, 2023
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
enhancement New feature or request
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Support error lines in code blocks [Feature Request] Diff and Language Highlights
3 participants