https://github.com/benallfree/mdsvex-enhanced-images

MDsveX plugin to render Markdown images using @sveltejs/enhanced-img
https://github.com/benallfree/mdsvex-enhanced-images

enhanced-img markdown mdsvex svelte

Last synced: 11 days ago
JSON representation

MDsveX plugin to render Markdown images using @sveltejs/enhanced-img

• Host: GitHub
• URL: https://github.com/benallfree/mdsvex-enhanced-images
• Owner: benallfree
• License: mit
• Created: 2024-10-07T13:39:16.000Z (about 1 month ago)
• Default Branch: main
• Last Pushed: 2024-10-13T03:56:04.000Z (26 days ago)
• Last Synced: 2024-10-21T07:10:09.815Z (18 days ago)
• Topics: enhanced-img, markdown, mdsvex, svelte
• Language: TypeScript
• Homepage:
• Size: 230 KB
• Stars: 3
• Watchers: 1
• Forks: 1
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Enhanced Images Plugin for MDsveX

This plugin converts Markdown images to `` components.

## Features

- Automatically imports images used in Markdown

- Converts Markdown image syntax to ``

- Handles path resolution for various import scenarios

## Usage

```bash

npm install mdsvex mdsvex-enhanced-images @sveltejs/enhanced-img

```

```js

// svelte.config.js

import { enhancedImages } from 'mdsvex-enhanced-images'

export default {

  preprocess: [

    mdsvex({

      remarkPlugins: [enhancedImages]

    })

  ]

}

```

```js

// vite.config.js

import { enhancedImages } from '@sveltejs/enhanced-img'

import { sveltekit } from '@sveltejs/kit/vite'

import { defineConfig } from 'vite'

export default defineConfig({

  plugins: [enhancedImages(), sveltekit()]

})

```

Now use normal Markdown-style images just as you normally would. By default, paths beginning with `$`, `@`, `./`, or `../` are left unchanged while all other paths are converted to relative paths by prepending `./`.

```md

![Example](example.png) // Resolves to ./example.png

![Example](../example.png) // Resolves to ../example.png

![Example]($images/example.png) // Resolves to $images/example.png

![Example](@images/example.png) // Resolves to @images/example.png

```

## Advanced Usage: Custom Path Resolution

If the default path resolution strategy doens't work for your needs, you can optionally provide a custom `resolve` function:

```js

mdsvex({

  remarkPlugins: [

    [

      enhancedImages,

      {

        resolve: (path) => path

      }

    ]

  ]

})

```

### Example: Make non-relative paths resolve to `src/assets/images`

If you just want to change the resolution of non-relative paths (most common case), you can use `defaultResolverFactory` to create a custom resolver. The factory's stock resolver will handle paths starting with `$`, `@`, or `./` or `../` unchanged, and call your custom relative resolver for all other paths.

```js

// svelte.config.js

import { defaultResolverFactory } from 'mdsvex-enhanced-images'

import { join } from 'path'

const config = {

  preprocess: [

    mdsvex({

      remarkPlugins: [

        [

          enhancedImages,

          {

            resolve: defaultResolverFactory((path) =>

              join('src', 'assets', 'images', path)

            )

          }

        ]

      ]

    })

  ]

}

```

Now, images with non-relative paths in Markdown will resolve to `src/assets/images`:

```md

![Example](example.png) // Resolves to src/assets/images/example.png (new)

![Example](../example.png) // Resolves to ../example.png (unchanged)

![Example]($images/example.png) // Resolves to $images/example.png (unchanged)

![Example](@images/example.png) // Resolves to @images/example.png (unchanged)

```

## License

MIT