feat(build): fence-level config for line-numbers (#1733)

pull/1736/head
Divyansh Singh 2 years ago committed by GitHub
parent 195d867ee9
commit c048076370
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

@ -495,6 +495,38 @@ export default {
Please see [`markdown` options](../config/app-configs#markdown) for more details. Please see [`markdown` options](../config/app-configs#markdown) for more details.
You can add `:line-numbers` / `:no-line-numbers` mark in your fenced code blocks to override the value set in config.
**Input**
````md
```ts {1}
// line-numbers is disabled by default
const line2 = 'This is line 2'
const line3 = 'This is line 3'
```
```ts:line-numbers {1}
// line-numbers is enabled
const line2 = 'This is line 2'
const line3 = 'This is line 3'
```
````
**Output**
```ts {1}
// line-numbers is disabled by default
const line2 = 'This is line 2'
const line3 = 'This is line 3'
```
```ts:line-numbers {1}
// line-numbers is enabled
const line2 = 'This is line 2'
const line3 = 'This is line 3'
```
## Import Code Snippets ## Import Code Snippets
You can import code snippets from existing files via following syntax: You can import code snippets from existing files via following syntax:
@ -551,6 +583,10 @@ You can also specify the language inside the braces (`{}`) like this:
<!-- with line highlighting: --> <!-- with line highlighting: -->
<<< @/snippets/snippet.cs{1,2,4-6 c#} <<< @/snippets/snippet.cs{1,2,4-6 c#}
<!-- with line numbers: -->
<<< @/snippets/snippet.cs{1,2,4-6 c#:line-numbers}
``` ```
This is helpful if source language cannot be inferred from your file extension. This is helpful if source language cannot be inferred from your file extension.

@ -76,13 +76,10 @@ export const createMarkdownRenderer = async (
.use(imagePlugin) .use(imagePlugin)
.use( .use(
linkPlugin, linkPlugin,
{ { target: '_blank', rel: 'noreferrer', ...options.externalLinks },
target: '_blank',
rel: 'noreferrer',
...options.externalLinks
},
base base
) )
.use(lineNumberPlugin, options.lineNumbers)
// 3rd party plugins // 3rd party plugins
if (!options.attrs?.disable) { if (!options.attrs?.disable) {
@ -115,8 +112,5 @@ export const createMarkdownRenderer = async (
options.config(md) options.config(md)
} }
if (options.lineNumbers) {
md.use(lineNumberPlugin)
}
return md return md
} }

@ -74,10 +74,12 @@ export async function highlight(
const styleRE = /<pre[^>]*(style=".*?")/ const styleRE = /<pre[^>]*(style=".*?")/
const preRE = /^<pre(.*?)>/ const preRE = /^<pre(.*?)>/
const vueRE = /-vue$/ const vueRE = /-vue$/
const lineNoRE = /:(no-)?line-numbers$/
return (str: string, lang: string, attrs: string) => { return (str: string, lang: string, attrs: string) => {
const vPre = vueRE.test(lang) ? '' : 'v-pre' const vPre = vueRE.test(lang) ? '' : 'v-pre'
lang = lang.replace(vueRE, '').toLowerCase() || defaultLang lang =
lang.replace(lineNoRE, '').replace(vueRE, '').toLowerCase() || defaultLang
const lineOptions = attrsToLines(attrs) const lineOptions = attrsToLines(attrs)
const cleanup = (str: string) => const cleanup = (str: string) =>

@ -3,10 +3,21 @@
import MarkdownIt from 'markdown-it' import MarkdownIt from 'markdown-it'
export const lineNumberPlugin = (md: MarkdownIt) => { export const lineNumberPlugin = (md: MarkdownIt, enable = false) => {
const fence = md.renderer.rules.fence! const fence = md.renderer.rules.fence!
md.renderer.rules.fence = (...args) => { md.renderer.rules.fence = (...args) => {
const rawCode = fence(...args) const rawCode = fence(...args)
const [tokens, idx] = args
const info = tokens[idx].info
if (
(!enable && !/:line-numbers($| )/.test(info)) ||
(enable && /:no-line-numbers($| )/.test(info))
) {
return rawCode
}
const code = rawCode.slice( const code = rawCode.slice(
rawCode.indexOf('<code>'), rawCode.indexOf('<code>'),
rawCode.indexOf('</code>') rawCode.indexOf('</code>')

@ -19,6 +19,7 @@ export function extractTitle(info: string) {
const extractLang = (info: string) => { const extractLang = (info: string) => {
return info return info
.trim() .trim()
.replace(/:(no-)?line-numbers$/, '')
.replace(/(-vue|{| ).*$/, '') .replace(/(-vue|{| ).*$/, '')
.replace(/^vue-html$/, 'template') .replace(/^vue-html$/, 'template')
} }

Loading…
Cancel
Save