Infrastructure/astro
0
Fork 0
mirror of https://github.com/withastro/astro.git synced 2024-12-16 21:46:22 -05:00
Code Issues 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 {
/** The code to highlight. Required. */
@ -49,10 +50,10 @@ function repairShikiTheme(html: string): string {
return html;
}
const highlighter = await shiki.getHighlighter({
const highlighter = await getHighlighter({
theme,
// 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 = 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';
export interface ShikiConfig {
@ -30,7 +31,7 @@ export interface 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) {
await highlighter.loadLanguage(lang);