Skip to content

Commit

Permalink
chore: updated shiki (#4519)
Browse files Browse the repository at this point in the history 
* Upgraded shiki

* Use setColorReplacements

* no-shadow

* Changeset
  • Loading branch information
@JuanM04
JuanM04 authored Aug 28, 2022
1 parent 2708523 commit a2e8e76
Show file tree
Hide file tree
Showing 9 changed files with 82 additions and 27 deletions.
7 changes: 7 additions & 0 deletions .changeset/big-guests-cry.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
---
'astro': patch
'@astrojs/mdx': patch
'@astrojs/markdown-remark': patch
---

Upgraded Shiki to v0.11.1
5 changes: 0 additions & 5 deletions packages/astro/components/Code.astro
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand Down
21 changes: 20 additions & 1 deletion packages/astro/components/Shiki.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);

Expand All @@ -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;
Expand Down
2 changes: 1 addition & 1 deletion packages/astro/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
2 changes: 1 addition & 1 deletion packages/integrations/mdx/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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"
},
Expand Down
22 changes: 16 additions & 6 deletions packages/integrations/mdx/src/remark-shiki.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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(
Expand Down
2 changes: 1 addition & 1 deletion packages/markdown/remark/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
22 changes: 16 additions & 6 deletions packages/markdown/remark/src/remark-shiki.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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(
Expand Down
26 changes: 20 additions & 6 deletions pnpm-lock.yaml
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

0 comments on commit a2e8e76

Please sign in to comment.