yarn add gatsby-source-filesystem

module.exports = {
  plugins: [
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `pages`,
        path: `${__dirname}/src/pages/`,
      },
    },
  ],
}

{
  allFile(filter: { sourceInstanceName: { eq: "pages" } }) {
    edges {
      node {
        extension
        dir
        sourceInstanceName
      }
    }
  }
}

yarn add gatsby-plugin-image gatsby-plugin-sharp gatsby-transformer-sharp

module.exports = {
  plugins: [
    `gatsby-plugin-image`,
    `gatsby-plugin-sharp`,
    `gatsby-transformer-sharp`, // Needed for dynamic images
  ],
}

import { StaticImage } from "gatsby-plugin-image"

export function Dino() {
 return (
   <StaticImage
     src="../images/dino.png"
     alt="A dinosaur"
     placeholder="blurred"
     layout="fixed"
     width={200}
     height={200}
   />
 )
}

import { graphql } from "gatsby"
import { GatsbyImage, getImage } from "gatsby-plugin-image"

function BlogPost({ data }) {
 const image = getImage(data.blogPost.avatar)
 return (
   <section>
     <h2>{data.blogPost.title}</h2>
     <GatsbyImage image={image} alt={data.blogPost.author} />
     <p>{data.blogPost.body}</p>
   </section>
 )
}

export const pageQuery = graphql`
 query {
   blogPost(id: { eq: $Id }) {
     title
     body
     author
     avatar {
       childImageSharp {
         gatsbyImageData(
           width: 200
           placeholder: BLURRED
           formats: [AUTO, WEBP, AVIF]
         )
       }
     }
   }
 }
`

yarn add gatsby-transformer-remark

module.exports = {
  plugins: [
  {
    resolve: `gatsby-transformer-remark`,
    options: {
      // Footnotes mode (default: true)
      footnotes: true,
      // GitHub Flavored Markdown mode (default: true)
      gfm: true,
      // Plugins configs
      plugins: [],
    },
  },
  ],
}

{
  allMarkdownRemark {
    edges {
      node {
        html
        headings {
          depth
          value
        }
        frontmatter {
          # Assumes you're using title in your frontmatter.
          title
        }
      }
    }
  }
}

---
name: 'sample'
date: 'YYYY-MM-DDTHH:mm:ss'
description: ''
---

### Hello World

yarn add gatsby-remark-images gatsby-plugin-sharp

module.exports = {
  plugins: [
    `gatsby-plugin-sharp`,
    {
      resolve: `gatsby-transformer-remark`,
      options: {
        plugins: [
          {
            resolve: `gatsby-remark-images`,
            options: {
              // It's important to specify the maxWidth (in pixels) of
              // the content container as this plugin uses this as the
              // base for generating different widths of each image.
              maxWidth: 590,
            },
          },
        ],
      },
    },
  ],
}

![gatsby-icon](Gatsby_Logo.png)

yarn add gatsby-remark-responsive-iframe

module.exports = {
  plugins: [
    {
      resolve: `gatsby-transformer-remark`,
      options: {
        plugins: [`gatsby-remark-responsive-iframe`],
      },
    },
  ]
}

<div class="iframely-embed"><div class="iframely-responsive" style="height: 140px; padding-bottom: 0;"><a href="https://iframely.com/" data-iframely-url="//cdn.iframe.ly/KGpjY3"></a></div></div><script async src="//cdn.iframe.ly/embed.js" charset="utf-8"></script>

yarn add gatsby-plugin-twitter

module.exports = {
  plugins: [
    `gatsby-plugin-twitter`
  ],
}

yarn add gatsby-remark-embed-video

module.exports = {
  plugins: [
    "gatsby-remark-embed-video",
    "gatsby-remark-responsive-iframe",
    "gatsby-remark-prismjs",
    "gatsby-remark-images"
  ],
}

`youtube: https://www.youtube.com/watch?v=6w0im3LHazY`

yarn add gatsby-remark-autolink-headers

module.exports = {
  plugins: [
    `gatsby-remark-autolink-headers`
  ],
}

yarn add gatsby-remark-table-of-contents

module.exports = {
  plugins: [
    {
      resolve: `gatsby-transformer-remark`,
      options: {
        plugins: [
          {
            resolve: `gatsby-remark-table-of-contents`,
            options: {
              exclude: "Table of Contents",
              tight: true,
              ordered: false,
              fromHeading: 2,
              toHeading: 6,
              className: "table-of-contents"
            },
          },
          `gatsby-remark-autolink-headers`
        ],
      },
    },
  ],
}

```toc
```

yarn add gatsby-remark-prismjs

module.exports = {
  plugins: [
    {
      resolve: `gatsby-remark-prismjs`,
      options: {
        classPrefix: 'language-',
        inlineCodeMarker: null,
        aliases: {},
        showLineNumbers: true,
        noInlineHighlight: false,
      },
    },
  ],
}

import 'prismjs/themes/prism-tomorrow.css'  // コードブロックの見た目を定義するテーマ
import 'prismjs/plugins/line-numbers/prism-line-numbers.css'  // 行数表示用

yarn add gatsby-remark-code-titles

module.exports = {
  plugins: [
    
  ],
}

.gatsby-code-title {
  background: #0d0d0d;
  color: #ccc;
  margin-bottom: -0.65em;
  padding: 0.7rem 1.05rem;
  font-size: 0.8em;
  line-height: 0.2;
  font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
  font-weight: 500;
  border-radius: 8px 8px 0 0;
  display: table;
}

```markdown:title=sample.md
# HelloWorld
```

# HelloWorld

yarn add gatsby-remark-copy-linked-files

module.exports = {
  plugins: [
    `gatsby-remark-copy-linked-files`
  ],
}

yarn add gatsby-remark-smartypants

module.exports = {
  plugins: [
    `gatsby-remark-smartypants`
  ],
}

yarn add gatsby-plugin-google-gtag

module.exports = {
  plugins: [
    {
      resolve: `gatsby-plugin-google-gtag`,
      options: {
        trackingIds: [
          "GA-TRACKING_ID", // Google Analytics / GA
        ],
        pluginConfig: {
          // Puts tracking script in the head instead of the body
          head: false,
        },
      },
    },
  ],
}

yarn add gatsby-plugin-feed

module.exports = {
  plugins: [
    { 
      resolve: `gatsby-plugin-feed`,
      options: {
        // many options ...
      }
    }
  ],
}

yarn add gatsby-plugin-manifest

module.exports = {
  plugins: [
    {
      resolve: `gatsby-plugin-manifest`,
      options: {
        name: `GatsbyJS`,
        short_name: `GatsbyJS`,
        start_url: `/`,
        background_color: `#f7f0eb`,
        theme_color: `#a2466c`,
        display: `standalone`,
      },
    },
  ],
}

yarn add gatsby-plugin-offline

module.exports = {
  plugins: [
    `gatsby-plugin-offline`
  ],
}

{
   resolve: 'gatsby-plugin-manifest',
   options: {
      icon: 'icon.svg',
      cache_busting_mode: 'none'
   }
},
{
   resolve: 'gatsby-plugin-offline',
   options: {
      workboxConfig: {
         globPatterns: ['**/icon-path*']
      }
   }
}

yarn add gatsby-plugin-sitemap

module.exports = {
  siteMetadata: {
    // If you didn't use the resolveSiteUrl option this needs to be set
    siteUrl: `https://www.example.com`,
  },
  plugins: [
    `gatsby-plugin-sitemap`
  ],
}

yarn add gatsby-plugin-robots-txt

module.exports = {
  siteMetadata: {
    siteUrl: 'https://www.example.com'
  },
  plugins: ['gatsby-plugin-robots-txt']
}

yarn add gatsby-plugin-lodash

module.exports = {
  plugins: [
    `gatsby-plugin-lodash`
  ],
}

yarn add gatsby-plugin-react-helmet react-helmet

module.exports = {
  plugins: [
    `gatsby-plugin-react-helmet`
  ],
}

<Helmet title="foo bar" defer={false} />

yarn add gatsby-plugin-typegen

module.exports = {
  plugins: [
    {
      resolve: `gatsby-plugin-typegen`,
      options: {
        emitSchema: {
          'src/__generated__/gatsby-introspection.json': true,
        },
      },
    },
  ],
}