fix: custom titles of code snippets inside code groups (#1834)

Co-authored-by: Divyansh Singh <40380293+brc-dd@users.noreply.github.com>
pull/1946/head
Alexey Iskhakov 3 years ago committed by GitHub
parent ed90724022
commit bcb8cbf3c8
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

@ -651,6 +651,34 @@ export default config
:::
You can also [import snippets](#import-code-snippets) in code groups:
**Input**
```md
::: code-group
<!-- filename is used as title by default -->
<<< @/snippets/snippet.js
<!-- you can provide a custom one too -->
<<< @/snippets/snippet-with-region.js#snippet{1,2 ts:line-numbers} [snippet with region]
:::
```
**Output**
::: code-group
<<< @/snippets/snippet.js
<<< @/snippets/snippet-with-region.js#snippet{1,2 ts:line-numbers} [snippet with region]
:::
## Markdown File Inclusion
You can include a markdown file in another markdown file like this:

@ -24,8 +24,13 @@ export const lineNumberPlugin = (md: MarkdownIt, enable = false) => {
)
const lines = code.split('\n')
const lineNumbersCode = [...Array(lines.length - 1)]
.map((line, index) => `<span class="line-number">${index + 1}</span><br>`)
const lineNumbersCode = [
...Array(
lines.length - (lines.at(-1) === `<span class="line"></span>` ? 1 : 0)
)
]
.map((_, index) => `<span class="line-number">${index + 1}</span><br>`)
.join('')
const lineNumbersWrapperCode = `<div class="line-numbers-wrapper" aria-hidden="true">${lineNumbersCode}</div>`

@ -3,11 +3,15 @@ import type MarkdownIt from 'markdown-it'
export function preWrapperPlugin(md: MarkdownIt) {
const fence = md.renderer.rules.fence!
md.renderer.rules.fence = (...args) => {
const { info } = args[0][args[1]]
const lang = extractLang(info)
const [tokens, idx] = args
const token = tokens[idx]
// remove title from info
token.info = token.info.replace(/\[.*\]/, '')
const lang = extractLang(token.info)
const rawCode = fence(...args)
return `<div class="language-${lang}${
/ active( |$)/.test(info) ? ' active' : ''
/ active( |$)/.test(token.info) ? ' active' : ''
}"><button title="Copy Code" class="copy"></button><span class="lang">${lang}</span>${rawCode}</div>`
}
}
@ -19,7 +23,7 @@ export function extractTitle(info: string) {
const extractLang = (info: string) => {
return info
.trim()
.replace(/:(no-)?line-numbers$/, '')
.replace(/:(no-)?line-numbers({| |$).*/, '')
.replace(/(-vue|{| ).*$/, '')
.replace(/^vue-html$/, 'template')
}

@ -95,10 +95,10 @@ export const snippetPlugin = (md: MarkdownIt, srcDir: string) => {
* where #region and {meta} are optional
* and meta can be like '1,2,4-6 lang', 'lang' or '1,2,4-6'
*
* captures: ['/path/to/file.extension', 'extension', '#region', '{meta}']
* captures: ['/path/to/file.extension', 'extension', '#region', '{meta}', '[title]']
*/
const rawPathRegexp =
/^(.+(?:\.([a-z0-9]+)))(?:(#[\w-]+))?(?: ?(?:{(\d+(?:[,-]\d+)*)? ?(\S+)?}))?$/
/^(.+(?:\.([a-z0-9]+)))(?:(#[\w-]+))?(?: ?(?:{(\d+(?:[,-]\d+)*)? ?(\S+)?}))? ?(?:\[(.+)\])?$/
const rawPath = state.src
.slice(start, end)
@ -106,13 +106,23 @@ export const snippetPlugin = (md: MarkdownIt, srcDir: string) => {
.replace(/^@/, srcDir)
.trim()
const [filename = '', extension = '', region = '', lines = '', lang = ''] =
(rawPathRegexp.exec(rawPath) || []).slice(1)
const [
filename = '',
extension = '',
region = '',
lines = '',
lang = '',
rawTitle = ''
] = (rawPathRegexp.exec(rawPath) || []).slice(1)
const title = rawTitle || filename.split('/').at(-1) || ''
state.line = startLine + 1
const token = state.push('fence', 'code', 0)
token.info = `${lang || extension}${lines ? `{${lines}}` : ''}`
token.info = `${lang || extension}${lines ? `{${lines}}` : ''}${
title ? `[${title}]` : ''
}`
// @ts-ignore
token.src = path.resolve(filename) + region

Loading…
Cancel
Save