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(kcodeblock): add highlighted line numbers prop #2555

Merged
merged 6 commits into from
Jan 3, 2025

Conversation

kaiarrowood
Copy link
Collaborator

Summary

Add new highlightedLineNumbers prop to manually set highlighting without requiring search.

image

@kaiarrowood kaiarrowood self-assigned this Jan 3, 2025
Copy link

netlify bot commented Jan 3, 2025

Deploy Preview for kongponents-sandbox ready!

Name Link
🔨 Latest commit e1c3662
🔍 Latest deploy log https://app.netlify.com/sites/kongponents-sandbox/deploys/67783f734a8c1f0008ba82af
😎 Deploy Preview https://deploy-preview-2555--kongponents-sandbox.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

Copy link

netlify bot commented Jan 3, 2025

Deploy Preview for kongponents ready!

Name Link
🔨 Latest commit e1c3662
🔍 Latest deploy log https://app.netlify.com/sites/kongponents/deploys/67783f739e555400089fdad5
😎 Deploy Preview https://deploy-preview-2555--kongponents.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

Copy link
Member

@adamdehaven adamdehaven left a comment

Choose a reason for hiding this comment

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

Can you please update the sandbox page as well with an example for the new prop, as well as enabling search at the same time? How does the component respond if line numbers are passed in and search is also available?

@kaiarrowood
Copy link
Collaborator Author

kaiarrowood commented Jan 3, 2025

@adamdehaven

How does the component respond if line numbers are passed in and search is also available?

I will update the sandbox 👍🏻 , this is setting the "initial" highlighted lines. If you enable search too your default highlighted lines will be overridden by your search results. I'll update the docs

kaiarrowood and others added 2 commits January 3, 2025 14:49
Co-authored-by: Adam DeHaven <2229946+adamdehaven@users.noreply.github.com>
Copy link
Member

@adamdehaven adamdehaven left a comment

Choose a reason for hiding this comment

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

lgtm

@kaiarrowood kaiarrowood merged commit fdfb16a into main Jan 3, 2025
11 checks passed
@kaiarrowood kaiarrowood deleted the feat/kcodeblock-highlighted-lines-prop branch January 3, 2025 20:07
kongponents-bot pushed a commit that referenced this pull request Jan 3, 2025
# [9.15.0](v9.14.30...v9.15.0) (2025-01-03)

### Features

* **kcodeblock:** add highlighted line numbers prop ([#2555](#2555)) ([fdfb16a](fdfb16a))
@kongponents-bot
Copy link
Collaborator

🎉 This PR is included in version 9.15.0 🎉

The release is available on:

Your semantic-release bot 📦🚀


An array of line numbers to initially highlight in the code block.

If search is enabled, matching results will be highlighted in place of the provided line numbers, and all highlighted lines will be cleared once the search query is cleared.
Copy link
Contributor

Choose a reason for hiding this comment

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

Why do we need to cancel line highlighting when the query is cleared? I think it's better to emit an event for this and let users to decide whether to cancel line highlighting.

id="code-block-highlight"
:code="code"
language="json"
:highlighted-line-numbers="[2,4,6]"
Copy link
Contributor

Choose a reason for hiding this comment

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

Shall we also support the syntax that VitePress and Gatsby supports (4,7-13,16,23-27,40) so that it's easier to highlight a range of lines?

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants