michael/astro
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Upgrade shiki to v0.14.1 (#6932)

Browse source 
* Upgrade shiki

* Update themes

* Update languages

* Simplify

* Fix compat for other remark code

* Update theme again

* Fix language gen

* Add changeset

* Fix code

* Update test theme colors

* Update changeset

* Fix test again
This commit is contained in:
Bjorn Lu 2023-05-03 23:07:57 +08:00 committed by GitHub
parent 297a1dae51
commit 49514e4ce4
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
18 changed files with 356 additions and 2117 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
.changeset/smooth-cows-jog.md Normal file
View file

@ -0,0 +1,8 @@
---
'@astrojs/markdoc': patch
'@astrojs/mdx': patch
'@astrojs/markdown-remark': minor
'astro': minor
---
Upgrade shiki to v0.14.1. This updates the shiki theme colors and adds the theme name to the `pre` tag, e.g. `<pre class="astro-code github-dark">`.

2188
packages/astro/components/shiki-languages.js
View file

File diff suppressed because it is too large Load diff

72
packages/astro/components/shiki-themes.js
View file

@ -1,33 +1,43 @@
/**
* This file is prebuilt from packages/astro/scripts/shiki-gen-themes.mjs
* Do not edit this directly, but instead edit that file and rerun it to generate this file.
*/
// prettier-ignore
export const themes = { export const themes = {
'css-variables': () => import('shiki/themes/css-variables.json').then((mod) => mod.default), 'css-variables': () => import('shiki/themes/css-variables.json').then(mod => mod.default),
'dark-plus': () => import('shiki/themes/dark-plus.json').then((mod) => mod.default), 'dark-plus': () => import('shiki/themes/dark-plus.json').then(mod => mod.default),
'dracula-soft': () => import('shiki/themes/dracula-soft.json').then((mod) => mod.default), 'dracula-soft': () => import('shiki/themes/dracula-soft.json').then(mod => mod.default),
dracula: () => import('shiki/themes/dracula.json').then((mod) => mod.default), 'dracula': () => import('shiki/themes/dracula.json').then(mod => mod.default),
'github-dark-dimmed': () => 'github-dark-dimmed': () => import('shiki/themes/github-dark-dimmed.json').then(mod => mod.default),
import('shiki/themes/github-dark-dimmed.json').then((mod) => mod.default), 'github-dark': () => import('shiki/themes/github-dark.json').then(mod => mod.default),
'github-dark': () => import('shiki/themes/github-dark.json').then((mod) => mod.default), 'github-light': () => import('shiki/themes/github-light.json').then(mod => mod.default),
'github-light': () => import('shiki/themes/github-light.json').then((mod) => mod.default), 'hc_light': () => import('shiki/themes/hc_light.json').then(mod => mod.default),
hc_light: () => import('shiki/themes/hc_light.json').then((mod) => mod.default), 'light-plus': () => import('shiki/themes/light-plus.json').then(mod => mod.default),
'light-plus': () => import('shiki/themes/light-plus.json').then((mod) => mod.default), 'material-theme-darker': () => import('shiki/themes/material-theme-darker.json').then(mod => mod.default),
'material-darker': () => import('shiki/themes/material-darker.json').then((mod) => mod.default), 'material-theme-lighter': () => import('shiki/themes/material-theme-lighter.json').then(mod => mod.default),
'material-default': () => import('shiki/themes/material-default.json').then((mod) => mod.default), 'material-theme-ocean': () => import('shiki/themes/material-theme-ocean.json').then(mod => mod.default),
'material-lighter': () => import('shiki/themes/material-lighter.json').then((mod) => mod.default), 'material-theme-palenight': () => import('shiki/themes/material-theme-palenight.json').then(mod => mod.default),
'material-ocean': () => import('shiki/themes/material-ocean.json').then((mod) => mod.default), 'material-theme': () => import('shiki/themes/material-theme.json').then(mod => mod.default),
'material-palenight': () => 'min-dark': () => import('shiki/themes/min-dark.json').then(mod => mod.default),
import('shiki/themes/material-palenight.json').then((mod) => mod.default), 'min-light': () => import('shiki/themes/min-light.json').then(mod => mod.default),
'min-dark': () => import('shiki/themes/min-dark.json').then((mod) => mod.default), 'monokai': () => import('shiki/themes/monokai.json').then(mod => mod.default),
'min-light': () => import('shiki/themes/min-light.json').then((mod) => mod.default), 'nord': () => import('shiki/themes/nord.json').then(mod => mod.default),
monokai: () => import('shiki/themes/monokai.json').then((mod) => mod.default), 'one-dark-pro': () => import('shiki/themes/one-dark-pro.json').then(mod => mod.default),
nord: () => import('shiki/themes/nord.json').then((mod) => mod.default), 'poimandres': () => import('shiki/themes/poimandres.json').then(mod => mod.default),
'one-dark-pro': () => import('shiki/themes/one-dark-pro.json').then((mod) => mod.default), 'rose-pine-dawn': () => import('shiki/themes/rose-pine-dawn.json').then(mod => mod.default),
poimandres: () => import('shiki/themes/poimandres.json').then((mod) => mod.default), 'rose-pine-moon': () => import('shiki/themes/rose-pine-moon.json').then(mod => mod.default),
'rose-pine-dawn': () => import('shiki/themes/rose-pine-dawn.json').then((mod) => mod.default), 'rose-pine': () => import('shiki/themes/rose-pine.json').then(mod => mod.default),
'rose-pine-moon': () => import('shiki/themes/rose-pine-moon.json').then((mod) => mod.default), 'slack-dark': () => import('shiki/themes/slack-dark.json').then(mod => mod.default),
'rose-pine': () => import('shiki/themes/rose-pine.json').then((mod) => mod.default), 'slack-ochin': () => import('shiki/themes/slack-ochin.json').then(mod => mod.default),
'slack-dark': () => import('shiki/themes/slack-dark.json').then((mod) => mod.default), 'solarized-dark': () => import('shiki/themes/solarized-dark.json').then(mod => mod.default),
'slack-ochin': () => import('shiki/themes/slack-ochin.json').then((mod) => mod.default), 'solarized-light': () => import('shiki/themes/solarized-light.json').then(mod => mod.default),
'solarized-dark': () => import('shiki/themes/solarized-dark.json').then((mod) => mod.default), 'vitesse-dark': () => import('shiki/themes/vitesse-dark.json').then(mod => mod.default),
'solarized-light': () => import('shiki/themes/solarized-light.json').then((mod) => mod.default), 'vitesse-light': () => import('shiki/themes/vitesse-light.json').then(mod => mod.default),
'vitesse-dark': () => import('shiki/themes/vitesse-dark.json').then((mod) => mod.default), // old theme names for compat
'vitesse-light': () => import('shiki/themes/vitesse-light.json').then((mod) => mod.default), 'material-darker': () => import('shiki/themes/material-theme-darker').then(mod => mod.default),
'material-default': () => import('shiki/themes/material-theme').then(mod => mod.default),
'material-lighter': () => import('shiki/themes/material-theme-lighter').then(mod => mod.default),
'material-ocean': () => import('shiki/themes/material-theme-ocean').then(mod => mod.default),
'material-palenight': () => import('shiki/themes/material-theme-palenight').then(mod => mod.default),
}; };

2
packages/astro/package.json
View file

@ -146,7 +146,7 @@
"rehype": "^12.0.1", "rehype": "^12.0.1",
"semver": "^7.3.8", "semver": "^7.3.8",
"server-destroy": "^1.0.1", "server-destroy": "^1.0.1",
"shiki": "^0.11.1", "shiki": "^0.14.1",
"slash": "^4.0.0", "slash": "^4.0.0",
"string-width": "^5.1.2", "string-width": "^5.1.2",
"strip-ansi": "^7.0.1", "strip-ansi": "^7.0.1",

35
packages/astro/scripts/shiki-gen-languages.mjs
View file

@ -4,31 +4,34 @@ const dir = await fs.promises.readdir('packages/astro/node_modules/shiki/languag
const langImports = dir.map((f) => { const langImports = dir.map((f) => {
const key = f.slice(0, f.indexOf('.tmLanguage.json')); const key = f.slice(0, f.indexOf('.tmLanguage.json'));
return [ return [key, `import('shiki/languages/${f}').then((mod) => handleLang(mod.default, '${key}'))`];
key, });
`import('shiki/languages/${f}').then(mod => mod.default).then(grammar => {
const lang = BUNDLED_LANGUAGES.find(l => l.id === '${key}'); let code = `\
if(lang) { /**
* This file is prebuilt from packages/astro/scripts/shiki-gen-languages.mjs
* Do not edit this directly, but instead edit that file and rerun it to generate this file.
*/
import { BUNDLED_LANGUAGES } from 'shiki';
function handleLang(grammar, language) {
const lang = BUNDLED_LANGUAGES.find((l) => l.id === language);
if (lang) {
return { return {
...lang, ...lang,
grammar grammar,
}; };
} else { } else {
return undefined; return undefined;
} }
})`, }
];
});
let code = `import { BUNDLED_LANGUAGES } from 'shiki';
// prettier-ignore
export const languages = {`; export const languages = {`;
let i = 0;
for (const [key, imp] of langImports) { for (const [key, imp] of langImports) {
if (i > 0) { code += `\n\t'${key}': () => ${imp},`;
code += ',';
}
code += `\n\t'${key}': () => ${imp}`;
i++;
} }
code += '\n};'; code += '\n};';

34
packages/astro/scripts/shiki-gen-themes.mjs
View file

@ -2,18 +2,36 @@ import fs from 'fs';
const dir = await fs.promises.readdir('packages/astro/node_modules/shiki/themes/'); const dir = await fs.promises.readdir('packages/astro/node_modules/shiki/themes/');
const toThemeImport = (theme) => `import('shiki/themes/${theme}').then(mod => mod.default)`;
const themeImports = dir.map((f) => { const themeImports = dir.map((f) => {
return [f.slice(0, f.indexOf('.json')), `import('shiki/themes/${f}').then(mod => mod.default)`]; return [f.slice(0, f.indexOf('.json')), toThemeImport(f)];
}); });
let code = `export const themes = {`; // Map of old theme names to new names to preserve compatibility when we upgrade shiki
let i = 0; const compatThemes = {
'material-darker': 'material-theme-darker',
'material-default': 'material-theme',
'material-lighter': 'material-theme-lighter',
'material-ocean': 'material-theme-ocean',
'material-palenight': 'material-theme-palenight',
};
let code = `\
/**
* This file is prebuilt from packages/astro/scripts/shiki-gen-themes.mjs
* Do not edit this directly, but instead edit that file and rerun it to generate this file.
*/
// prettier-ignore
export const themes = {`;
for (const [key, imp] of themeImports) { for (const [key, imp] of themeImports) {
if (i > 0) { code += `\n\t'${key}': () => ${imp},`;
code += ','; }
} code += `\n\t// old theme names for compat`;
code += `\n\t'${key}': () => ${imp}`; for (const oldName in compatThemes) {
i++; code += `\n\t'${oldName}': () => ${toThemeImport(compatThemes[oldName])},`;
} }
code += '\n};'; code += '\n};';

14
packages/astro/test/astro-component-code.test.js
View file

@ -15,7 +15,7 @@ describe('<Code>', () => {
const $ = cheerio.load(html); const $ = cheerio.load(html);
expect($('pre')).to.have.lengthOf(1); expect($('pre')).to.have.lengthOf(1);
expect($('pre').attr('style')).to.equal( expect($('pre').attr('style')).to.equal(
'background-color: #0d1117; overflow-x: auto;', 'background-color: #24292e; overflow-x: auto;',
'applies default and overflow' 'applies default and overflow'
); );
expect($('pre > code')).to.have.lengthOf(1); expect($('pre > code')).to.have.lengthOf(1);
@ -28,7 +28,7 @@ describe('<Code>', () => {
let html = await fixture.readFile('/basic/index.html'); let html = await fixture.readFile('/basic/index.html');
const $ = cheerio.load(html); const $ = cheerio.load(html);
expect($('pre')).to.have.lengthOf(1); expect($('pre')).to.have.lengthOf(1);
expect($('pre').attr('class'), 'astro-code'); expect($('pre').attr('class'), 'astro-code nord');
expect($('pre > code')).to.have.lengthOf(1); expect($('pre > code')).to.have.lengthOf(1);
// test: contains many generated spans // test: contains many generated spans
expect($('pre > code span').length).to.be.greaterThanOrEqual(6); expect($('pre > code span').length).to.be.greaterThanOrEqual(6);
@ -38,7 +38,7 @@ describe('<Code>', () => {
let html = await fixture.readFile('/custom-theme/index.html'); let html = await fixture.readFile('/custom-theme/index.html');
const $ = cheerio.load(html); const $ = cheerio.load(html);
expect($('pre')).to.have.lengthOf(1); expect($('pre')).to.have.lengthOf(1);
expect($('pre').attr('class')).to.equal('astro-code'); expect($('pre').attr('class')).to.equal('astro-code nord');
expect($('pre').attr('style')).to.equal( expect($('pre').attr('style')).to.equal(
'background-color: #2e3440ff; overflow-x: auto;', 'background-color: #2e3440ff; overflow-x: auto;',
'applies custom theme' 'applies custom theme'
@ -52,7 +52,7 @@ describe('<Code>', () => {
expect($('pre')).to.have.lengthOf(1); expect($('pre')).to.have.lengthOf(1);
// test: applies wrap overflow // test: applies wrap overflow
expect($('pre').attr('style')).to.equal( expect($('pre').attr('style')).to.equal(
'background-color: #0d1117; overflow-x: auto; white-space: pre-wrap; word-wrap: break-word;' 'background-color: #24292e; overflow-x: auto; white-space: pre-wrap; word-wrap: break-word;'
); );
} }
{ {
@ -60,14 +60,14 @@ describe('<Code>', () => {
const $ = cheerio.load(html); const $ = cheerio.load(html);
expect($('pre')).to.have.lengthOf(1); expect($('pre')).to.have.lengthOf(1);
// test: applies wrap overflow // test: applies wrap overflow
expect($('pre').attr('style')).to.equal('background-color: #0d1117; overflow-x: auto;'); expect($('pre').attr('style')).to.equal('background-color: #24292e; overflow-x: auto;');
} }
{ {
let html = await fixture.readFile('/wrap-null/index.html'); let html = await fixture.readFile('/wrap-null/index.html');
const $ = cheerio.load(html); const $ = cheerio.load(html);
expect($('pre')).to.have.lengthOf(1); expect($('pre')).to.have.lengthOf(1);
// test: applies wrap overflow // test: applies wrap overflow
expect($('pre').attr('style')).to.equal('background-color: #0d1117'); expect($('pre').attr('style')).to.equal('background-color: #24292e');
} }
}); });
@ -75,7 +75,7 @@ describe('<Code>', () => {
let html = await fixture.readFile('/css-theme/index.html'); let html = await fixture.readFile('/css-theme/index.html');
const $ = cheerio.load(html); const $ = cheerio.load(html);
expect($('pre')).to.have.lengthOf(1); expect($('pre')).to.have.lengthOf(1);
expect($('pre').attr('class')).to.equal('astro-code'); expect($('pre').attr('class')).to.equal('astro-code css-variables');
expect( expect(
$('pre, pre span') $('pre, pre span')
.map((i, f) => (f.attribs ? f.attribs.style : 'no style found')) .map((i, f) => (f.attribs ? f.attribs.style : 'no style found'))

18
packages/astro/test/astro-markdown-shiki.test.js
View file

@ -20,7 +20,7 @@ describe('Astro Markdown Shiki', () => {
expect($('pre')).to.have.lengthOf(2); expect($('pre')).to.have.lengthOf(2);
expect($('pre').hasClass('astro-code')).to.equal(true); expect($('pre').hasClass('astro-code')).to.equal(true);
expect($('pre').attr().style).to.equal('background-color: #0d1117; overflow-x: auto;'); expect($('pre').attr().style).to.equal('background-color: #24292e; overflow-x: auto;');
}); });
it('Can render diff syntax with "user-select: none"', async () => { it('Can render diff syntax with "user-select: none"', async () => {
@ -47,7 +47,7 @@ describe('Astro Markdown Shiki', () => {
expect($('pre')).to.have.lengthOf(1); expect($('pre')).to.have.lengthOf(1);
expect($('pre').hasClass('astro-code')).to.equal(true); expect($('pre').hasClass('astro-code')).to.equal(true);
expect($('pre').attr().style).to.equal('background-color: #ffffff; overflow-x: auto;'); expect($('pre').attr().style).to.equal('background-color: #fff; overflow-x: auto;');
}); });
}); });
@ -84,13 +84,13 @@ describe('Astro Markdown Shiki', () => {
const segments = $('.line').get(6).children; const segments = $('.line').get(6).children;
expect(segments).to.have.lengthOf(3); expect(segments).to.have.lengthOf(3);
expect(segments[0].attribs.style).to.be.equal('color: #C9D1D9'); expect(segments[0].attribs.style).to.be.equal('color: #E1E4E8');
expect(segments[1].attribs.style).to.be.equal('color: #79C0FF'); expect(segments[1].attribs.style).to.be.equal('color: #79B8FF');
expect(segments[2].attribs.style).to.be.equal('color: #C9D1D9'); expect(segments[2].attribs.style).to.be.equal('color: #E1E4E8');
const unknownLang = $('.line').last().html(); const unknownLang = $('.line').last().html();
expect(unknownLang).to.be.equal( expect(unknownLang).to.be.equal(
'<span style="color: #c9d1d9">This language does not exist</span>' '<span style="color: #e1e4e8">This language does not exist</span>'
); );
}); });
}); });
@ -98,7 +98,7 @@ describe('Astro Markdown Shiki', () => {
describe('Wrap', () => { describe('Wrap', () => {
describe('wrap = true', () => { describe('wrap = true', () => {
const style = const style =
'background-color: #0d1117; overflow-x: auto; white-space: pre-wrap; word-wrap: break-word;'; 'background-color: #24292e; overflow-x: auto; white-space: pre-wrap; word-wrap: break-word;';
let fixture; let fixture;
before(async () => { before(async () => {
@ -117,7 +117,7 @@ describe('Astro Markdown Shiki', () => {
}); });
describe('wrap = false', () => { describe('wrap = false', () => {
const style = 'background-color: #0d1117; overflow-x: auto;'; const style = 'background-color: #24292e; overflow-x: auto;';
let fixture; let fixture;
before(async () => { before(async () => {
@ -135,7 +135,7 @@ describe('Astro Markdown Shiki', () => {
}); });
describe('wrap = null', () => { describe('wrap = null', () => {
const style = 'background-color: #0d1117'; const style = 'background-color: #24292e';
let fixture; let fixture;
before(async () => { before(async () => {

2
packages/integrations/markdoc/test/fixtures/render-with-components/package.json vendored
View file

@ -7,6 +7,6 @@
"astro": "workspace:*" "astro": "workspace:*"
}, },
"devDependencies": { "devDependencies": {
"shiki": "^0.11.1" "shiki": "^0.14.1"
} }
} }

2
packages/integrations/markdoc/test/render.test.js
View file

@ -122,7 +122,7 @@ function renderComponentsChecks(html) {
// Renders Astro Code component // Renders Astro Code component
const pre = document.querySelector('pre'); const pre = document.querySelector('pre');
expect(pre).to.not.be.null; expect(pre).to.not.be.null;
expect(pre.className).to.equal('astro-code'); expect(pre.className).to.equal('astro-code github-dark');
} }
/** @param {string} html */ /** @param {string} html */

2
packages/integrations/mdx/package.json
View file

@ -44,7 +44,7 @@
"remark-frontmatter": "^4.0.1", "remark-frontmatter": "^4.0.1",
"remark-gfm": "^3.0.1", "remark-gfm": "^3.0.1",
"remark-smartypants": "^2.0.0", "remark-smartypants": "^2.0.0",
"shiki": "^0.11.1", "shiki": "^0.14.1",
"source-map": "^0.7.4", "source-map": "^0.7.4",
"unist-util-visit": "^4.1.0", "unist-util-visit": "^4.1.0",
"vfile": "^5.3.2" "vfile": "^5.3.2"

20
packages/integrations/mdx/src/remark-shiki.ts
View file

@ -10,7 +10,27 @@ import { visit } from 'unist-util-visit';
*/ */
const highlighterCacheAsync = new Map<string, Promise<shiki.Highlighter>>(); const highlighterCacheAsync = new Map<string, Promise<shiki.Highlighter>>();
// Map of old theme names to new names to preserve compatibility when we upgrade shiki
const compatThemes: Record<string, string> = {
'material-darker': 'material-theme-darker',
'material-default': 'material-theme',
'material-lighter': 'material-theme-lighter',
'material-ocean': 'material-theme-ocean',
'material-palenight': 'material-theme-palenight',
};
const normalizeTheme = (theme: string | shiki.IShikiTheme) => {
if (typeof theme === 'string') {
return compatThemes[theme] || theme;
} else if (compatThemes[theme.name]) {
return { ...theme, name: compatThemes[theme.name] };
} else {
return theme;
}
};
const remarkShiki = async ({ langs = [], theme = 'github-dark', wrap = false }: ShikiConfig) => { const remarkShiki = async ({ langs = [], theme = 'github-dark', wrap = false }: ShikiConfig) => {
theme = normalizeTheme(theme);
const cacheID: string = typeof theme === 'string' ? theme : theme.name; const cacheID: string = typeof theme === 'string' ? theme : theme.name;
let highlighterAsync = highlighterCacheAsync.get(cacheID); let highlighterAsync = highlighterCacheAsync.get(cacheID);
if (!highlighterAsync) { if (!highlighterAsync) {

2
packages/integrations/mdx/test/mdx-syntax-highlighting.test.js
View file

@ -25,7 +25,7 @@ describe('MDX syntax highlighting', () => {
const shikiCodeBlock = document.querySelector('pre.astro-code'); const shikiCodeBlock = document.querySelector('pre.astro-code');
expect(shikiCodeBlock).to.not.be.null; expect(shikiCodeBlock).to.not.be.null;
expect(shikiCodeBlock.getAttribute('style')).to.contain('background-color:#0d1117'); expect(shikiCodeBlock.getAttribute('style')).to.contain('background-color:#24292e');
}); });
it('respects markdown.shikiConfig.theme', async () => { it('respects markdown.shikiConfig.theme', async () => {

14
packages/markdown/component/test/astro-markdown-shiki.test.js
View file

@ -41,7 +41,7 @@ describe('Astro Markdown Shiki', () => {
expect($('pre')).to.have.lengthOf(1); expect($('pre')).to.have.lengthOf(1);
expect($('pre').hasClass('astro-code')).to.equal(true); expect($('pre').hasClass('astro-code')).to.equal(true);
expect($('pre').attr().style).to.equal('background-color: #ffffff; overflow-x: auto;'); expect($('pre').attr().style).to.equal('background-color: #fff; overflow-x: auto;');
}); });
}); });
@ -78,12 +78,12 @@ describe('Astro Markdown Shiki', () => {
const segments = $('.line').get(6).children; const segments = $('.line').get(6).children;
expect(segments).to.have.lengthOf(3); expect(segments).to.have.lengthOf(3);
expect(segments[0].attribs.style).to.be.equal('color: #C9D1D9'); expect(segments[0].attribs.style).to.be.equal('color: #E1E4E8');
expect(segments[1].attribs.style).to.be.equal('color: #79C0FF'); expect(segments[1].attribs.style).to.be.equal('color: #79B8FF');
const unknownLang = $('.line').last().html(); const unknownLang = $('.line').last().html();
expect(unknownLang).to.be.equal( expect(unknownLang).to.be.equal(
'<span style="color: #c9d1d9">This language does not exist</span>' '<span style="color: #e1e4e8">This language does not exist</span>'
); );
}); });
}); });
@ -91,7 +91,7 @@ describe('Astro Markdown Shiki', () => {
describe('Wrap', () => { describe('Wrap', () => {
describe('wrap = true', () => { describe('wrap = true', () => {
const style = const style =
'background-color: #0d1117; overflow-x: auto; white-space: pre-wrap; word-wrap: break-word;'; 'background-color: #24292e; overflow-x: auto; white-space: pre-wrap; word-wrap: break-word;';
let fixture; let fixture;
before(async () => { before(async () => {
@ -110,7 +110,7 @@ describe('Astro Markdown Shiki', () => {
}); });
describe('wrap = false', () => { describe('wrap = false', () => {
const style = 'background-color: #0d1117; overflow-x: auto;'; const style = 'background-color: #24292e; overflow-x: auto;';
let fixture; let fixture;
before(async () => { before(async () => {
@ -128,7 +128,7 @@ describe('Astro Markdown Shiki', () => {
}); });
describe('wrap = null', () => { describe('wrap = null', () => {
const style = 'background-color: #0d1117'; const style = 'background-color: #24292e';
let fixture; let fixture;
before(async () => { before(async () => {

2
packages/markdown/component/test/astro-markdown.test.js
View file

@ -119,7 +119,7 @@ describe('Astro Markdown', () => {
// test 1: the "pre" tag receives scoped style // test 1: the "pre" tag receives scoped style
const preClassList = $('pre').attr('class').split(/\s+/); const preClassList = $('pre').attr('class').split(/\s+/);
expect(preClassList.length).to.equal(2); expect(preClassList.length).to.equal(3);
const preAstroClass = preClassList.find(isAstroScopedClass); const preAstroClass = preClassList.find(isAstroScopedClass);
expect(Boolean(preAstroClass)).to.equal(true); expect(Boolean(preAstroClass)).to.equal(true);

2
packages/markdown/remark/package.json
View file

@ -37,7 +37,7 @@
"remark-parse": "^10.0.1", "remark-parse": "^10.0.1",
"remark-rehype": "^10.1.0", "remark-rehype": "^10.1.0",
"remark-smartypants": "^2.0.0", "remark-smartypants": "^2.0.0",
"shiki": "^0.11.1", "shiki": "^0.14.1",
"unified": "^10.1.2", "unified": "^10.1.2",
"unist-util-visit": "^4.1.0", "unist-util-visit": "^4.1.0",
"vfile": "^5.3.2" "vfile": "^5.3.2"

20
packages/markdown/remark/src/remark-shiki.ts
View file

@ -10,10 +10,30 @@ import type { ShikiConfig } from './types.js';
*/ */
const highlighterCacheAsync = new Map<string, Promise<shiki.Highlighter>>(); const highlighterCacheAsync = new Map<string, Promise<shiki.Highlighter>>();
// Map of old theme names to new names to preserve compatibility when we upgrade shiki
const compatThemes: Record<string, string> = {
'material-darker': 'material-theme-darker',
'material-default': 'material-theme',
'material-lighter': 'material-theme-lighter',
'material-ocean': 'material-theme-ocean',
'material-palenight': 'material-theme-palenight',
};
const normalizeTheme = (theme: string | shiki.IShikiTheme) => {
if (typeof theme === 'string') {
return compatThemes[theme] || theme;
} else if (compatThemes[theme.name]) {
return { ...theme, name: compatThemes[theme.name] };
} else {
return theme;
}
};
const remarkShiki = async ( const remarkShiki = async (
{ langs = [], theme = 'github-dark', wrap = false }: ShikiConfig, { langs = [], theme = 'github-dark', wrap = false }: ShikiConfig,
scopedClassName?: string | null scopedClassName?: string | null
) => { ) => {
theme = normalizeTheme(theme);
const cacheID: string = typeof theme === 'string' ? theme : theme.name; const cacheID: string = typeof theme === 'string' ? theme : theme.name;
let highlighterAsync = highlighterCacheAsync.get(cacheID); let highlighterAsync = highlighterCacheAsync.get(cacheID);
if (!highlighterAsync) { if (!highlighterAsync) {

36
pnpm-lock.yaml
View file

@ -649,8 +649,8 @@ importers:
specifier: ^1.0.1 specifier: ^1.0.1
version: 1.0.1 version: 1.0.1
shiki: shiki:
specifier: ^0.11.1 specifier: ^0.14.1
version: 0.11.1 version: 0.14.1
slash: slash:
specifier: ^4.0.0 specifier: ^4.0.0
version: 4.0.0 version: 4.0.0
@ -3919,8 +3919,8 @@ importers:
version: link:../../../../../astro version: link:../../../../../astro
devDependencies: devDependencies:
shiki: shiki:
specifier: ^0.11.1 specifier: ^0.14.1
version: 0.11.1 version: 0.14.1
packages/integrations/markdoc/test/fixtures/render-with-config: packages/integrations/markdoc/test/fixtures/render-with-config:
dependencies: dependencies:
@ -3976,8 +3976,8 @@ importers:
specifier: ^2.0.0 specifier: ^2.0.0
version: 2.0.0 version: 2.0.0
shiki: shiki:
specifier: ^0.11.1 specifier: ^0.14.1
version: 0.11.1 version: 0.14.1
source-map: source-map:
specifier: ^0.7.4 specifier: ^0.7.4
version: 0.7.4 version: 0.7.4
@ -4038,7 +4038,7 @@ importers:
version: 4.0.2 version: 4.0.2
rehype-pretty-code: rehype-pretty-code:
specifier: ^0.4.0 specifier: ^0.4.0
version: 0.4.0(shiki@0.11.1) version: 0.4.0(shiki@0.14.1)
remark-math: remark-math:
specifier: ^5.1.1 specifier: ^5.1.1
version: 5.1.1 version: 5.1.1
@ -4899,8 +4899,8 @@ importers:
specifier: ^2.0.0 specifier: ^2.0.0
version: 2.0.0 version: 2.0.0
shiki: shiki:
specifier: ^0.11.1 specifier: ^0.14.1
version: 0.11.1 version: 0.14.1
unified: unified:
specifier: ^10.1.2 specifier: ^10.1.2
version: 10.1.2 version: 10.1.2
@ -9395,6 +9395,9 @@ packages:
resolution: {integrity: sha512-n5M855fKb2SsfMIiFFoVrABHJC8QtHwVx+mHWP3QcEqBHYienj5dHSgjbxtC0WEZXYt4wcD6zrQElDPhFuZgfA==} resolution: {integrity: sha512-n5M855fKb2SsfMIiFFoVrABHJC8QtHwVx+mHWP3QcEqBHYienj5dHSgjbxtC0WEZXYt4wcD6zrQElDPhFuZgfA==}
engines: {node: '>=12'} engines: {node: '>=12'}
/ansi-sequence-parser@1.1.0:
resolution: {integrity: sha512-lEm8mt52to2fT8GhciPCGeCXACSz2UwIN4X2e2LJSnZ5uAbn2/dsYdOmUXq0AtWS5cpAupysIneExOgH0Vd2TQ==}
/ansi-styles@3.2.1: /ansi-styles@3.2.1:
resolution: {integrity: sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==} resolution: {integrity: sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==}
engines: {node: '>=4'} engines: {node: '>=4'}
@ -15454,14 +15457,14 @@ packages:
unified: 10.1.2 unified: 10.1.2
dev: false dev: false
/rehype-pretty-code@0.4.0(shiki@0.11.1): /rehype-pretty-code@0.4.0(shiki@0.14.1):
resolution: {integrity: sha512-Bp91nfo4blpgCXlvGP1hsG+kRFfjqBVU09o1RFcnNA62u+iIzJiJRGzpfBj4FaItq7CEQL5ASGB7vLxN5xCvyA==} resolution: {integrity: sha512-Bp91nfo4blpgCXlvGP1hsG+kRFfjqBVU09o1RFcnNA62u+iIzJiJRGzpfBj4FaItq7CEQL5ASGB7vLxN5xCvyA==}
engines: {node: ^12.16.0 || >=13.2.0} engines: {node: ^12.16.0 || >=13.2.0}
peerDependencies: peerDependencies:
shiki: '*' shiki: '*'
dependencies: dependencies:
parse-numeric-range: 1.3.0 parse-numeric-range: 1.3.0
shiki: 0.11.1 shiki: 0.14.1
dev: true dev: true
/rehype-raw@6.1.1: /rehype-raw@6.1.1:
@ -15994,12 +15997,13 @@ packages:
vscode-textmate: 5.2.0 vscode-textmate: 5.2.0
dev: true dev: true
/shiki@0.11.1: /shiki@0.14.1:
resolution: {integrity: sha512-EugY9VASFuDqOexOgXR18ZV+TbFrQHeCpEYaXamO+SZlsnT/2LxuLBX25GGtIrwaEVFXUAbUQ601SWE2rMwWHA==} resolution: {integrity: sha512-+Jz4nBkCBe0mEDqo1eKRcCdjRtrCjozmcbTUjbPTX7OOJfEbTZzlUWlZtGe3Gb5oV1/jnojhG//YZc3rs9zSEw==}
dependencies: dependencies:
ansi-sequence-parser: 1.1.0
jsonc-parser: 3.2.0 jsonc-parser: 3.2.0
vscode-oniguruma: 1.7.0 vscode-oniguruma: 1.7.0
vscode-textmate: 6.0.0 vscode-textmate: 8.0.0
/side-channel@1.0.4: /side-channel@1.0.4:
resolution: {integrity: sha512-q5XPytqFEIKHkGdiMIrY10mvLRvnQh42/+GoBlFW3b2LXLE2xxJpZFdm94we0BaoV3RwJyGqg5wS7epxTv0Zvw==} resolution: {integrity: sha512-q5XPytqFEIKHkGdiMIrY10mvLRvnQh42/+GoBlFW3b2LXLE2xxJpZFdm94we0BaoV3RwJyGqg5wS7epxTv0Zvw==}
@ -17422,8 +17426,8 @@ packages:
resolution: {integrity: sha512-Uw5ooOQxRASHgu6C7GVvUxisKXfSgW4oFlO+aa+PAkgmH89O3CXxEEzNRNtHSqtXFTl0nAC1uYj0GMSH27uwtQ==} resolution: {integrity: sha512-Uw5ooOQxRASHgu6C7GVvUxisKXfSgW4oFlO+aa+PAkgmH89O3CXxEEzNRNtHSqtXFTl0nAC1uYj0GMSH27uwtQ==}
dev: true dev: true
/vscode-textmate@6.0.0: /vscode-textmate@8.0.0:
resolution: {integrity: sha512-gu73tuZfJgu+mvCSy4UZwd2JXykjK9zAZsfmDeut5dx/1a7FeTk0XwJsSuqQn+cuMCGVbIBfl+s53X4T19DnzQ==} resolution: {integrity: sha512-AFbieoL7a5LMqcnOF04ji+rpXadgOXnZsxQr//r83kLPr7biP7am3g9zbaZIaBGwBRWeSvoMD4mgPdX3e4NWBg==}
/vscode-uri@2.1.2: /vscode-uri@2.1.2:
resolution: {integrity: sha512-8TEXQxlldWAuIODdukIb+TR5s+9Ds40eSJrw+1iDDA9IFORPjMELarNQE3myz5XIkWWpdprmJjm1/SxMlWOC8A==} resolution: {integrity: sha512-8TEXQxlldWAuIODdukIb+TR5s+9Ds40eSJrw+1iDDA9IFORPjMELarNQE3myz5XIkWWpdprmJjm1/SxMlWOC8A==}