Skip to content

Commit 543c2b7

Browse files
antfuantfu
committed
feat(transformers): nations support range
1 parent 7754b34 commit 543c2b7

9 files changed

+92
-32
lines changed

‎packages/shikiji-transformers/src/transformers/notation-diff.ts

+8-3
Original file line numberDiff line numberDiff line change
@@ -31,12 +31,17 @@ export function transformerNotationDiff(
3131

3232
return createCommentNotationTransformer(
3333
'shikiji-transformers:notation-diff',
34-
/\[!code (\-\-|\+\+)\]/,
35-
function ([_, match], line) {
34+
/\[!code (\-\-|\+\+)(:\d+)?\]/,
35+
function ([_, match, range = ':1'], _line, _comment, lines, index) {
3636
const className = match === '--'
3737
? classRemoved
3838
: classAdded
39-
addClassToHast(line, className)
39+
const lineNum = Number.parseInt(range.slice(1), 10)
40+
lines
41+
.slice(index, index + lineNum)
42+
.forEach((line) => {
43+
addClassToHast(line, className)
44+
})
4045
if (classRootActive)
4146
addClassToHast(this.pre, classRootActive)
4247
return true

‎packages/shikiji-transformers/src/transformers/notation-error-level.ts

+8-3
Original file line numberDiff line numberDiff line change
@@ -21,9 +21,14 @@ export function transformerNotationErrorLevel(
2121

2222
return createCommentNotationTransformer(
2323
'shikiji-transformers:notation-error-level',
24-
new RegExp(`\\[!code (${Object.keys(classMap).join('|')})\\]`),
25-
([_, match], line) => {
26-
addClassToHast(line, classMap[match])
24+
new RegExp(`\\[!code (${Object.keys(classMap).join('|')})(:\\d+)?\\]`),
25+
([_, match, range = ':1'], _line, _comment, lines, index) => {
26+
const lineNum = Number.parseInt(range.slice(1), 10)
27+
lines
28+
.slice(index, index + lineNum)
29+
.forEach((line) => {
30+
addClassToHast(line, classMap[match])
31+
})
2732
return true
2833
},
2934
)

‎packages/shikiji-transformers/src/transformers/notation-focus.ts

+8-3
Original file line numberDiff line numberDiff line change
@@ -26,9 +26,14 @@ export function transformerNotationFocus(
2626

2727
return createCommentNotationTransformer(
2828
'shikiji-transformers:notation-focus',
29-
/\[!code focus\]/,
30-
function (_, line) {
31-
addClassToHast(line, classFocused)
29+
/\[!code focus(:\d+)?\]/,
30+
function ([_, range = ':1'], _line, _comment, lines, index) {
31+
const lineNum = Number.parseInt(range.slice(1), 10)
32+
lines
33+
.slice(index, index + lineNum)
34+
.forEach((line) => {
35+
addClassToHast(line, classFocused)
36+
})
3237
if (classRootActive)
3338
addClassToHast(this.pre, classRootActive)
3439
return true

‎packages/shikiji-transformers/src/transformers/notation-highlight.ts

+8-3
Original file line numberDiff line numberDiff line change
@@ -26,9 +26,14 @@ export function transformerNotationHighlight(
2626

2727
return createCommentNotationTransformer(
2828
'shikiji-transformers:notation-highlight',
29-
/\[!code (hl|highlight)\]/,
30-
function (_, line) {
31-
addClassToHast(line, classHighlight)
29+
/\[!code (?:hl|highlight)(:\d+)?\]/,
30+
function ([_, range = ':1'], _line, _comment, lines, index) {
31+
const lineNum = Number.parseInt(range.slice(1), 10)
32+
lines
33+
.slice(index, index + lineNum)
34+
.forEach((line) => {
35+
addClassToHast(line, classHighlight)
36+
})
3237
if (classRootActive)
3338
addClassToHast(this.pre, classRootActive)
3439
return true

‎packages/shikiji-transformers/src/utils.ts

+30-20
Original file line numberDiff line numberDiff line change
@@ -21,30 +21,40 @@ export function isCommentLike(node: Element, line: Element) {
2121
export function createCommentNotationTransformer(
2222
name: string,
2323
regex: RegExp,
24-
onMatch: (this: ShikijiTransformerContext, match: RegExpMatchArray, line: Element, commentNode: Element) => boolean,
24+
onMatch: (
25+
this: ShikijiTransformerContext,
26+
match: RegExpMatchArray,
27+
line: Element,
28+
commentNode: Element,
29+
lines: Element[],
30+
index: number,
31+
) => boolean,
2532
): ShikijiTransformer {
2633
return {
2734
name,
28-
line(line) {
29-
let nodeToRemove: Element | undefined
30-
for (const child of line.children) {
31-
if (child.type !== 'element')
32-
continue
33-
if (!isCommentLike(child, line))
34-
continue
35-
const text = child.children[0]
36-
if (text.type !== 'text')
37-
continue
38-
const match = text.value.match(regex)
39-
if (!match)
40-
continue
41-
if (onMatch.call(this, match, line, child)) {
42-
nodeToRemove = child
43-
break
35+
code(code) {
36+
const lines = code.children.filter(i => i.type === 'element') as Element[]
37+
lines.forEach((line, idx) => {
38+
let nodeToRemove: Element | undefined
39+
for (const child of line.children) {
40+
if (child.type !== 'element')
41+
continue
42+
if (!isCommentLike(child, line))
43+
continue
44+
const text = child.children[0]
45+
if (text.type !== 'text')
46+
continue
47+
const match = text.value.match(regex)
48+
if (!match)
49+
continue
50+
if (onMatch.call(this, match, line, child, lines, idx)) {
51+
nodeToRemove = child
52+
break
53+
}
4454
}
45-
}
46-
if (nodeToRemove)
47-
line.children.splice(line.children.indexOf(nodeToRemove), 1)
55+
if (nodeToRemove)
56+
line.children.splice(line.children.indexOf(nodeToRemove), 1)
57+
})
4858
},
4959
}
5060
}

‎packages/shikiji-transformers/test/fixtures/focus/mutliple-lines.js

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
export function transformerNotationFocus(
2+
options = {}, // [!code focus:4]
3+
) {
4+
const {
5+
classFocused = 'focused',
6+
classRootActive = 'has-focused',
7+
} = options
8+
}

‎packages/shikiji-transformers/test/fixtures/focus/mutliple-lines.js.output.html

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
<pre class="shiki github-dark has-focused" style="background-color:#24292e;color:#e1e4e8" tabindex="0"><code><span class="line"><span style="color:#F97583">export</span><span style="color:#F97583"> function</span><span style="color:#B392F0"> transformerNotationFocus</span><span style="color:#E1E4E8">(</span></span><span class="line focused"><span style="color:#FFAB70"> options</span><span style="color:#F97583"> =</span><span style="color:#E1E4E8"> {}, </span></span><span class="line focused"><span style="color:#E1E4E8">) {</span></span><span class="line focused"><span style="color:#F97583"> const</span><span style="color:#E1E4E8"> {</span></span><span class="line focused"><span style="color:#79B8FF"> classFocused</span><span style="color:#F97583"> =</span><span style="color:#9ECBFF"> 'focused'</span><span style="color:#E1E4E8">,</span></span><span class="line"><span style="color:#79B8FF"> classRootActive</span><span style="color:#F97583"> =</span><span style="color:#9ECBFF"> 'has-focused'</span><span style="color:#E1E4E8">,</span></span><span class="line"><span style="color:#E1E4E8"> } </span><span style="color:#F97583">=</span><span style="color:#E1E4E8"> options</span></span><span class="line"><span style="color:#E1E4E8">}</span></span><span class="line"></span></code></pre>
2+
<style>
3+
body { margin: 0; }
4+
.shiki { padding: 1em; }
5+
.line { display: block; width: 100%; height: 1.2em; }
6+
.has-focused .focused { background-color: #8805; }
7+
</style>

‎packages/shikiji-transformers/test/fixtures/highlight/mutliple-lines.js

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
export function transformerNotationFocus(
2+
options = {}, // [!code highlight:4]
3+
) {
4+
const {
5+
classFocused = 'focused',
6+
classRootActive = 'has-focused',
7+
} = options
8+
}

‎packages/shikiji-transformers/test/fixtures/highlight/mutliple-lines.js.output.html

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
<pre class="shiki github-dark has-highlighted" style="background-color:#24292e;color:#e1e4e8" tabindex="0"><code><span class="line"><span style="color:#F97583">export</span><span style="color:#F97583"> function</span><span style="color:#B392F0"> transformerNotationFocus</span><span style="color:#E1E4E8">(</span></span><span class="line highlighted"><span style="color:#FFAB70"> options</span><span style="color:#F97583"> =</span><span style="color:#E1E4E8"> {}, </span></span><span class="line highlighted"><span style="color:#E1E4E8">) {</span></span><span class="line highlighted"><span style="color:#F97583"> const</span><span style="color:#E1E4E8"> {</span></span><span class="line highlighted"><span style="color:#79B8FF"> classFocused</span><span style="color:#F97583"> =</span><span style="color:#9ECBFF"> 'focused'</span><span style="color:#E1E4E8">,</span></span><span class="line"><span style="color:#79B8FF"> classRootActive</span><span style="color:#F97583"> =</span><span style="color:#9ECBFF"> 'has-focused'</span><span style="color:#E1E4E8">,</span></span><span class="line"><span style="color:#E1E4E8"> } </span><span style="color:#F97583">=</span><span style="color:#E1E4E8"> options</span></span><span class="line"><span style="color:#E1E4E8">}</span></span><span class="line"></span></code></pre>
2+
<style>
3+
body { margin: 0; }
4+
.shiki { padding: 1em; }
5+
.line { display: block; width: 100%; height: 1.2em; }
6+
.highlighted { background-color: #888; }
7+
</style>

0 commit comments

Comments
 (0)