diff --git a/.changeset/big-guests-cry.md b/.changeset/big-guests-cry.md
new file mode 100644
index 0000000000..4860fd51ce
--- /dev/null
+++ b/.changeset/big-guests-cry.md
@@ -0,0 +1,7 @@
+---
+'astro': patch
+'@astrojs/mdx': patch
+'@astrojs/markdown-remark': patch
+---
+
+Upgraded Shiki to v0.11.1
diff --git a/packages/astro/components/Code.astro b/packages/astro/components/Code.astro
index ddeaac829e..8a4d50c7f3 100644
--- a/packages/astro/components/Code.astro
+++ b/packages/astro/components/Code.astro
@@ -38,11 +38,6 @@ const { code, lang = 'plaintext', theme = 'github-dark', wrap = false } = Astro.
function repairShikiTheme(html: string): string {
// Replace "shiki" class naming with "astro"
html = html.replace('<pre class="shiki"', '<pre class="astro-code"');
- // Replace "shiki" css variable naming with "astro".
- html = html.replace(
- /style="(background-)?color: var\(--shiki-/g,
- 'style="$1color: var(--astro-code-'
- );
// Handle code wrapping
// if wrap=null, do nothing.
if (wrap === false) {
diff --git a/packages/astro/components/Shiki.js b/packages/astro/components/Shiki.js
index 2d0644653b..2adc71a0ef 100644
--- a/packages/astro/components/Shiki.js
+++ b/packages/astro/components/Shiki.js
@@ -8,6 +8,10 @@ function stringify(opts) {
return JSON.stringify(opts, Object.keys(opts).sort());
}
+/**
+ * @param {import('shiki').HighlighterOptions} opts
+ * @returns {Promise<import('shiki').Highlighter>}
+ */
export function getHighlighter(opts) {
const key = stringify(opts);
@@ -17,7 +21,22 @@ export function getHighlighter(opts) {
}
// Start the async getHighlighter call and cache the Promise
- const highlighter = getShikiHighlighter(opts);
+ const highlighter = getShikiHighlighter(opts).then((hl) => {
+ hl.setColorReplacements({
+ '#000001': 'var(--astro-code-color-text)',
+ '#000002': 'var(--astro-code-color-background)',
+ '#000004': 'var(--astro-code-token-constant)',
+ '#000005': 'var(--astro-code-token-string)',
+ '#000006': 'var(--astro-code-token-comment)',
+ '#000007': 'var(--astro-code-token-keyword)',
+ '#000008': 'var(--astro-code-token-parameter)',
+ '#000009': 'var(--astro-code-token-function)',
+ '#000010': 'var(--astro-code-token-string-expression)',
+ '#000011': 'var(--astro-code-token-punctuation)',
+ '#000012': 'var(--astro-code-token-link)',
+ });
+ return hl;
+ });
_resolvedHighlighters.set(key, highlighter);
return highlighter;
diff --git a/packages/astro/package.json b/packages/astro/package.json
index bdfb455a7a..91b76ffc4a 100644
--- a/packages/astro/package.json
+++ b/packages/astro/package.json
@@ -137,7 +137,7 @@
"resolve": "^1.22.0",
"rollup": "~2.77.0",
"semver": "^7.3.7",
- "shiki": "^0.10.1",
+ "shiki": "^0.11.1",
"sirv": "^2.0.2",
"slash": "^4.0.0",
"string-width": "^5.1.2",
diff --git a/packages/integrations/mdx/package.json b/packages/integrations/mdx/package.json
index e3a5f12a97..0df60afda6 100644
--- a/packages/integrations/mdx/package.json
+++ b/packages/integrations/mdx/package.json
@@ -40,7 +40,7 @@
"remark-frontmatter": "^4.0.1",
"remark-gfm": "^3.0.1",
"remark-smartypants": "^2.0.0",
- "shiki": "^0.10.1",
+ "shiki": "^0.11.1",
"unist-util-visit": "^4.1.0",
"vfile": "^5.3.2"
},
diff --git a/packages/integrations/mdx/src/remark-shiki.ts b/packages/integrations/mdx/src/remark-shiki.ts
index 76a1d275f3..7bb944ce61 100644
--- a/packages/integrations/mdx/src/remark-shiki.ts
+++ b/packages/integrations/mdx/src/remark-shiki.ts
@@ -14,7 +14,22 @@ const remarkShiki = async ({ langs = [], theme = 'github-dark', wrap = false }:
const cacheID: string = typeof theme === 'string' ? theme : theme.name;
let highlighterAsync = highlighterCacheAsync.get(cacheID);
if (!highlighterAsync) {
- highlighterAsync = getHighlighter({ theme });
+ highlighterAsync = getHighlighter({ theme }).then((hl) => {
+ hl.setColorReplacements({
+ '#000001': 'var(--astro-code-color-text)',
+ '#000002': 'var(--astro-code-color-background)',
+ '#000004': 'var(--astro-code-token-constant)',
+ '#000005': 'var(--astro-code-token-string)',
+ '#000006': 'var(--astro-code-token-comment)',
+ '#000007': 'var(--astro-code-token-keyword)',
+ '#000008': 'var(--astro-code-token-parameter)',
+ '#000009': 'var(--astro-code-token-function)',
+ '#000010': 'var(--astro-code-token-string-expression)',
+ '#000011': 'var(--astro-code-token-punctuation)',
+ '#000012': 'var(--astro-code-token-link)',
+ });
+ return hl;
+ });
highlighterCacheAsync.set(cacheID, highlighterAsync);
}
const highlighter = await highlighterAsync;
@@ -52,11 +67,6 @@ const remarkShiki = async ({ langs = [], theme = 'github-dark', wrap = false }:
// Replace "shiki" class naming with "astro".
html = html.replace('<pre class="shiki"', `<pre class="astro-code"`);
- // Replace "shiki" css variable naming with "astro".
- html = html.replace(
- /style="(background-)?color: var\(--shiki-/g,
- 'style="$1color: var(--astro-code-'
- );
// Add "user-select: none;" for "+"/"-" diff symbols
if (node.lang === 'diff') {
html = html.replace(
diff --git a/packages/markdown/remark/package.json b/packages/markdown/remark/package.json
index c2d24748b5..952c032527 100644
--- a/packages/markdown/remark/package.json
+++ b/packages/markdown/remark/package.json
@@ -40,7 +40,7 @@
"remark-parse": "^10.0.1",
"remark-rehype": "^10.1.0",
"remark-smartypants": "^2.0.0",
- "shiki": "^0.10.1",
+ "shiki": "^0.11.1",
"unified": "^10.1.2",
"unist-util-map": "^3.1.1",
"unist-util-visit": "^4.1.0",
diff --git a/packages/markdown/remark/src/remark-shiki.ts b/packages/markdown/remark/src/remark-shiki.ts
index eea0fd006f..85463bd651 100644
--- a/packages/markdown/remark/src/remark-shiki.ts
+++ b/packages/markdown/remark/src/remark-shiki.ts
@@ -17,7 +17,22 @@ const remarkShiki = async (
const cacheID: string = typeof theme === 'string' ? theme : theme.name;
let highlighterAsync = highlighterCacheAsync.get(cacheID);
if (!highlighterAsync) {
- highlighterAsync = getHighlighter({ theme });
+ highlighterAsync = getHighlighter({ theme }).then((hl) => {
+ hl.setColorReplacements({
+ '#000001': 'var(--astro-code-color-text)',
+ '#000002': 'var(--astro-code-color-background)',
+ '#000004': 'var(--astro-code-token-constant)',
+ '#000005': 'var(--astro-code-token-string)',
+ '#000006': 'var(--astro-code-token-comment)',
+ '#000007': 'var(--astro-code-token-keyword)',
+ '#000008': 'var(--astro-code-token-parameter)',
+ '#000009': 'var(--astro-code-token-function)',
+ '#000010': 'var(--astro-code-token-string-expression)',
+ '#000011': 'var(--astro-code-token-punctuation)',
+ '#000012': 'var(--astro-code-token-link)',
+ });
+ return hl;
+ });
highlighterCacheAsync.set(cacheID, highlighterAsync);
}
const highlighter = await highlighterAsync;
@@ -58,11 +73,6 @@ const remarkShiki = async (
'<pre class="shiki"',
`<pre is:raw class="astro-code${scopedClassName ? ' ' + scopedClassName : ''}"`
);
- // Replace "shiki" css variable naming with "astro".
- html = html.replace(
- /style="(background-)?color: var\(--shiki-/g,
- 'style="$1color: var(--astro-code-'
- );
// Add "user-select: none;" for "+"/"-" diff symbols
if (node.lang === 'diff') {
html = html.replace(
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 4abf912150..b900a66126 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -452,7 +452,7 @@ importers:
rollup: ~2.77.0
sass: ^1.52.2
semver: ^7.3.7
- shiki: ^0.10.1
+ shiki: ^0.11.1
sirv: ^2.0.2
slash: ^4.0.0
srcset-parse: ^1.1.0
@@ -509,7 +509,7 @@ importers:
resolve: 1.22.1
rollup: 2.77.3
semver: 7.3.7
- shiki: 0.10.1
+ shiki: 0.11.1
sirv: 2.0.2
slash: 4.0.0
string-width: 5.1.2
@@ -2319,7 +2319,7 @@ importers:
remark-shiki-twoslash: ^3.1.0
remark-smartypants: ^2.0.0
remark-toc: ^8.0.1
- shiki: ^0.10.1
+ shiki: ^0.11.1
unist-util-visit: ^4.1.0
vfile: ^5.3.2
dependencies:
@@ -2334,7 +2334,7 @@ importers:
remark-frontmatter: 4.0.1
remark-gfm: 3.0.1
remark-smartypants: 2.0.0
- shiki: 0.10.1
+ shiki: 0.11.1
unist-util-visit: 4.1.1
vfile: 5.3.4
devDependencies:
@@ -2786,7 +2786,7 @@ importers:
remark-parse: ^10.0.1
remark-rehype: ^10.1.0
remark-smartypants: ^2.0.0
- shiki: ^0.10.1
+ shiki: ^0.11.1
unified: ^10.1.2
unist-util-map: ^3.1.1
unist-util-visit: ^4.1.0
@@ -2808,7 +2808,7 @@ importers:
remark-parse: 10.0.1
remark-rehype: 10.1.0
remark-smartypants: 2.0.0
- shiki: 0.10.1
+ shiki: 0.11.1
unified: 10.1.2
unist-util-map: 3.1.1
unist-util-visit: 4.1.1
@@ -15512,6 +15512,15 @@ packages:
jsonc-parser: 3.1.0
vscode-oniguruma: 1.6.2
vscode-textmate: 5.2.0
+ dev: true
+
+ /shiki/0.11.1:
+ resolution: {integrity: sha512-EugY9VASFuDqOexOgXR18ZV+TbFrQHeCpEYaXamO+SZlsnT/2LxuLBX25GGtIrwaEVFXUAbUQ601SWE2rMwWHA==}
+ dependencies:
+ jsonc-parser: 3.1.0
+ vscode-oniguruma: 1.6.2
+ vscode-textmate: 6.0.0
+ dev: false
/side-channel/1.0.4:
resolution: {integrity: sha512-q5XPytqFEIKHkGdiMIrY10mvLRvnQh42/+GoBlFW3b2LXLE2xxJpZFdm94we0BaoV3RwJyGqg5wS7epxTv0Zvw==}
@@ -16946,6 +16955,11 @@ packages:
/vscode-textmate/5.2.0:
resolution: {integrity: sha512-Uw5ooOQxRASHgu6C7GVvUxisKXfSgW4oFlO+aa+PAkgmH89O3CXxEEzNRNtHSqtXFTl0nAC1uYj0GMSH27uwtQ==}
+ dev: true
+
+ /vscode-textmate/6.0.0:
+ resolution: {integrity: sha512-gu73tuZfJgu+mvCSy4UZwd2JXykjK9zAZsfmDeut5dx/1a7FeTk0XwJsSuqQn+cuMCGVbIBfl+s53X4T19DnzQ==}
+ dev: false
/vscode-uri/2.1.2:
resolution: {integrity: sha512-8TEXQxlldWAuIODdukIb+TR5s+9Ds40eSJrw+1iDDA9IFORPjMELarNQE3myz5XIkWWpdprmJjm1/SxMlWOC8A==}