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

chore: updated shiki (#4519)

Browse source 
* Upgraded shiki

* Use setColorReplacements

* no-shadow

* Changeset
This commit is contained in:
Juan Martín Seery 2022-08-28 08:23:37 -03:00 committed by GitHub
parent 270852370a
commit a2e8e76c30
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
9 changed files with 82 additions and 27 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
.changeset/big-guests-cry.md Normal file
View file

@ -0,0 +1,7 @@
---
'astro': patch
'@astrojs/mdx': patch
'@astrojs/markdown-remark': patch
---
Upgraded Shiki to v0.11.1

5
packages/astro/components/Code.astro
View file

@ -38,11 +38,6 @@ const { code, lang = 'plaintext', theme = 'github-dark', wrap = false } = Astro.
function repairShikiTheme(html: string): string { function repairShikiTheme(html: string): string {
// Replace "shiki" class naming with "astro" // Replace "shiki" class naming with "astro"
html = html.replace('<pre class="shiki"', '<pre class="astro-code"'); 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 // Handle code wrapping
// if wrap=null, do nothing. // if wrap=null, do nothing.
if (wrap === false) { if (wrap === false) {

21
packages/astro/components/Shiki.js
View file

@ -8,6 +8,10 @@ function stringify(opts) {
return JSON.stringify(opts, Object.keys(opts).sort()); return JSON.stringify(opts, Object.keys(opts).sort());
} }
/**
* @param {import('shiki').HighlighterOptions} opts
* @returns {Promise<import('shiki').Highlighter>}
*/
export function getHighlighter(opts) { export function getHighlighter(opts) {
const key = stringify(opts); const key = stringify(opts);
@ -17,7 +21,22 @@ export function getHighlighter(opts) {
} }
// Start the async getHighlighter call and cache the Promise // 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); _resolvedHighlighters.set(key, highlighter);
return highlighter; return highlighter;

2
packages/astro/package.json
View file

@ -137,7 +137,7 @@
"resolve": "^1.22.0", "resolve": "^1.22.0",
"rollup": "~2.77.0", "rollup": "~2.77.0",
"semver": "^7.3.7", "semver": "^7.3.7",
"shiki": "^0.10.1", "shiki": "^0.11.1",
"sirv": "^2.0.2", "sirv": "^2.0.2",
"slash": "^4.0.0", "slash": "^4.0.0",
"string-width": "^5.1.2", "string-width": "^5.1.2",

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

@ -40,7 +40,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.10.1", "shiki": "^0.11.1",
"unist-util-visit": "^4.1.0", "unist-util-visit": "^4.1.0",
"vfile": "^5.3.2" "vfile": "^5.3.2"
}, },

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

@ -14,7 +14,22 @@ const remarkShiki = async ({ langs = [], theme = 'github-dark', wrap = false }:
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) {
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); highlighterCacheAsync.set(cacheID, highlighterAsync);
} }
const highlighter = await highlighterAsync; const highlighter = await highlighterAsync;
@ -52,11 +67,6 @@ const remarkShiki = async ({ langs = [], theme = 'github-dark', wrap = false }:
// Replace "shiki" class naming with "astro". // Replace "shiki" class naming with "astro".
html = html.replace('<pre class="shiki"', `<pre class="astro-code"`); 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 // Add "user-select: none;" for "+"/"-" diff symbols
if (node.lang === 'diff') { if (node.lang === 'diff') {
html = html.replace( html = html.replace(

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

@ -40,7 +40,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.10.1", "shiki": "^0.11.1",
"unified": "^10.1.2", "unified": "^10.1.2",
"unist-util-map": "^3.1.1", "unist-util-map": "^3.1.1",
"unist-util-visit": "^4.1.0", "unist-util-visit": "^4.1.0",

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

@ -17,7 +17,22 @@ const remarkShiki = async (
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) {
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); highlighterCacheAsync.set(cacheID, highlighterAsync);
} }
const highlighter = await highlighterAsync; const highlighter = await highlighterAsync;
@ -58,11 +73,6 @@ const remarkShiki = async (
'<pre class="shiki"', '<pre class="shiki"',
`<pre is:raw class="astro-code${scopedClassName ? ' ' + scopedClassName : ''}"` `<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 // Add "user-select: none;" for "+"/"-" diff symbols
if (node.lang === 'diff') { if (node.lang === 'diff') {
html = html.replace( html = html.replace(

26
pnpm-lock.yaml
View file

@ -452,7 +452,7 @@ importers:
rollup: ~2.77.0 rollup: ~2.77.0
sass: ^1.52.2 sass: ^1.52.2
semver: ^7.3.7 semver: ^7.3.7
shiki: ^0.10.1 shiki: ^0.11.1
sirv: ^2.0.2 sirv: ^2.0.2
slash: ^4.0.0 slash: ^4.0.0
srcset-parse: ^1.1.0 srcset-parse: ^1.1.0
@ -509,7 +509,7 @@ importers:
resolve: 1.22.1 resolve: 1.22.1
rollup: 2.77.3 rollup: 2.77.3
semver: 7.3.7 semver: 7.3.7
shiki: 0.10.1 shiki: 0.11.1
sirv: 2.0.2 sirv: 2.0.2
slash: 4.0.0 slash: 4.0.0
string-width: 5.1.2 string-width: 5.1.2
@ -2319,7 +2319,7 @@ importers:
remark-shiki-twoslash: ^3.1.0 remark-shiki-twoslash: ^3.1.0
remark-smartypants: ^2.0.0 remark-smartypants: ^2.0.0
remark-toc: ^8.0.1 remark-toc: ^8.0.1
shiki: ^0.10.1 shiki: ^0.11.1
unist-util-visit: ^4.1.0 unist-util-visit: ^4.1.0
vfile: ^5.3.2 vfile: ^5.3.2
dependencies: dependencies:
@ -2334,7 +2334,7 @@ importers:
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.10.1 shiki: 0.11.1
unist-util-visit: 4.1.1 unist-util-visit: 4.1.1
vfile: 5.3.4 vfile: 5.3.4
devDependencies: devDependencies:
@ -2786,7 +2786,7 @@ importers:
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.10.1 shiki: ^0.11.1
unified: ^10.1.2 unified: ^10.1.2
unist-util-map: ^3.1.1 unist-util-map: ^3.1.1
unist-util-visit: ^4.1.0 unist-util-visit: ^4.1.0
@ -2808,7 +2808,7 @@ importers:
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.10.1 shiki: 0.11.1
unified: 10.1.2 unified: 10.1.2
unist-util-map: 3.1.1 unist-util-map: 3.1.1
unist-util-visit: 4.1.1 unist-util-visit: 4.1.1
@ -15512,6 +15512,15 @@ packages:
jsonc-parser: 3.1.0 jsonc-parser: 3.1.0
vscode-oniguruma: 1.6.2 vscode-oniguruma: 1.6.2
vscode-textmate: 5.2.0 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: /side-channel/1.0.4:
resolution: {integrity: sha512-q5XPytqFEIKHkGdiMIrY10mvLRvnQh42/+GoBlFW3b2LXLE2xxJpZFdm94we0BaoV3RwJyGqg5wS7epxTv0Zvw==} resolution: {integrity: sha512-q5XPytqFEIKHkGdiMIrY10mvLRvnQh42/+GoBlFW3b2LXLE2xxJpZFdm94we0BaoV3RwJyGqg5wS7epxTv0Zvw==}
@ -16946,6 +16955,11 @@ packages:
/vscode-textmate/5.2.0: /vscode-textmate/5.2.0:
resolution: {integrity: sha512-Uw5ooOQxRASHgu6C7GVvUxisKXfSgW4oFlO+aa+PAkgmH89O3CXxEEzNRNtHSqtXFTl0nAC1uYj0GMSH27uwtQ==} 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: /vscode-uri/2.1.2:
resolution: {integrity: sha512-8TEXQxlldWAuIODdukIb+TR5s+9Ds40eSJrw+1iDDA9IFORPjMELarNQE3myz5XIkWWpdprmJjm1/SxMlWOC8A==} resolution: {integrity: sha512-8TEXQxlldWAuIODdukIb+TR5s+9Ds40eSJrw+1iDDA9IFORPjMELarNQE3myz5XIkWWpdprmJjm1/SxMlWOC8A==}