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: {
+    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' }],
-    ],
+      ]
+    }]
   },
 });

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,9 +1,10 @@
-/**
- * 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';
 
+
+describe('Astro Markdown plugins', () => {
   let fixture;
 
   before(async () => {
@@ -11,11 +12,13 @@ before(async () => {
       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,
@@ -24,8 +27,6 @@ before(async () => {
     await fixture.build();
   });
 
-
-describe('Astro Markdown plugins', () => {
   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":
-  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"