Skip to content

Commit 7bfb463

Browse files
committed
feat: support specifying language while importing code snippets
1 parent b2c3efc commit 7bfb463

File tree

2 files changed

+16
-20
lines changed

2 files changed

+16
-20
lines changed

docs/guide/markdown.md

Lines changed: 10 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -346,20 +346,12 @@ It also supports [line highlighting](#line-highlighting-in-code-blocks):
346346

347347
**Code file**
348348

349-
<!--lint disable strong-marker-->
350-
351349
<<< @/snippets/snippet.js
352350

353-
<!--lint enable strong-marker-->
354-
355351
**Output**
356352

357-
<!--lint disable strong-marker-->
358-
359353
<<< @/snippets/snippet.js{2}
360354

361-
<!--lint enable strong-marker-->
362-
363355
::: tip
364356
The value of `@` corresponds to the source root. By default it's the VitePress project root, unless `srcDir` is configured.
365357
:::
@@ -374,19 +366,22 @@ You can also use a [VS Code region](https://code.visualstudio.com/docs/editor/co
374366

375367
**Code file**
376368

377-
<!--lint disable strong-marker-->
378-
379369
<<< @/snippets/snippet-with-region.js
380370

381-
<!--lint enable strong-marker-->
382-
383371
**Output**
384372

385-
<!--lint disable strong-marker-->
386-
387373
<<< @/snippets/snippet-with-region.js#snippet{1}
388374

389-
<!--lint enable strong-marker-->
375+
You can also specify the language inside the braces (`{}`) like this:
376+
377+
```md
378+
<<< @/snippets/snippet.cs{c#}
379+
380+
<!-- with line highlighting: -->
381+
<<< @/snippets/snippet.cs{1,2,4-6 c#}
382+
```
383+
384+
This is helpful if source language cannot be inferred from your file extension.
390385

391386
## Advanced Configuration
392387

src/node/markdown/plugins/snippet.ts

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -104,25 +104,26 @@ export const snippetPlugin = (md: MarkdownIt, srcDir: string) => {
104104
/**
105105
* raw path format: "/path/to/file.extension#region {meta}"
106106
* where #region and {meta} are optional
107+
* and meta can be like '1,2,4-6 lang', 'lang' or '1,2,4-6'
107108
*
108109
* captures: ['/path/to/file.extension', 'extension', '#region', '{meta}']
109110
*/
110111
const rawPathRegexp =
111-
/^(.+(?:\.([a-z]+)))(?:(#[\w-]+))?(?: ?({\d+(?:[,-]\d+)*}))?$/
112+
/^(.+(?:\.([a-z]+)))(?:(#[\w-]+))?(?: ?(?:{(\d+(?:[,-]\d+)*)? ?(\S+)?}))?$/
112113

113114
const rawPath = state.src
114115
.slice(start, end)
115116
.trim()
116117
.replace(/^@/, srcDir)
117118
.trim()
118-
const [filename = '', extension = '', region = '', meta = ''] = (
119-
rawPathRegexp.exec(rawPath) || []
120-
).slice(1)
119+
120+
const [filename = '', extension = '', region = '', lines = '', lang = ''] =
121+
(rawPathRegexp.exec(rawPath) || []).slice(1)
121122

122123
state.line = startLine + 1
123124

124125
const token = state.push('fence', 'code', 0)
125-
token.info = extension + meta
126+
token.info = `${lang || extension}${lines ? `{${lines}}` : ''}`
126127

127128
// @ts-ignore
128129
token.src = path.resolve(filename) + region

0 commit comments

Comments
 (0)