Line number overwrite at code block or page level

[yongjun21]

Feature request

What problem does this feature solve?

While the markdown.lineNumber config is useful, sometimes we want to overwrite specific code block or pages. For example line number is useful for demo code especially if we want to highlight specific lines. But in other case like typescript definition, we might want to hide the line numbers.

What does the proposed API look like?

Maybe use Front Matter?

How should this be implemented in your opinion?

Are you willing to work on this yourself?

[ulivz]

Contribution welcome!

You can pass the frontmatter setting via the 2nd parameter(env ) in the render method in markdown-loader:

vuepress/packages/@vuepress/markdown-loader/index.js

Lines 74 to 78 in d858e43

	} = markdown.render(content, {
	loader,
	frontmatter: frontmatter.data,
	relativePath: path.relative(sourceDir, file).replace(/\\/g, '/')
	})

Consuming this env at the internal lineNumbers plugin.

[yongjun21]

In the meanwhile I'm using a CSS overwrite targeting language-ts specifically

[roeeyn]

I'd love to contribute in this feature! ✨ Can I have this assigned?

[kefranabg]

Sure @roeeyn

[roeeyn]

Hey @kefranabg 👋 I'm working on this issue, but I have some doubts. Where may I reach you? Sorry, I'm kind of newbie, but want to help 😄

[roeeyn]

So, my very summarized question is: what is the correct way of accessing the frontmatter from the lineNumbers plugin? Also, this will only work if the lineNumbers is set to true in the markdown config. Is that ok? Maybe we could set to true the lineNumbers by default (so the plugin adds to the chain) and only overriding it in the frontmatter. I tried following @ulivz suggestion but I was not able to reach the front matter inside the plugin. It only reaches the inside of the overridden render method.

vuepress/packages/@vuepress/markdown/index.js

Lines 137 to 147 in 770ba72

	md.render = (...args) => {
	md.$data = {}
	md.$data.__data_block = {}
	md.$dataBlock = md.$data.__data_block
	const html = render.call(md, ...args)
	return {
	html,
	data: md.$data,
	dataBlockString: toDataBlockString(md.$dataBlock)
	}
	}

Any suggestion?

[FichteFoll]

According to prism's line-numbers plugin, I tried adding a line-numbers class to the code block via markdown-it-attrs, but it seems that this doesn't work for code blocks in vuepress because those are processed separately (and it also uses a separate line numbers plugin).

I would love to do block-specific overrides like the following:

``` {.line-numbers}
text with
line numbers
```

[FichteFoll]

I considered disabling the built-in highlight plugin (and the others that basically depend on it) in favor of using markdown-it-prism and its plugins directly, but it doesn't appear to be disableable, unfortunately.

There is a separate issue for this already: #1860

Edit: Apparently, some/many prism plugins can't be used without a browser jGleitz/markdown-it-prism#1.

[trapcodeio]

In the meanwhile I'm using a CSS overwrite targeting language-ts specifically

This actually helped and I recommend it. E.g I don't need line numbers in shell.
Using .styl

.language-shell.line-numbers-mode
  .line-numbers-wrapper
    display none