@astrojs/mdx 0.10.2 → 0.10.3

package/.turbo/turbo-build.log

@@ -1,5 +1,5 @@
-@astrojs/mdx:build: cache hit, replaying output 97b75f35cc1d424b
+@astrojs/mdx:build: cache hit, replaying output ce9fa72396235d9a
 @astrojs/mdx:build: 
-@astrojs/mdx:build: > @astrojs/mdx@0.10.2 build /home/runner/work/astro/astro/packages/integrations/mdx
+@astrojs/mdx:build: > @astrojs/mdx@0.10.3 build /home/runner/work/astro/astro/packages/integrations/mdx
 @astrojs/mdx:build: > astro-scripts build "src/**/*.ts" && tsc
 @astrojs/mdx:build: 

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @astrojs/mdx
 
+## 0.10.3
+
+### Patch Changes
+
+- [#4519](https://github.com/withastro/astro/pull/4519) [`a2e8e76c3`](https://github.com/withastro/astro/commit/a2e8e76c303e8d6f39c24c122905a10f06907997) Thanks [@JuanM04](https://github.com/JuanM04)! - Upgraded Shiki to v0.11.1
+
+- [#4530](https://github.com/withastro/astro/pull/4530) [`8504cd79b`](https://github.com/withastro/astro/commit/8504cd79b708e0d3bf1a2bb4ff9b86936bdd692b) Thanks [@kylebutts](https://github.com/kylebutts)! - Add custom components to README
+
 ## 0.10.2
 
 ### Patch Changes

package/README.md

@@ -249,6 +249,54 @@ const { title, fancyJsHelper } = Astro.props;
 <!-- -->
 ```
 
+### Custom components
+
+Under the hood, MDX will convert Markdown into HTML components. For example, this blockquote:
+
+```md
+> A blockquote with *some* emphasis.
+```
+
+will be converted into this HTML:
+
+```html
+<blockquote>
+  <p>A blockquote with <em>some</em> emphasis.</p>
+</blockquote>
+```
+
+But what if you want to specify your own markup for these blockquotes? In the above example, you could create a custom `<Blockquote />` component (in any language) that either has a `<slot />` component or accepts a `children` prop.
+
+```astro title="src/components/Blockquote.astro"
+<blockquote class="bg-blue-50 p-4">
+  <span class="text-4xl text-blue-600 mb-2">“</span>
+  <slot />
+</blockquote>
+```
+
+Then in the MDX file you import the component and export it to the `components` export. 
+
+```mdx title="src/pages/posts/post-1.mdx" {2}
+import Blockquote from '../components/Blockquote.astro';
+export const components = { blockquote: Blockquote };
+```
+
+Now, writing the standard Markdown blockquote syntax (`>`) will use your custom `<Blockquote />` component instead. No need to use a component in Markdown, or write a remark/rehype plugin! Visit the [MDX website](https://mdxjs.com/table-of-components/) for a full list of HTML elements that can be overwritten as custom components.
+
+
+#### Custom components with imported `mdx`
+
+When rendering imported MDX content, custom components can also be passed via the `components` prop:
+
+```astro title="src/pages/page.astro" "components={{ h1: Heading }}"
+---
+import Content from '../content.mdx';
+import Heading from '../Heading.astro';
+---
+
+<Content components={{ h1: Heading }} />
+```
+
 ### Syntax highlighting
 
 The MDX integration respects [your project's `markdown.syntaxHighlight` configuration](https://docs.astro.build/en/guides/markdown-content/#syntax-highlighting).

package/dist/remark-shiki.js

@@ -5,7 +5,22 @@ const remarkShiki = async ({ langs = [], theme = "github-dark", wrap = false })
   const cacheID = typeof theme === "string" ? theme : theme.name;
   let highlighterAsync = highlighterCacheAsync.get(cacheID);
   if (!highlighterAsync) {
-    highlighterAsync = getHighlighter({ theme });
+    highlighterAsync = getHighlighter({ theme }).then((hl) => {
+      hl.setColorReplacements({
+        "#000001": "var(--astro-code-color-text)",
+        "#000002": "var(--astro-code-color-background)",
+        "#000004": "var(--astro-code-token-constant)",
+        "#000005": "var(--astro-code-token-string)",
+        "#000006": "var(--astro-code-token-comment)",
+        "#000007": "var(--astro-code-token-keyword)",
+        "#000008": "var(--astro-code-token-parameter)",
+        "#000009": "var(--astro-code-token-function)",
+        "#000010": "var(--astro-code-token-string-expression)",
+        "#000011": "var(--astro-code-token-punctuation)",
+        "#000012": "var(--astro-code-token-link)"
+      });
+      return hl;
+    });
     highlighterCacheAsync.set(cacheID, highlighterAsync);
   }
   const highlighter = await highlighterAsync;
@@ -28,10 +43,6 @@ const remarkShiki = async ({ langs = [], theme = "github-dark", wrap = false })
       }
       let html = highlighter.codeToHtml(node.value, { lang });
       html = html.replace('<pre class="shiki"', `<pre class="astro-code"`);
-      html = html.replace(
-        /style="(background-)?color: var\(--shiki-/g,
-        'style="$1color: var(--astro-code-'
-      );
       if (node.lang === "diff") {
         html = html.replace(
           /<span class="line"><span style="(.*?)">([\+|\-])/g,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@astrojs/mdx",
   "description": "Use MDX within Astro",
-  "version": "0.10.2",
+  "version": "0.10.3",
   "type": "module",
   "types": "./dist/index.d.ts",
   "author": "withastro",
@@ -34,7 +34,7 @@
     "remark-frontmatter": "^4.0.1",
     "remark-gfm": "^3.0.1",
     "remark-smartypants": "^2.0.0",
-    "shiki": "^0.10.1",
+    "shiki": "^0.11.1",
     "unist-util-visit": "^4.1.0",
     "vfile": "^5.3.2"
   },
@@ -42,7 +42,7 @@
     "@types/chai": "^4.3.1",
     "@types/mocha": "^9.1.1",
     "@types/yargs-parser": "^21.0.0",
-    "astro": "1.1.0",
+    "astro": "1.1.2",
     "astro-scripts": "0.0.7",
     "chai": "^4.3.6",
     "linkedom": "^0.14.12",

package/src/remark-shiki.ts

@@ -14,7 +14,22 @@ const remarkShiki = async ({ langs = [], theme = 'github-dark', wrap = false }:
 	const cacheID: string = typeof theme === 'string' ? theme : theme.name;
 	let highlighterAsync = highlighterCacheAsync.get(cacheID);
 	if (!highlighterAsync) {
-		highlighterAsync = getHighlighter({ theme });
+		highlighterAsync = getHighlighter({ theme }).then((hl) => {
+			hl.setColorReplacements({
+				'#000001': 'var(--astro-code-color-text)',
+				'#000002': 'var(--astro-code-color-background)',
+				'#000004': 'var(--astro-code-token-constant)',
+				'#000005': 'var(--astro-code-token-string)',
+				'#000006': 'var(--astro-code-token-comment)',
+				'#000007': 'var(--astro-code-token-keyword)',
+				'#000008': 'var(--astro-code-token-parameter)',
+				'#000009': 'var(--astro-code-token-function)',
+				'#000010': 'var(--astro-code-token-string-expression)',
+				'#000011': 'var(--astro-code-token-punctuation)',
+				'#000012': 'var(--astro-code-token-link)',
+			});
+			return hl;
+		});
 		highlighterCacheAsync.set(cacheID, highlighterAsync);
 	}
 	const highlighter = await highlighterAsync;
@@ -52,11 +67,6 @@ const remarkShiki = async ({ langs = [], theme = 'github-dark', wrap = false }:
 
 			// Replace "shiki" class naming with "astro".
 			html = html.replace('<pre class="shiki"', `<pre class="astro-code"`);
-			// Replace "shiki" css variable naming with "astro".
-			html = html.replace(
-				/style="(background-)?color: var\(--shiki-/g,
-				'style="$1color: var(--astro-code-'
-			);
 			// Add "user-select: none;" for "+"/"-" diff symbols
 			if (node.lang === 'diff') {
 				html = html.replace(