@astrojs/mdx - npm Package Compare versions

Comparing version 0.10.2 to 0.10.3

CHANGELOG.md

 # @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
@@ -4,0 +12,0 @@

dist/remark-shiki.js

@@ -8,3 +8,18 @@ import { getHighlighter } from "shiki";
   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);
@@ -32,6 +47,2 @@ }
       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") {
@@ -38,0 +49,0 @@ html = html.replace(

package.json

 {
   "name": "@astrojs/mdx",
   "description": "Use MDX within Astro",
-  "version": "0.10.2",
+  "version": "0.10.3",
   "type": "module",
@@ -37,3 +37,3 @@ "types": "./dist/index.d.ts",
     "remark-smartypants": "^2.0.0",
-    "shiki": "^0.10.1",
+    "shiki": "^0.11.1",
     "unist-util-visit": "^4.1.0",
@@ -46,3 +46,3 @@ "vfile": "^5.3.2"
     "@types/yargs-parser": "^21.0.0",
-    "astro": "1.1.0",
+    "astro": "1.1.2",
     "astro-scripts": "0.0.7",
@@ -49,0 +49,0 @@ "chai": "^4.3.6",

README.md

@@ -252,2 +252,50 @@ # @astrojs/mdx 📝
 
+### 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
@@ -254,0 +302,0 @@

src/remark-shiki.ts

@@ -17,3 +17,18 @@ import type { ShikiConfig } from 'astro';
 	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);
@@ -56,7 +71,2 @@ }
 			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
@@ -63,0 +73,0 @@ if (node.lang === 'diff') {

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

100662

increased by3.22%

Lines of code

1672

increased by1.27%

Number of lines in readme file

430

increased by12.57%

Dependency changes

• + Addedshiki@0.11.1(transitive)

• + Addedvscode-textmate@6.0.0(transitive)

• - Removedshiki@0.10.1(transitive)

• - Removedvscode-textmate@5.2.0(transitive)

• Updatedshiki@^0.11.1