Skip to main content
Community Plugin
View plugin on GitHub
See starters using this


NPM version LICENSE version

Processes images from 语雀.


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


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