Add support for markdown plugins (#1650)

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'],
+    render: [astroRemark, {
-    rehypePlugins: [
+      remarkPlugins: ['remark-code-titles', 'remark-slug'],
-      ['rehype-autolink-headings', { behavior: 'prepend' }],
+      rehypePlugins: [
-      ['rehype-toc', { headings: ['h2', 'h3'] }],
+        ['rehype-autolink-headings', { behavior: 'prepend' }],
-      ['rehype-add-classes', { 'h1,h2,h3': 'title' }],
+        ['rehype-toc', { headings: ['h2', 'h3'] }],
-    ],
+        ['rehype-add-classes', { 'h1,h2,h3': 'title' }],
+      ]
+    }]
   },
 });

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",

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()

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';
-
+import markdownRemark from '@astrojs/markdown-remark';
-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();
-});
 
 
 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 <Markdown> 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', () => {});

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;
   }

packages/markdown/remark/src/remark-prism.ts

@@ -58,7 +58,7 @@ function transformer(className: MaybeString) {
       if(className) {
         classes.push(className);
       }
-      node.value = `<pre class="${classes.join(' ')}"><code class="${classLanguage}">${html}</code></pre>`;
+      node.value = `<pre class="${classes.join(' ')}"><code data-astro-raw class="${classLanguage}">${html}</code></pre>`;
       return node;
     };
     return visit(tree, 'code', visitor)

yarn.lock

@@ -106,10 +106,10 @@
     "@algolia/logger-common" "4.10.5"
     "@algolia/requester-common" "4.10.5"
 
-"@astrojs/compiler@^0.2.13":
+"@astrojs/compiler@^0.2.16":
-  version "0.2.13"
+  version "0.2.16"
-  resolved "https://registry.yarnpkg.com/@astrojs/compiler/-/compiler-0.2.13.tgz#ea67f9865efdd69a69cb296c0e71f8002f059da9"
+  resolved "https://registry.yarnpkg.com/@astrojs/compiler/-/compiler-0.2.16.tgz#e2b560d699c586bb26e5332255050f8b97d1a19d"
-  integrity sha512-KfbY475EdQLPYe8B3Pyqeu4rCYY/aHad5QkoCHIvIDYU2XCM8vMA/PLtpLdi05TSAw6NGFLAZmQJOE1dzsBRLg==
+  integrity sha512-PVMIxBePkzxkg56g9WJXmKkeW0xCmAMOrmSpW0uySucWbdyAMc31sSZb9v6dhYt4lrFiV6CDOCCqcEmRc2wHoA==
   dependencies:
     typescript "^4.3.5"