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