https://github.com/oliverspeir/remark-imgattr

https://github.com/oliverspeir/remark-imgattr

Last synced: about 2 months ago
JSON representation

• Host: GitHub
• URL: https://github.com/oliverspeir/remark-imgattr
• Owner: OliverSpeir
• License: mit
• Created: 2024-01-08T06:25:13.000Z (12 months ago)
• Default Branch: main
• Last Pushed: 2024-04-09T11:50:47.000Z (9 months ago)
• Last Synced: 2024-10-31T18:08:41.938Z (about 2 months ago)
• Language: JavaScript
• Homepage: https://www.npmjs.com/package/remark-imgattr
• Size: 12.7 KB
• Stars: 7
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Remark Image Attributes

Remark plugin to add attributes to markdown and mdx images

Adds attributes to images by extending the default syntax like`![](path)(attribute1: value, attribute2: value)`. Attributes will be applied to the hProperties of that image node.

> [!NOTE]

>

> Should support almost any syntax although `sizes` and any attribute with commas in it needs to be inside quotes.

>

> If using [remark-unwrap-images](https://github.com/remarkjs/remark-unwrap-images) run this plugin first

## Usage in Astro 

```js

import { defineConfig } from 'astro/config';

import imgAttr from 'remark-imgattr';

// https://astro.build/config

export default defineConfig({

	markdown: {

		remarkPlugins:[imgAttr]

	}

});

```

## Example

```md

![Style](path)(style: border: 1px solid #ccc; padding: 10px;, width:100)

![alt text](path)(width: 300, height: 150)

```

## Support for Astro Specific Syntax

```md

![](path)( width:300, widths:[300,600], sizes:"(min-width: 600px) 600w, 300w" )

![](path)(quality:100)

```