@altano/remark-astrojs-image v0.0.1-alpha.1

⚠️ HIGHLY EXPERIMENTAL: Everything about this package is subject to change, including the name.

remark-astrojs-image

This is a remark preset that enhances images in your .mdx files to use @astrojs/image components. While this preset (and accompanying remark plugins) are not astro specific, if you're not using mdx in an astro site you probably shouldn't be here.

Functionality

Installation

NOTE: This plugin is mdx and esm only. Using components (such as the @astrojs/image component) from vanilla Markdown (.md files) has been deprecated in astro. This plugin, and astro's release candidate, require you to use mdx if you want to use components.

Install this remark preset:

# Using NPM
npm install @altano/remark-astrojs-image
# Using Yarn
yarn add @altano/remark-astrojs-image

Edit your astro.config.mjs to add this remark preset:

...
import remarkAstrojsImage from "@altano/remark-astrojs-image";

export default defineConfig({
  integrations: [
    // You should already have the @astrojs/image integration
    image(),
    // and the @astrojs/mdx integration
    mdx({
      remarkPlugins: {
        // so just add this preset as a remark plugin:
        extends: [remarkAstrojsImage],
      },
    }),
  ],
});