diff --git a/packages/integrations/mdx/src/index.ts b/packages/integrations/mdx/src/index.ts index 2ac6cc66a..b33b09886 100644 --- a/packages/integrations/mdx/src/index.ts +++ b/packages/integrations/mdx/src/index.ts @@ -1,13 +1,13 @@ -import type { RemarkMdxFrontmatterOptions } from 'remark-mdx-frontmatter'; -import type { AstroIntegration } from 'astro'; -import remarkShikiTwoslash from 'remark-shiki-twoslash'; import { nodeTypes } from '@mdx-js/mdx'; -import rehypeRaw from 'rehype-raw'; import mdxPlugin, { Options as MdxRollupPluginOptions } from '@mdx-js/rollup'; +import type { AstroIntegration } from 'astro'; import { parse as parseESM } from 'es-module-lexer'; +import rehypeRaw from 'rehype-raw'; import remarkFrontmatter from 'remark-frontmatter'; import remarkGfm from 'remark-gfm'; +import type { RemarkMdxFrontmatterOptions } from 'remark-mdx-frontmatter'; import remarkMdxFrontmatter from 'remark-mdx-frontmatter'; +import remarkShikiTwoslash from 'remark-shiki-twoslash'; import remarkSmartypants from 'remark-smartypants'; import remarkPrism from './remark-prism.js'; import { getFileInfo } from './utils.js'; @@ -27,10 +27,7 @@ type MdxOptions = { const DEFAULT_REMARK_PLUGINS = [remarkGfm, remarkSmartypants]; -function handleExtends( - config: WithExtends, - defaults: T[] = [], -): T[] { +function handleExtends(config: WithExtends, defaults: T[] = []): T[] { if (Array.isArray(config)) return config; return [...defaults, ...(config?.extends ?? [])]; @@ -56,7 +53,7 @@ export default function mdx(mdxOptions: MdxOptions = {}): AstroIntegration { ]); rehypePlugins.push([rehypeRaw, { passThrough: nodeTypes }]); } - + if (config.markdown.syntaxHighlight === 'prism') { remarkPlugins.push(remarkPrism); rehypePlugins.push([rehypeRaw, { passThrough: nodeTypes }]); diff --git a/packages/integrations/mdx/src/remark-prism.ts b/packages/integrations/mdx/src/remark-prism.ts index 019c3984b..4a324dd1d 100644 --- a/packages/integrations/mdx/src/remark-prism.ts +++ b/packages/integrations/mdx/src/remark-prism.ts @@ -45,15 +45,16 @@ function runHighlighter(lang: string, code: string) { /** */ export default function remarkPrism() { - return (tree: any) => visit(tree, 'code', (node: any) => { - let { lang, value } = node; - node.type = 'html'; + return (tree: any) => + visit(tree, 'code', (node: any) => { + let { lang, value } = node; + node.type = 'html'; - let { html, classLanguage } = runHighlighter(lang, value); - let classes = [classLanguage]; - node.value = `
${html}
`; - return node; - }); + let { html, classLanguage } = runHighlighter(lang, value); + let classes = [classLanguage]; + node.value = `
${html}
`; + return node; + }); } diff --git a/packages/integrations/mdx/test/mdx-syntax-highlighting.test.js b/packages/integrations/mdx/test/mdx-syntax-highlighting.test.js index d2bbb9266..5544aef56 100644 --- a/packages/integrations/mdx/test/mdx-syntax-highlighting.test.js +++ b/packages/integrations/mdx/test/mdx-syntax-highlighting.test.js @@ -17,10 +17,10 @@ describe('MDX syntax highlighting', () => { integrations: [mdx()], }); await fixture.build(); - + const html = await fixture.readFile('/index.html'); const { document } = parseHTML(html); - + const shikiCodeBlock = document.querySelector('pre.shiki'); expect(shikiCodeBlock).to.not.be.null; }); @@ -37,10 +37,10 @@ describe('MDX syntax highlighting', () => { integrations: [mdx()], }); await fixture.build(); - + const html = await fixture.readFile('/index.html'); const { document } = parseHTML(html); - + const shikiCodeBlock = document.querySelector('pre.shiki.dracula'); expect(shikiCodeBlock).to.not.be.null; }); @@ -56,10 +56,10 @@ describe('MDX syntax highlighting', () => { integrations: [mdx()], }); await fixture.build(); - + const html = await fixture.readFile('/index.html'); const { document } = parseHTML(html); - + const prismCodeBlock = document.querySelector('pre.language-astro'); expect(prismCodeBlock).to.not.be.null; });