Neurotoxin Powered Marketing

    gridsome-remark-unwrap-images

    1.0.0 • Public • Published

    gridsome-remark-unwrap-images

    gridsome-remark-unwrap-images unwraps transformed gridsome images from its paragraph tag, allowing for advanced styling such as medium-width paragraphs and full-width images (Medium-style articles).

    The plugin is a port of gatsby-remark-unwrap-images.

    Install

    npm install gridsome-remark-unwrap-images

    Usage

    Configure gridsome.config.js to use the plugin.

    module.exports = {
        siteName: 'Gridsome Blog',
        siteDescription: 'A simple Gridsome blog',
     
        transformers: {
            remark: {
                plugins: [
                    // Add remark-unwrap-images plugin
                    'gridsome-remark-unwrap-images'
                ]
            }
        }
    }

    ⚠️ Caveat

    At the moment the image to be unwrapped must be in a separate line, otherwise the image will still be wrapped in a <p> tag.

    ✅ Image gets unwrapped

    Markdown

    I'm a paragraph.
     
    ![I'm an image](image.jpg)

    HTML output

    <div>
        <p>I'm a paragraph.</p>
        <img alt="I'm an image" src="image.jpg" />
    </div>

    ❌ Image stays wrapped

    Markdown

    I'm a paragraph.
    ![I'm an image](image.jpg)

    HTML output

    <div>
        <p>
            I'm a paragraph.
            <img alt="I'm an image" src="image.jpg" />
        </p>
    </div>

    License

    See the LICENSE file for details.

    Install

    npm i gridsome-remark-unwrap-images

    DownloadsWeekly Downloads

    23

    Version

    1.0.0

    License

    MIT

    Unpacked Size

    5.14 kB

    Total Files

    5

    Last publish

    Collaborators

    • alexwidua