Markdown bug bash! (#1789)

.changeset/beige-kings-listen.md

@@ -0,0 +1,5 @@
+---
+'@astrojs/markdown-remark': patch
+---
+
+Fix bug where code blocks would not be escaped properly

.changeset/curvy-glasses-rest.md

@@ -0,0 +1,5 @@
+---
+'astro': patch
+---
+
+Fix error with Markdown content attribute parsing

.changeset/young-steaks-report.md

@@ -0,0 +1,5 @@
+---
+'astro': patch
+---
+
+Fix bug with attribute serialization

packages/astro/src/runtime/server/index.ts

@@ -208,6 +208,8 @@ export function createAstro(fileURLStr: string, site: string): TopLevelAstro {
   };
 }
 
+const toAttributeString = (value: any) => String(value).replace(/&/g, '&').replace(/"/g, '"')
+
 // A helper used to turn expressions into attribute key/value
 export function addAttribute(value: any, key: string) {
   if (value == null || value === false) {
@@ -216,10 +218,10 @@ export function addAttribute(value: any, key: string) {
 
   // support "class" from an expression passed into an element (#782)
   if (key === 'class:list') {
-    return ` ${key.slice(0, -5)}="${serializeListValue(value)}"`;
+    return ` ${key.slice(0, -5)}="${toAttributeString(serializeListValue(value))}"`;
   }
 
-  return ` ${key}="${value}"`;
+  return ` ${key}="${toAttributeString(value)}"`;
 }
 
 // Adds support for `<Component {...value} />

packages/astro/src/vite-plugin-markdown/index.ts

@@ -40,10 +40,11 @@ export default function markdown({ config }: AstroPluginOptions): Plugin {
 ${layout ? `import Layout from '${layout}';` : ''}
 ${components ? `import * from '${components}';` : ''}
 ${setup}
+const $$content = ${JSON.stringify(content)}
 ---`;
         // If the user imported "Layout", wrap the content in a Layout
         if (/\bLayout\b/.test(prelude)) {
-          astroResult = `${prelude}\n<Layout content={${JSON.stringify(content)}}>\n\n${astroResult}\n\n</Layout>`;
+          astroResult = `${prelude}\n<Layout content={$$content}>\n\n${astroResult}\n\n</Layout>`;
         } else {
           astroResult = `${prelude}\n${astroResult}`;
         }

packages/markdown/remark/src/index.ts

@@ -7,6 +7,7 @@ import rehypeExpressions from './rehype-expressions.js';
 import rehypeIslands from './rehype-islands.js';
 import { remarkJsx, loadRemarkJsx } from './remark-jsx.js';
 import rehypeJsx from './rehype-jsx.js';
+import rehypeEscape from './rehype-escape.js';
 import remarkPrism from './remark-prism.js';
 import remarkUnwrap from './remark-unwrap.js';
 import { loadPlugins } from './load-plugins.js';
@@ -76,6 +77,7 @@ export async function renderMarkdown(content: string, opts?: MarkdownRenderingOp
     .use(isMDX ? [rehypeJsx] : [])
     .use(isMDX ? [rehypeExpressions] : [])
     .use(isMDX ? [] : [rehypeRaw])
+    .use(isMDX ? [rehypeEscape] : [])
     .use(rehypeIslands);
 
   let result: string;

packages/markdown/remark/src/rehype-escape.ts

@@ -0,0 +1,12 @@
+import { SKIP, visit } from 'unist-util-visit';
+
+export default function rehypeEscape(): any {
+  return function (node: any): any {
+    return visit(node, 'element', (el) => {
+      if (el.tagName === 'code' || el.tagName === 'pre') {
+        el.properties['data-astro-raw'] = true;
+      }
+      return el;
+    });
+  };
+}