From 7f95d706e94401c12f1196c2c132da0219fdab73 Mon Sep 17 00:00:00 2001 From: Matthew Phillips Date: Mon, 25 Oct 2021 09:40:07 -0400 Subject: [PATCH] Add support for markdown plugins (#1650) --- .../with-markdown-plugins/astro.config.mjs | 15 +++--- packages/astro/package.json | 2 +- packages/astro/src/core/config.ts | 2 - .../astro/test/astro-markdown-plugins.test.js | 54 +++++++++---------- packages/markdown/remark/src/index.ts | 5 +- packages/markdown/remark/src/remark-prism.ts | 2 +- yarn.lock | 8 +-- 7 files changed, 42 insertions(+), 46 deletions(-) diff --git a/examples/with-markdown-plugins/astro.config.mjs b/examples/with-markdown-plugins/astro.config.mjs index fa9d48a1b..a7a644944 100644 --- a/examples/with-markdown-plugins/astro.config.mjs +++ b/examples/with-markdown-plugins/astro.config.mjs @@ -5,16 +5,19 @@ // VSCode and other TypeScript-enabled text editors will provide auto-completion, // helpful tooltips, and warnings if your exported object is invalid. // You can disable this by removing "@ts-check" and `@type` comments below. +import astroRemark from '@astrojs/markdown-remark'; // @ts-check export default /** @type {import('astro').AstroUserConfig} */ ({ // Enable Custom Markdown options, plugins, etc. markdownOptions: { - remarkPlugins: ['remark-code-titles', 'remark-slug'], - rehypePlugins: [ - ['rehype-autolink-headings', { behavior: 'prepend' }], - ['rehype-toc', { headings: ['h2', 'h3'] }], - ['rehype-add-classes', { 'h1,h2,h3': 'title' }], - ], + render: [astroRemark, { + remarkPlugins: ['remark-code-titles', 'remark-slug'], + rehypePlugins: [ + ['rehype-autolink-headings', { behavior: 'prepend' }], + ['rehype-toc', { headings: ['h2', 'h3'] }], + ['rehype-add-classes', { 'h1,h2,h3': 'title' }], + ] + }] }, }); diff --git a/packages/astro/package.json b/packages/astro/package.json index 815d87557..98703512e 100644 --- a/packages/astro/package.json +++ b/packages/astro/package.json @@ -53,7 +53,7 @@ "test": "mocha --parallel --timeout 15000" }, "dependencies": { - "@astrojs/compiler": "^0.2.13", + "@astrojs/compiler": "^0.2.16", "@astrojs/language-server": "^0.7.16", "@astrojs/markdown-remark": "^0.3.1", "@astrojs/markdown-support": "0.3.1", diff --git a/packages/astro/src/core/config.ts b/packages/astro/src/core/config.ts index 2b4e0fe64..c18e54ccb 100644 --- a/packages/astro/src/core/config.ts +++ b/packages/astro/src/core/config.ts @@ -42,8 +42,6 @@ export const AstroConfigSchema = z.object({ .object({ footnotes: z.boolean().optional(), gfm: z.boolean().optional(), - remarkPlugins: z.array(z.any()).optional(), - rehypePlugins: z.array(z.any()).optional(), render: z.any().optional().default(['@astrojs/markdown-remark', {}]), }) .optional() diff --git a/packages/astro/test/astro-markdown-plugins.test.js b/packages/astro/test/astro-markdown-plugins.test.js index 215233bce..a094b54be 100644 --- a/packages/astro/test/astro-markdown-plugins.test.js +++ b/packages/astro/test/astro-markdown-plugins.test.js @@ -1,31 +1,32 @@ -/** - * UNCOMMENT: add markdown plugin support import { expect } from 'chai'; import cheerio from 'cheerio'; import { loadFixture } from './test-utils.js'; - -let fixture; - -before(async () => { - fixture = await loadFixture({ - projectRoot: './fixtures/astro-markdown-plugins/', - renderers: ['@astrojs/renderer-preact'], - markdownOptions: { - remarkPlugins: ['remark-code-titles', 'remark-slug', ['rehype-autolink-headings', { behavior: 'prepend' }]], - rehypePlugins: [ - ['rehype-toc', { headings: ['h2', 'h3'] }], - ['rehype-add-classes', { 'h1,h2,h3': 'title' }], - ], - }, - buildOptions: { - sitemap: false, - }, - }); - await fixture.build(); -}); +import markdownRemark from '@astrojs/markdown-remark'; describe('Astro Markdown plugins', () => { + let fixture; + + before(async () => { + fixture = await loadFixture({ + projectRoot: './fixtures/astro-markdown-plugins/', + renderers: ['@astrojs/renderer-preact'], + markdownOptions: { + render: [markdownRemark, { + remarkPlugins: ['remark-code-titles', 'remark-slug', ['rehype-autolink-headings', { behavior: 'prepend' }]], + rehypePlugins: [ + ['rehype-toc', { headings: ['h2', 'h3'] }], + ['rehype-add-classes', { 'h1,h2,h3': 'title' }], + ], + }], + }, + buildOptions: { + sitemap: false, + }, + }); + await fixture.build(); + }); + it('Can render markdown with plugins', async () => { const html = await fixture.readFile('/index.html'); const $ = cheerio.load(html); @@ -34,7 +35,7 @@ describe('Astro Markdown plugins', () => { expect($('.toc')).to.have.lengthOf(1); // teste 2: Added .title to h1 - expect($('#hello-world').hasClass('title')).toBeTrue(); + expect($('#hello-world').hasClass('title')).to.equal(true); }); it('Can render Astro with plugins', async () => { @@ -45,9 +46,6 @@ describe('Astro Markdown plugins', () => { expect($('.toc')).to.have.lengthOf(1); // teste 2: Added .title to h1 - expect($('#hello-world').hasClass('title')).toBeTrue(); + expect($('#hello-world').hasClass('title')).to.equal(true); }); -}); -*/ - -it.skip('is skipped', () => {}); +}); \ No newline at end of file diff --git a/packages/markdown/remark/src/index.ts b/packages/markdown/remark/src/index.ts index 23dfee2e2..b5a01b7b3 100644 --- a/packages/markdown/remark/src/index.ts +++ b/packages/markdown/remark/src/index.ts @@ -6,7 +6,6 @@ import { remarkExpressions, loadRemarkExpressions } from './remark-expressions.j import rehypeExpressions from './rehype-expressions.js'; import { remarkJsx, loadRemarkJsx } from './remark-jsx.js'; import rehypeJsx from './rehype-jsx.js'; -//import { remarkCodeBlock } from './codeblock.js'; import remarkPrism from './remark-prism.js'; import remarkUnwrap from './remark-unwrap.js'; import { loadPlugins } from './load-plugins.js'; @@ -53,7 +52,6 @@ export async function renderMarkdown(content: string, opts?: MarkdownRenderingOp .use(isMDX ? [remarkJsx] : []) .use(isMDX ? [remarkExpressions] : []) .use([remarkUnwrap]) - .use([remarkPrism(scopedClassName)]) const loadedRemarkPlugins = await Promise.all(loadPlugins(remarkPlugins)); const loadedRehypePlugins = await Promise.all(loadPlugins(rehypePlugins)); @@ -66,7 +64,7 @@ export async function renderMarkdown(content: string, opts?: MarkdownRenderingOp parser.use([scopedStyles(scopedClassName)]); } - //parser.use(remarkCodeBlock); + parser.use([remarkPrism(scopedClassName)]); parser.use([[markdownToHtml as any, { allowDangerousHtml: true, passThrough: ['raw', 'mdxTextExpression', 'mdxJsxTextElement', 'mdxJsxFlowElement']}]]); loadedRehypePlugins.forEach(([plugin, opts]) => { @@ -86,7 +84,6 @@ export async function renderMarkdown(content: string, opts?: MarkdownRenderingOp .process(content); result = vfile.toString(); } catch (err) { - debugger; console.error(err); throw err; } diff --git a/packages/markdown/remark/src/remark-prism.ts b/packages/markdown/remark/src/remark-prism.ts index adc9522e5..9ac72ea0f 100644 --- a/packages/markdown/remark/src/remark-prism.ts +++ b/packages/markdown/remark/src/remark-prism.ts @@ -58,7 +58,7 @@ function transformer(className: MaybeString) { if(className) { classes.push(className); } - node.value = `
${html}
`; + node.value = `
${html}
`; return node; }; return visit(tree, 'code', visitor) diff --git a/yarn.lock b/yarn.lock index 593a58782..0aea0e7ef 100644 --- a/yarn.lock +++ b/yarn.lock @@ -106,10 +106,10 @@ "@algolia/logger-common" "4.10.5" "@algolia/requester-common" "4.10.5" -"@astrojs/compiler@^0.2.13": - version "0.2.13" - resolved "https://registry.yarnpkg.com/@astrojs/compiler/-/compiler-0.2.13.tgz#ea67f9865efdd69a69cb296c0e71f8002f059da9" - integrity sha512-KfbY475EdQLPYe8B3Pyqeu4rCYY/aHad5QkoCHIvIDYU2XCM8vMA/PLtpLdi05TSAw6NGFLAZmQJOE1dzsBRLg== +"@astrojs/compiler@^0.2.16": + version "0.2.16" + resolved "https://registry.yarnpkg.com/@astrojs/compiler/-/compiler-0.2.16.tgz#e2b560d699c586bb26e5332255050f8b97d1a19d" + integrity sha512-PVMIxBePkzxkg56g9WJXmKkeW0xCmAMOrmSpW0uySucWbdyAMc31sSZb9v6dhYt4lrFiV6CDOCCqcEmRc2wHoA== dependencies: typescript "^4.3.5"