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

feat: Line Numbers only for single code block #1363

Closed
wants to merge 8 commits into from
Closed

feat: Line Numbers only for single code block #1363

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
35ae43f
feat: Line Numbers only for single code block
g4rry420 Sep 18, 2022
fba2e4a
Merge branch 'main' into issue_1256
g4rry420 Sep 20, 2022
e41f35c
fix: rawCode condition
g4rry420 Sep 20, 2022
ce5cbf9
fix: language in code block when markdown-it-attrs is disabled and li…
g4rry420 Sep 24, 2022
a229a10
Merge branch 'main' into issue_1256
g4rry420 Sep 24, 2022
c7a68ae
fix: Added regex with word boundary for showLineNumbers
g4rry420 Sep 29, 2022
6a20432
Merge branch 'main' into issue_1256
g4rry420 Oct 2, 2022
141795f
Merge branch 'main' into issue_1256
g4rry420 Oct 22, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
55 changes: 53 additions & 2 deletions docs/guide/markdown.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -353,16 +353,67 @@ export default { // Highlighted

## Line Numbers

You can enable line numbers for each code blocks via config:
You can enable line numbers for each code blocks via config or you can specify `{showLineNumbers}` for a single code block:

```js
**Input**

````
```js{showLineNumbers}
export default {
markdown: {
lineNumbers: true
}
}
```
````

**Output**

```js{showLineNumbers}
export default {
markdown: {
lineNumbers: true
}
}
```


You can also highlight lines along with specifying line numbers.

**Input**

````
```js{1,4,6-8,showLineNumbers}
export default { // Highlighted
data () {
return {
msg: `Highlighted!
This line isn't highlighted,
but this and the next 2 are.`,
motd: 'VitePress is awesome',
lorem: 'ipsum'
}
}
}
```
````

**Output**

```js{1,4,6-8,showLineNumbers}
export default { // Highlighted
data () {
return {
msg: `Highlighted!
This line isn't highlighted,
but this and the next 2 are.`,
motd: 'VitePress is awesome',
lorem: 'ipsum',
}
}
}
```

Please see [`markdown` options](../config/app-configs#markdown) for more details.

## Import Code Snippets
Expand Down
5 changes: 1 addition & 4 deletions src/node/markdown/markdown.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -80,6 +80,7 @@ export const createMarkdownRenderer = async (
},
base
)
.use(lineNumberPlugin, options.lineNumbers)

// 3rd party plugins
if (!options.attrs?.disable) {
Expand Down Expand Up @@ -113,9 +114,5 @@ export const createMarkdownRenderer = async (
if (options.config) {
options.config(md)
}

if (options.lineNumbers) {
md.use(lineNumberPlugin)
}
return md
}
2 changes: 1 addition & 1 deletion src/node/markdown/plugins/highlight.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ const attrsToLines = (attrs: string): HtmlRendererOptions['lineOptions'] => {
result.push(
...Array.from({ length: end - start + 1 }, (_, i) => start + i)
)
} else {
} else if (!isNaN(start)) {
result.push(start)
}
})
Expand Down
7 changes: 5 additions & 2 deletions src/node/markdown/plugins/highlightLines.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@

import MarkdownIt from 'markdown-it'

const RE = /{([\d,-]+)}/
const RE = /{([\w,-]+)}/

g4rry420 marked this conversation as resolved.
Show resolved Hide resolved
export const highlightLinePlugin = (md: MarkdownIt) => {
const fence = md.renderer.rules.fence!
Expand Down Expand Up @@ -37,7 +37,10 @@ export const highlightLinePlugin = (md: MarkdownIt) => {
if (!lines) {
lines = attr![0]

if (!lines || !/[\d,-]+/.test(lines)) {
if (
!lines ||
(!/[\d,-]+/.test(lines) && !lines.includes('showLineNumbers'))
) {
return fence(...args)
}
}
Expand Down
16 changes: 15 additions & 1 deletion src/node/markdown/plugins/lineNumbers.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,10 +3,24 @@

import MarkdownIt from 'markdown-it'

export const lineNumberPlugin = (md: MarkdownIt) => {
export const lineNumberPlugin = (
md: MarkdownIt,
isLineNumberOption: Boolean
) => {
const fence = md.renderer.rules.fence!
md.renderer.rules.fence = (...args) => {
const rawCode = fence(...args)
const [tokens, idx] = args
const token = tokens[idx]
const attr = token.attrs && token.attrs[0]
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This logic won't work if markdown-it-attrs is disabled. As a fallback, you need to manually check token.info too for that option (refer highlightLines plugin for example, we had done similar stuff there). Also, have you checked if this works with line highlighting and snippets import? If yes, then consider adding some example to the docs.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@brc-dd On disabling markdown-it-attrs, I noticed that on the top right corner of code block where we are displaying the language for the code, the {1,4,6-8} - line highlightning syntax is also coming up. Is this intended or a bug ?
Screenshot 2022-09-24 132412

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah it's a bug.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I have resolved the above bug and also line numbers are now working even if markdown-it-attrs is disabled. Please, let me know if you see any issues :)

const info = token.info
if (
(!isLineNumberOption && !attr && !info) ||
(!isLineNumberOption && attr && !attr[0].includes('showLineNumbers')) ||
(!isLineNumberOption && info && !info.includes('showLineNumbers'))
) {
return rawCode
}
const code = rawCode.slice(
rawCode.indexOf('<code>'),
rawCode.indexOf('</code>')
Expand Down
4 changes: 3 additions & 1 deletion src/node/markdown/plugins/preWrapper.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,11 +9,13 @@

import MarkdownIt from 'markdown-it'

const RE = /{([\w,-]+)}/

export const preWrapperPlugin = (md: MarkdownIt) => {
const fence = md.renderer.rules.fence!
md.renderer.rules.fence = (...args) => {
const [tokens, idx] = args
const lang = tokens[idx].info.trim().replace(/-vue$/, '')
const lang = tokens[idx].info.trim().replace(/-vue$/, '').replace(RE, '')
const rawCode = fence(...args)
return `<div class="language-${lang}"><button class="copy"></button><span class="lang">${
lang === 'vue-html' ? 'template' : lang
Expand Down