Repository navigation
[V2] Potential code block improvements #2271
Description
🚀 Feature
v2 code blocks currently have the ability to highlight specific line numbers, like this:
```jsx {1,4-6,11}
However, highlighting lines based on line numbers is somewhat difficult to use.
The gatsby-remark-prismjs plugin has the ability to highlight individual lines by putting a // highlight-next-line comment in front, or highlight ranges of lines using // highlight-start and // highlight-end pairs. It looks like the logic is implemented in this directives.js file.
This would be a great addition to the Docusaurus Prism plugin.
In addition, I've seen that many docs websites have code snippets that include a filename in front of the block, such as Gatsby (example) and Ember (example).
Gatsby's Markdown for this looks like:
```javascript:title=src/pages/about-css-modules.js
import React from "react"
// highlight-next-line
import styles from "./about-css-modules.module.css"
import Container from "../components/container"
// highlight-next-line
console.log(styles)Have you read the Contributing Guidelines on issues?
Yes
Motivation
Easier line highlights and filenames would be very useful, especially as part of tutorials that are telling users what to edit.
Activity
yangshun commentedon Feb 18, 2020
Sounds very useful indeed!
elviswolcott commentedon Feb 27, 2020
I've built these features out for an internal site on docusaurus v1 before. I'll take a stab at implementing it with this syntax sometime next week if no one takes it before then.
elviswolcott commentedon Mar 4, 2020
It looks life @kohheepeace has the code titles figured out. I can take a stab at the code highlight comments.
markerikson commentedon Mar 22, 2020
Looks like the filename title PR is almost done. @elviswolcott , are you still looking at doing the code highlighting comments feature?
elviswolcott commentedon Mar 22, 2020
Yeah, lost track of this with everything going on the last few weeks. I'll get a PR together in the next few days.
elviswolcott commentedon Mar 24, 2020
My PR implements
highlight-next-line,highlight-start, andhighlight-end.The linked Gatsby plugin also includes a
highlight-rangecomment which I did not implement, as it doesn't seem particularly useful. It is somewhat more useful than the current method (e.g. highlighting relative to a function declaration) but it seems thathighlight-next-line,highlight-start, andhighlight-endwill always be more readable and maintainable.If anyone thinks it should be added, I can throw it in.
markerikson commentedon Apr 1, 2020
Looks like both the requested features are in https://github.com/facebook/docusaurus/releases/tag/v2.0.0-alpha.49 , so I'll close this. Thanks!
yangshun commentedon Apr 1, 2020
Thank you @kohheepeace and @elviswolcott!