gatsby-remark-yuque-images

Processes images from 语雀.

Install

npm install --save gatsby-remark-yuque-images

How to use

// In your gatsby-config.js
plugins: [
  {
    resolve: `gatsby-transformer-remark`,
    options: {
      plugins: [
        {
          resolve: `gatsby-remark-yuque-images`,
          options: {
            maxWidth: 746
          }
        }
      ]
    }
  }
]

Options

| Name | Default | Description | | ---------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | maxWidth | 746 | The maxWidth in pixels of the img where the markdown will be displayed. | | linkImagesToOriginal | true | Add a link to each image to the original image. Sometimes people want to see a full-sized version of an image e.g. to see extra detail on a part of the image and this is a convenient and common pattern for enabling this. Set this option to false to disable this behavior. | | wrapperStyle | | Add custom styles to the div wrapping the responsive images. Use regular CSS syntax, e.g. margin-bottom:10px; | | backgroundColor | white | Set the background color of the image to match the background image of your design | | withWebp | false | Additionally add WebP versions alongside your chosen file format. They are added as a srcset with the appropriate mimetype and will be loaded in browsers that support the format.Pass true for default support, or an object of options to specifically override those for the WebP files. For example, pass { quality: 80 } to have the WebP images be at quality level 80. | | local | false | Set true to download images to local | | imageDir | yuque | Set the download location of yuque images |

LICENSE

MIT