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.

Sign up for GitHub

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

Jump to bottom

[docs-infra] Add line and word highlighting on code blocks #41509

Open
danilo-leal opened this issue Mar 15, 2024 · 2 comments · May be fixed by #42444
Open

[docs-infra] Add line and word highlighting on code blocks #41509

danilo-leal opened this issue Mar 15, 2024 · 2 comments · May be fixed by #42444
Labels
design This is about UI or UX design, please involve a designer new feature New feature or request scope: docs-infra Specific to the docs-infra product

Comments

@danilo-leal
Copy link
Contributor

danilo-leal commented Mar 15, 2024 •
edited
Loading

Summary

Sometimes, we may want to draw attention to a specific part of a code snippet. That can be either a small function, a variable, or an entire line. We currently lack a way of doing this "natively" within our docs-infra experience. Here's just a quick preview of what this could look like:

Screenshot 2024-03-15 at 19 28 49

Benchmark

  • @atomiks shared his rehype-pretty-code library that we could potentially use! In terms of DX, I don't think we should deviate too much from how it is done in it.
  • Docusaurus also has its own way of adding this feature that we can be inspired by too.
@danilo-leal danilo-leal added new feature New feature or request design This is about UI or UX design, please involve a designer scope: docs-infra Specific to the docs-infra product labels Mar 15, 2024
@danilo-leal danilo-leal mentioned this issue Apr 29, 2024
Merged
1 task
@JoseBarriaSantos
Copy link

Hey, can I work on this feature? Seems interesting

@danilo-leal
Copy link
Contributor Author

@JoseBarriaSantos go ahead!

JoseBarriaSantos added a commit to 1CUNHA1/material-ui that referenced this issue May 27, 2024
@JoseBarriaSantos @1CUNHA1
Feat: [docs-infra] Add line and word highlighting on code blocks (mui…
48788a5 
…#41509)

Added the ability to highlight lines of code in a code snippet.
Used the prism.js library (couldn't use rehype-pretty-code)
with the line highlighting plugin, to apply the highlight.
Example of use:
'
´´´javascript {1, 3-5}
foo {

someCode

return bar

}
```
'
Writing this inside a Markdown section would highlight lines 1,3,4,5
of the code snippet.

Co-authored-by: LUIS BARROS <luis.barros@tecnico.ulisboa.pt>
1CUNHA1 added a commit to 1CUNHA1/material-ui that referenced this issue May 29, 2024
@1CUNHA1 @JoseBarriaSantos
Feat: [docs-infra] Add line and word highlighting on
c025287 
code blocks (mui#41509)

Added the ability to highlight lines of code in a code snippet.
Used the prism.js library (couldn't use rehype-pretty-code)
with the line highlighting plugin, to apply the highlight.
Example of use:

´´´javascript {1, 3-5}
 foo {

 someCode

 return bar

  }
```

Writing this inside a Markdown section would highlight lines
1,3,4,5 of the code snippet.

Co-authored-by: JOSE SANTOS <jose.barria.santos@tecnico.ulisboa.pt>
1CUNHA1 added a commit to 1CUNHA1/material-ui that referenced this issue May 29, 2024
@1CUNHA1 @JoseBarriaSantos
Feat: [docs-infra] Add line and word highlighting on
3626f5d 
 code blocks (mui#41509)

Added the ability to highlight lines of code in a code snippet.
Used the prism.js library (couldn't use rehype-pretty-code)
with the line highlighting plugin, to apply the highlight.
Example of use:

´´´javascript {1, 3-5}
foo {

someCode

return bar

}
```

Writing this inside a Markdown section would highlight lines
1,3,4,5 of the code snippet.

Co-authored-by: JOSE SANTOS <jose.barria.santos@tecnico.ulisboa.pt>
@danilo-leal danilo-leal linked a pull request May 29, 2024 that will close this issue
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
design This is about UI or UX design, please involve a designer new feature New feature or request scope: docs-infra Specific to the docs-infra product
Projects
Docs-infra
Status: In progress
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

[docs-infra] Add line and word highlighting on code blocks 1CUNHA1/material-ui
2 participants
@danilo-leal @JoseBarriaSantos