Gatsby-remark-yuque-images NPM

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