gatsby-remark-unwrap-images

gatsby-remark-unwrap-images

Usecase

gatsby-remark-unwrap-images is usefull if your want to style paragraphs and images differently.

You can easily have full width images and margin around texts to have a Medium style posts.

div {
    p {
        max-width: 1000px;
        margin: 0 auto;
    }

    img {
        width: 100%;
    }
}

With gatsby-remark-unwrap-images

Hello Word!

![](image1.jpg)
![](image2.jpg)

The previous markdown will generate the following DOM:

<div>
  <p>Hello Word!</p>
  <img src="image1.jpg" />
  <img src="image2.jpg" />
</div>

Without gatsby-remark-unwrap-images

Hello Word!

![](image1.jpg)
![](image2.jpg)

The previous markdown will generate the following DOM:

<div>
  <p>Hello Word!</p>
  <p>
    <img src="image1.jpg" />
    <img src="image2.jpg" />
  </p>
</div>

Getting started

You can download gatsby-remark-unwrap-images from the NPM registry via the npm or yarn commands

yarn add gatsby-remark-unwrap-images
npm install gatsby-remark-unwrap-images --save

Usage

Add the plugin in your gatsby-config.js file:

module.exports = {
    plugins: [
        {
            resolve: "gatsby-transformer-remark",
            options: {
                plugins: ["gatsby-remark-unwrap-images"],
            },
        },
    ],
}

Contributing

• ⇄ Pull/Merge requests and ★ Stars are always welcome.
• For bugs and feature requests, please create an issue.

See CONTRIBUTING.md guidelines

Changelog

See CHANGELOG.md

License

This project is licensed under the MIT License - see the LICENCE.md file for details