michael/astro
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Merge branch 'main' into fix/vercel-edge-ui-frameworks

Browse source
This commit is contained in:
Daniel 2023-02-01 10:40:38 +01:00 • committed by GitHub
commit de9ad6dd7f
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 23 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
.changeset/orange-carpets-greet.md Normal file
View file

@ -0,0 +1,5 @@
---
'@astrojs/mdx': minor
---
Fix: load syntax highlighters after MDX remark plugins. This keeps MDX consistent with Astro's markdown behavior.

15
packages/integrations/image/README.md
View file

@ -259,7 +259,7 @@ color representation with 3 or 6 hexadecimal characters in the form `#123[abc]`,
**Default:** `'cover'` **Default:** `'cover'`
</p> </p>
> This is not supported by the default Squoosh service. See the [installation section](#installing-sharp-optional) for details on using the `sharp` service instead. > This is not supported by the default Squoosh service. See the [installation section](#installing-sharp-optional) for details on using the `sharp` service instead. Read more about [how `sharp` resizes images](https://sharp.pixelplumbing.com/api-resize).
How the image should be resized to fit both `height` and `width`. How the image should be resized to fit both `height` and `width`.
@ -271,7 +271,7 @@ How the image should be resized to fit both `height` and `width`.
**Default:** `'centre'` **Default:** `'centre'`
</p> </p>
> This is not supported by the default Squoosh service. See the [installation section](#installing-sharp-optional) for details on using the `sharp` service instead. > This is not supported by the default Squoosh service. See the [installation section](#installing-sharp-optional) for details on using the `sharp` service instead. Read more about [how `sharp` resizes images](https://sharp.pixelplumbing.com/api-resize).
Position of the crop when fit is `cover` or `contain`. Position of the crop when fit is `cover` or `contain`.
@ -333,7 +333,7 @@ The list of sizes that should be built for responsive images. This is combined w
```astro ```astro
// Builds three images: 400x400, 800x800, and 1200x1200 // Builds three images: 400x400, 800x800, and 1200x1200
<Picture src={...} widths={[400, 800, 1200]} aspectRatio="1:1" /> <Picture src={...} widths={[400, 800, 1200]} aspectRatio="1:1" alt="descriptive text" />
``` ```
#### aspectRatio #### aspectRatio
@ -392,7 +392,7 @@ color representation with 3 or 6 hexadecimal characters in the form `#123[abc]`,
**Default:** `'cover'` **Default:** `'cover'`
</p> </p>
> This is not supported by the default Squoosh service. See the [installation section](#installing-sharp-optional) for details on using the `sharp` service instead. > This is not supported by the default Squoosh service. See the [installation section](#installing-sharp-optional) for details on using the `sharp` service instead. Read more about [how `sharp` resizes images](https://sharp.pixelplumbing.com/api-resize).
How the image should be resized to fit both `height` and `width`. How the image should be resized to fit both `height` and `width`.
@ -406,7 +406,7 @@ How the image should be resized to fit both `height` and `width`.
**Default:** `'centre'` **Default:** `'centre'`
</p> </p>
> This is not supported by the default Squoosh service. See the [installation section](#installing-sharp-optional) for details on using the `sharp` service instead. > This is not supported by the default Squoosh service. See the [installation section](#installing-sharp-optional) for details on using the `sharp` service instead. Read more about [how `sharp` resizes images](https://sharp.pixelplumbing.com/api-resize).
Position of the crop when fit is `cover` or `contain`. Position of the crop when fit is `cover` or `contain`.
@ -422,7 +422,10 @@ This can be helpful if you need to add preload links to a page's `<head>`.
--- ---
import { getImage } from '@astrojs/image'; import { getImage } from '@astrojs/image';
const { src } = await getImage({src: '../assets/hero.png'}); const { src } = await getImage({
src: import('../assets/hero.png'),
alt: "My hero image"
});
--- ---
<html> <html>

15
packages/integrations/mdx/src/plugins.ts
View file

@ -129,12 +129,7 @@ export async function getRemarkPlugins(
config: AstroConfig config: AstroConfig
): Promise<MdxRollupPluginOptions['remarkPlugins']> { ): Promise<MdxRollupPluginOptions['remarkPlugins']> {
let remarkPlugins: PluggableList = []; let remarkPlugins: PluggableList = [];
if (mdxOptions.syntaxHighlight === 'shiki') {
remarkPlugins.push([await remarkShiki(mdxOptions.shikiConfig)]);
}
if (mdxOptions.syntaxHighlight === 'prism') {
remarkPlugins.push(remarkPrism);
}
if (mdxOptions.gfm) { if (mdxOptions.gfm) {
remarkPlugins.push(remarkGfm); remarkPlugins.push(remarkGfm);
} }
@ -144,6 +139,14 @@ export async function getRemarkPlugins(
remarkPlugins = [...remarkPlugins, ...ignoreStringPlugins(mdxOptions.remarkPlugins)]; remarkPlugins = [...remarkPlugins, ...ignoreStringPlugins(mdxOptions.remarkPlugins)];
// Apply syntax highlighters after user plugins to match `markdown/remark` behavior
if (mdxOptions.syntaxHighlight === 'shiki') {
remarkPlugins.push([await remarkShiki(mdxOptions.shikiConfig)]);
}
if (mdxOptions.syntaxHighlight === 'prism') {
remarkPlugins.push(remarkPrism);
}
// Apply last in case user plugins resolve relative image paths // Apply last in case user plugins resolve relative image paths
remarkPlugins.push(toRemarkContentRelImageError(config)); remarkPlugins.push(toRemarkContentRelImageError(config));