Skip to content

Commit e653ea9

Browse files
antfuantfu
committed
fix(markdown-it): prepend builtin transformers, close #40 
1 parent 2fb3954 commit e653ea9

File tree

3 files changed

+76
-5
lines changed

3 files changed

+76
-5
lines changed

‎packages/markdown-it-shikiji/src/index.ts

+11-5
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import type MarkdownIt from 'markdown-it'
22
import { addClassToHast, bundledLanguages, getHighlighter } from 'shikiji'
3-
import type { BuiltinLanguage, BuiltinTheme, CodeOptionsMeta, CodeOptionsThemes, CodeToHastOptions, Highlighter, LanguageInput, TransformerOptions } from 'shikiji'
3+
import type { BuiltinLanguage, BuiltinTheme, CodeOptionsMeta, CodeOptionsThemes, CodeToHastOptions, Highlighter, LanguageInput, ShikijiTransformer, TransformerOptions } from 'shikiji'
44
import { parseHighlightLines } from '../../shared/line-highlight'
55

66
export type MarkdownItShikijiOptions = MarkdownItShikijiSetupOptions & {
@@ -52,7 +52,7 @@ function setup(markdownit: MarkdownIt, highlighter: Highlighter, options: Markdo
5252
},
5353
}
5454

55-
codeOptions.transformers ||= []
55+
const builtInTransformer: ShikijiTransformer[] = []
5656

5757
if (highlightLines) {
5858
const lines = parseHighlightLines(attrs)
@@ -61,7 +61,7 @@ function setup(markdownit: MarkdownIt, highlighter: Highlighter, options: Markdo
6161
? 'highlighted'
6262
: highlightLines
6363

64-
codeOptions.transformers.push({
64+
builtInTransformer.push({
6565
name: 'markdown-it-shikiji:line-class',
6666
line(node, line) {
6767
if (lines.includes(line))
@@ -72,7 +72,7 @@ function setup(markdownit: MarkdownIt, highlighter: Highlighter, options: Markdo
7272
}
7373
}
7474

75-
codeOptions.transformers.push({
75+
builtInTransformer.push({
7676
name: 'markdown-it-shikiji:block-class',
7777
code(node) {
7878
node.properties.class = `language-${lang}`
@@ -81,7 +81,13 @@ function setup(markdownit: MarkdownIt, highlighter: Highlighter, options: Markdo
8181

8282
return highlighter.codeToHtml(
8383
code,
84-
codeOptions,
84+
{
85+
...codeOptions,
86+
transformers: [
87+
...builtInTransformer,
88+
...codeOptions.transformers || [],
89+
],
90+
},
8591
)
8692
}
8793
}

‎packages/shikiji-twoslash/test/markdown-it.test.ts

+39
Original file line numberDiff line numberDiff line change
@@ -60,4 +60,43 @@ const a = 123
6060

6161
expect(styleTag + html).toMatchFileSnapshot('./out/markdown-it/works.html')
6262
})
63+
64+
it('with highlight lines', async () => {
65+
const md = MarkdownIt()
66+
67+
md.use(await Shikiji({
68+
highlightLines: true,
69+
themes: {
70+
light: 'vitesse-light',
71+
dark: 'vitesse-dark',
72+
},
73+
defaultColor: false,
74+
transformers: [
75+
transformerTwoSlash({
76+
explicitTrigger: true,
77+
renderer: rendererRich,
78+
}),
79+
],
80+
}))
81+
82+
const html = md.render(`
83+
# Hello
84+
85+
\`\`\`ts {1,3} twoslash
86+
const a = 123
87+
const b = 123
88+
const v = 123
89+
// ^?
90+
\`\`\`
91+
92+
\`\`\`ts twoslash {2}
93+
const a = 123
94+
const b = 123
95+
const v = 123
96+
// ^?
97+
\`\`\`
98+
`.trim())
99+
100+
expect(styleTag + html).toMatchFileSnapshot('./out/markdown-it/highlight-lines.html')
101+
})
63102
})

‎packages/shikiji-twoslash/test/out/markdown-it/highlight-lines.html

+26
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
2+
<link rel="stylesheet" href="../../../style-rich.css" />
3+
<style>
4+
.dark .shiki,
5+
.dark .shiki span {
6+
color: var(--shiki-dark, inherit);
7+
background-color: var(--shiki-dark-bg, inherit);
8+
--twoslash-popup-bg: var(--shiki-dark-bg, inherit);
9+
}
10+
11+
html:not(.dark) .shiki,
12+
html:not(.dark) .shiki span {
13+
color: var(--shiki-light, inherit);
14+
background-color: var(--shiki-light-bg, inherit);
15+
--twoslash-popup-bg: var(--shiki-light-bg, inherit);
16+
}
17+
</style>
18+
<h1>Hello</h1>
19+
<pre class="shiki shiki-themes vitesse-light vitesse-dark twoslash lsp" style="--shiki-light:#393a34;--shiki-dark:#dbd7caee;--shiki-light-bg:#ffffff;--shiki-dark-bg:#121212" tabindex="0"><code class="language-ts"><span class="line highlighted"><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676">const </span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A"><span class="twoslash-hover">a<span class="twoslash-hover-info"><span class="line"><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676">const </span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A">a</span><span style="--shiki-light:#999999;--shiki-dark:#666666">: </span><span style="--shiki-light:#2F798A;--shiki-dark:#4C9A91">123</span></span></span></span></span><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676"> </span><span style="--shiki-light:#999999;--shiki-dark:#666666">=</span><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676"> </span><span style="--shiki-light:#2F798A;--shiki-dark:#4C9A91">123</span></span>
20+
<span class="line"><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676">const </span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A"><span class="twoslash-hover">b<span class="twoslash-hover-info"><span class="line"><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676">const </span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A">b</span><span style="--shiki-light:#999999;--shiki-dark:#666666">: </span><span style="--shiki-light:#2F798A;--shiki-dark:#4C9A91">123</span></span></span></span></span><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676"> </span><span style="--shiki-light:#999999;--shiki-dark:#666666">=</span><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676"> </span><span style="--shiki-light:#2F798A;--shiki-dark:#4C9A91">123</span></span>
21+
<span class="line highlighted"><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676">const </span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A">v</span><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676"> </span><span style="--shiki-light:#999999;--shiki-dark:#666666">=</span><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676"> </span><span style="--shiki-light:#2F798A;--shiki-dark:#4C9A91">123</span></span>
22+
<span class="line"></span><div class="twoslash-meta-line twoslash-popover-line"> <span class="twoslash-popover"><div class="twoslash-popover-arrow"></div><span class="line"><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676">const </span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A">v</span><span style="--shiki-light:#999999;--shiki-dark:#666666">: </span><span style="--shiki-light:#2F798A;--shiki-dark:#4C9A91">123</span></span></span></div></code></pre>
23+
<pre class="shiki shiki-themes vitesse-light vitesse-dark twoslash lsp" style="--shiki-light:#393a34;--shiki-dark:#dbd7caee;--shiki-light-bg:#ffffff;--shiki-dark-bg:#121212" tabindex="0"><code class="language-ts"><span class="line"><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676">const </span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A"><span class="twoslash-hover">a<span class="twoslash-hover-info"><span class="line"><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676">const </span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A">a</span><span style="--shiki-light:#999999;--shiki-dark:#666666">: </span><span style="--shiki-light:#2F798A;--shiki-dark:#4C9A91">123</span></span></span></span></span><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676"> </span><span style="--shiki-light:#999999;--shiki-dark:#666666">=</span><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676"> </span><span style="--shiki-light:#2F798A;--shiki-dark:#4C9A91">123</span></span>
24+
<span class="line highlighted"><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676">const </span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A"><span class="twoslash-hover">b<span class="twoslash-hover-info"><span class="line"><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676">const </span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A">b</span><span style="--shiki-light:#999999;--shiki-dark:#666666">: </span><span style="--shiki-light:#2F798A;--shiki-dark:#4C9A91">123</span></span></span></span></span><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676"> </span><span style="--shiki-light:#999999;--shiki-dark:#666666">=</span><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676"> </span><span style="--shiki-light:#2F798A;--shiki-dark:#4C9A91">123</span></span>
25+
<span class="line"><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676">const </span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A">v</span><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676"> </span><span style="--shiki-light:#999999;--shiki-dark:#666666">=</span><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676"> </span><span style="--shiki-light:#2F798A;--shiki-dark:#4C9A91">123</span></span>
26+
<span class="line"></span><div class="twoslash-meta-line twoslash-popover-line"> <span class="twoslash-popover"><div class="twoslash-popover-arrow"></div><span class="line"><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676">const </span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A">v</span><span style="--shiki-light:#999999;--shiki-dark:#666666">: </span><span style="--shiki-light:#2F798A;--shiki-dark:#4C9A91">123</span></span></span></div></code></pre>

0 commit comments

Comments
 (0)