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(code block): add line number attribute to code block lines #1973

Merged
merged 5 commits into from
Apr 12, 2023
Merged

feat(code block): add line number attribute to code block lines #1973

merged 5 commits into from
Apr 12, 2023

Conversation

nobkd
Copy link
Contributor

@nobkd nobkd commented Mar 25, 2023

πŸ”— Linked issue

#1972
#1970

❓ Type of change

  • πŸ“– Documentation (updates to the documentation or readme)
  • 🐞 Bug fix (a non-breaking change that fixes an issue)
  • πŸ‘Œ Enhancement (improving an existing functionality like performance)
  • ✨ New feature (a non-breaking change that adds functionality)
  • ⚠️ Breaking change (fix or feature that would cause existing functionality to change)

πŸ“š Description

This PR adds an attribute line for each line of a code block. Inline codes are unaffected.
A line attributes contains the line number for the current line.

Non-highlighted code blocks always just had one line.
Therefore, a new function was added to split the plain code to individual lines.

πŸ“ Checklist

  • I have linked an issue or discussion.
  • I have updated the documentation accordingly.

@codesandbox
Copy link

codesandbox bot commented Mar 25, 2023

CodeSandbox logoCodeSandbox logoΒ  Open in CodeSandbox Web Editor | VS Code | VS Code Insiders

@netlify
Copy link

netlify bot commented Mar 25, 2023

βœ… Deploy Preview for nuxt-content ready!

Name Link
πŸ”¨ Latest commit 8cd152d
πŸ” Latest deploy log https://app.netlify.com/sites/nuxt-content/deploys/643692ba217af4000855d22a
😎 Deploy Preview https://deploy-preview-1973--nuxt-content.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 settings.

@nobkd
Copy link
Contributor Author

nobkd commented Mar 25, 2023

Maybe there's a better way to make those line numbers available, so we're also able to display them next to the code as requested in #1970

@farnabaz
Copy link
Member

Maybe there's a better way to make those line numbers available, so we're also able to display them next to the code as requested in #1970

I think it would be better if we add line number as a data attribute instead of class

<div data-line="1" ...>...</div>
<div data-line="2" ...>...</div>

This way, users can display line number using with CSS styling.

WDYT @nobkd ?

@nobkd
Copy link
Contributor Author

nobkd commented Mar 27, 2023

LGTM, then someone should be able to style a line with [line="X"] and use the attr(line) to append the number to ::before.

@nobkd
Copy link
Contributor Author

nobkd commented Mar 27, 2023

@farnabaz
I have updated the code.

I think this should be mentioned in the docs, but I don't quite know where to put it. Do you have any suggestion?
Maybe here? https://content.nuxtjs.org/guide/writing/markdown#code-highlighting

EDIT: I just added it first. Feel free to edit or move the notice.

@nobkd nobkd changed the title feat(code block): add line number class to code block lines feat(code block): add line number attribute to code block lines Mar 27, 2023
@nuxt-studio
Copy link

nuxt-studio bot commented Mar 27, 2023

βœ… Live Preview ready!

Name Edit Preview Latest Commit
content Edit on Studio β†—οΈŽ View Live Preview 8cd152d

@nuxt-studio
Copy link

nuxt-studio bot commented Mar 27, 2023

βœ… Live Preview ready!

Name Edit Preview Latest Commit
content Edit on Studio β†—οΈŽ View Live Preview 6bdc0d9

Copy link
Member

@farnabaz farnabaz left a comment

Choose a reason for hiding this comment

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

Thanks

@farnabaz farnabaz merged commit 7bb8b10 into nuxt:main Apr 12, 2023
@nobkd nobkd deleted the feat/code-block-line-numbers branch April 12, 2023 11:52
@farnabaz farnabaz mentioned this pull request Apr 19, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants