Skip to content

Commit a2e8e76

Browse files
JuanM04JuanM04
authored
chore: updated shiki (#4519)
* Upgraded shiki * Use setColorReplacements * no-shadow * Changeset
1 parent 2708523 commit a2e8e76

File tree

9 files changed

+82
-27
lines changed

9 files changed

+82
-27
lines changed

‎.changeset/big-guests-cry.md

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
---
2+
'astro': patch
3+
'@astrojs/mdx': patch
4+
'@astrojs/markdown-remark': patch
5+
---
6+
7+
Upgraded Shiki to v0.11.1

‎packages/astro/components/Code.astro

-5
Original file line numberDiff line numberDiff line change
@@ -38,11 +38,6 @@ const { code, lang = 'plaintext', theme = 'github-dark', wrap = false } = Astro.
3838
function repairShikiTheme(html: string): string {
3939
// Replace "shiki" class naming with "astro"
4040
html = html.replace('<pre class="shiki"', '<pre class="astro-code"');
41-
// Replace "shiki" css variable naming with "astro".
42-
html = html.replace(
43-
/style="(background-)?color: var\(--shiki-/g,
44-
'style="$1color: var(--astro-code-'
45-
);
4641
// Handle code wrapping
4742
// if wrap=null, do nothing.
4843
if (wrap === false) {

‎packages/astro/components/Shiki.js

+20-1
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,10 @@ function stringify(opts) {
88
return JSON.stringify(opts, Object.keys(opts).sort());
99
}
1010

11+
/**
12+
* @param {import('shiki').HighlighterOptions} opts
13+
* @returns {Promise<import('shiki').Highlighter>}
14+
*/
1115
export function getHighlighter(opts) {
1216
const key = stringify(opts);
1317

@@ -17,7 +21,22 @@ export function getHighlighter(opts) {
1721
}
1822

1923
// Start the async getHighlighter call and cache the Promise
20-
const highlighter = getShikiHighlighter(opts);
24+
const highlighter = getShikiHighlighter(opts).then((hl) => {
25+
hl.setColorReplacements({
26+
'#000001': 'var(--astro-code-color-text)',
27+
'#000002': 'var(--astro-code-color-background)',
28+
'#000004': 'var(--astro-code-token-constant)',
29+
'#000005': 'var(--astro-code-token-string)',
30+
'#000006': 'var(--astro-code-token-comment)',
31+
'#000007': 'var(--astro-code-token-keyword)',
32+
'#000008': 'var(--astro-code-token-parameter)',
33+
'#000009': 'var(--astro-code-token-function)',
34+
'#000010': 'var(--astro-code-token-string-expression)',
35+
'#000011': 'var(--astro-code-token-punctuation)',
36+
'#000012': 'var(--astro-code-token-link)',
37+
});
38+
return hl;
39+
});
2140
_resolvedHighlighters.set(key, highlighter);
2241

2342
return highlighter;

‎packages/astro/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -137,7 +137,7 @@
137137
"resolve": "^1.22.0",
138138
"rollup": "~2.77.0",
139139
"semver": "^7.3.7",
140-
"shiki": "^0.10.1",
140+
"shiki": "^0.11.1",
141141
"sirv": "^2.0.2",
142142
"slash": "^4.0.0",
143143
"string-width": "^5.1.2",

‎packages/integrations/mdx/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@
4040
"remark-frontmatter": "^4.0.1",
4141
"remark-gfm": "^3.0.1",
4242
"remark-smartypants": "^2.0.0",
43-
"shiki": "^0.10.1",
43+
"shiki": "^0.11.1",
4444
"unist-util-visit": "^4.1.0",
4545
"vfile": "^5.3.2"
4646
},

‎packages/integrations/mdx/src/remark-shiki.ts

+16-6
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,22 @@ const remarkShiki = async ({ langs = [], theme = 'github-dark', wrap = false }:
1414
const cacheID: string = typeof theme === 'string' ? theme : theme.name;
1515
let highlighterAsync = highlighterCacheAsync.get(cacheID);
1616
if (!highlighterAsync) {
17-
highlighterAsync = getHighlighter({ theme });
17+
highlighterAsync = getHighlighter({ theme }).then((hl) => {
18+
hl.setColorReplacements({
19+
'#000001': 'var(--astro-code-color-text)',
20+
'#000002': 'var(--astro-code-color-background)',
21+
'#000004': 'var(--astro-code-token-constant)',
22+
'#000005': 'var(--astro-code-token-string)',
23+
'#000006': 'var(--astro-code-token-comment)',
24+
'#000007': 'var(--astro-code-token-keyword)',
25+
'#000008': 'var(--astro-code-token-parameter)',
26+
'#000009': 'var(--astro-code-token-function)',
27+
'#000010': 'var(--astro-code-token-string-expression)',
28+
'#000011': 'var(--astro-code-token-punctuation)',
29+
'#000012': 'var(--astro-code-token-link)',
30+
});
31+
return hl;
32+
});
1833
highlighterCacheAsync.set(cacheID, highlighterAsync);
1934
}
2035
const highlighter = await highlighterAsync;
@@ -52,11 +67,6 @@ const remarkShiki = async ({ langs = [], theme = 'github-dark', wrap = false }:
5267

5368
// Replace "shiki" class naming with "astro".
5469
html = html.replace('<pre class="shiki"', `<pre class="astro-code"`);
55-
// Replace "shiki" css variable naming with "astro".
56-
html = html.replace(
57-
/style="(background-)?color: var\(--shiki-/g,
58-
'style="$1color: var(--astro-code-'
59-
);
6070
// Add "user-select: none;" for "+"/"-" diff symbols
6171
if (node.lang === 'diff') {
6272
html = html.replace(

‎packages/markdown/remark/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@
4040
"remark-parse": "^10.0.1",
4141
"remark-rehype": "^10.1.0",
4242
"remark-smartypants": "^2.0.0",
43-
"shiki": "^0.10.1",
43+
"shiki": "^0.11.1",
4444
"unified": "^10.1.2",
4545
"unist-util-map": "^3.1.1",
4646
"unist-util-visit": "^4.1.0",

‎packages/markdown/remark/src/remark-shiki.ts

+16-6
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,22 @@ const remarkShiki = async (
1717
const cacheID: string = typeof theme === 'string' ? theme : theme.name;
1818
let highlighterAsync = highlighterCacheAsync.get(cacheID);
1919
if (!highlighterAsync) {
20-
highlighterAsync = getHighlighter({ theme });
20+
highlighterAsync = getHighlighter({ theme }).then((hl) => {
21+
hl.setColorReplacements({
22+
'#000001': 'var(--astro-code-color-text)',
23+
'#000002': 'var(--astro-code-color-background)',
24+
'#000004': 'var(--astro-code-token-constant)',
25+
'#000005': 'var(--astro-code-token-string)',
26+
'#000006': 'var(--astro-code-token-comment)',
27+
'#000007': 'var(--astro-code-token-keyword)',
28+
'#000008': 'var(--astro-code-token-parameter)',
29+
'#000009': 'var(--astro-code-token-function)',
30+
'#000010': 'var(--astro-code-token-string-expression)',
31+
'#000011': 'var(--astro-code-token-punctuation)',
32+
'#000012': 'var(--astro-code-token-link)',
33+
});
34+
return hl;
35+
});
2136
highlighterCacheAsync.set(cacheID, highlighterAsync);
2237
}
2338
const highlighter = await highlighterAsync;
@@ -58,11 +73,6 @@ const remarkShiki = async (
5873
'<pre class="shiki"',
5974
`<pre is:raw class="astro-code${scopedClassName ? ' ' + scopedClassName : ''}"`
6075
);
61-
// Replace "shiki" css variable naming with "astro".
62-
html = html.replace(
63-
/style="(background-)?color: var\(--shiki-/g,
64-
'style="$1color: var(--astro-code-'
65-
);
6676
// Add "user-select: none;" for "+"/"-" diff symbols
6777
if (node.lang === 'diff') {
6878
html = html.replace(

‎pnpm-lock.yaml

+20-6
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)