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

Fixed shiki import to work with "type": "module" (#2628)

Browse source 
* Fixed shiki import to work with "type": "module"

* Changeset

* Separated types import

* Add "* as" to type import
This commit is contained in:
Juan Martín Seery 2022-02-22 13:46:04 -03:00 committed by GitHub
parent ac6d2e8c64
commit 9b7e2ab251
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 13 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
.changeset/great-hotels-breathe.md Normal file
View file

@ -0,0 +1,6 @@
---
'astro': patch
'@astrojs/markdown-remark': patch
---
Fixed shiki to work with `{ "type": "module" }`

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

@ -1,5 +1,6 @@
--- ---
import shiki from 'shiki'; import type * as shiki from 'shiki';
import { getHighlighter } from 'shiki';
export interface Props { export interface Props {
/** The code to highlight. Required. */ /** The code to highlight. Required. */
@ -49,10 +50,10 @@ function repairShikiTheme(html: string): string {
return html; return html;
} }
const highlighter = await shiki.getHighlighter({ const highlighter = await getHighlighter({
theme, theme,
// Load custom lang if passed an object, otherwise load the default // Load custom lang if passed an object, otherwise load the default
langs: typeof lang !== 'string' ? [lang] : undefined langs: typeof lang !== 'string' ? [lang] : undefined,
}); });
const _html = highlighter.codeToHtml(code, { lang: typeof lang === 'string' ? lang : lang.id }); const _html = highlighter.codeToHtml(code, { lang: typeof lang === 'string' ? lang : lang.id });
const html = repairShikiTheme(_html); const html = repairShikiTheme(_html);

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

@ -1,4 +1,5 @@
import shiki from 'shiki'; import type * as shiki from 'shiki';
import { getHighlighter } from 'shiki';
import { visit } from 'unist-util-visit'; import { visit } from 'unist-util-visit';
export interface ShikiConfig { export interface ShikiConfig {
@ -30,7 +31,7 @@ export interface ShikiConfig {
} }
const remarkShiki = async ({ langs = [], theme = 'github-dark', wrap = false }: ShikiConfig) => { const remarkShiki = async ({ langs = [], theme = 'github-dark', wrap = false }: ShikiConfig) => {
const highlighter = await shiki.getHighlighter({ theme }); const highlighter = await getHighlighter({ theme });
for (const lang of langs) { for (const lang of langs) {
await highlighter.loadLanguage(lang); await highlighter.loadLanguage(lang);