Docusaurus: [V2] Potential code block improvements

[markerikson]

🚀 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.

[yangshun]

Sounds very useful indeed!

[elviswolcott]

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]

It looks life @KohheePeace has the code titles figured out. I can take a stab at the code highlight comments.

[markerikson]

Looks like the filename title PR is almost done. @elviswolcott , are you still looking at doing the code highlighting comments feature?

[elviswolcott]

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]

My PR implements highlight-next-line, highlight-start, and highlight-end.

The linked Gatsby plugin also includes a highlight-range comment 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 that highlight-next-line, highlight-start, and highlight-end will always be more readable and maintainable.

If anyone thinks it should be added, I can throw it in.

[markerikson]

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]

Thank you @KohheePeace and @elviswolcott!