[V2] Potential code block improvements

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

Thank you @KohheePeace and @elviswolcott!

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