gatsby-transformer-code

Gatsby transformer plugin for code

Usage no npm install needed!

<script type="module">
  import gatsbyTransformerCode from 'https://cdn.skypack.dev/gatsby-transformer-code';
</script>

README

gatsby-transformer-code

Load raw code of files

Install

npm install --save gatsby-transformer-code

Note: You also need to have gatsby-source-filesystem installed and configured so it points to your files.

How to use

In your gatsby-config.js

module.exports = {
  plugins: [
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `examples`,
        path: `./path/to/examples`,
      },
    },
    {
      resolve: `gatsby-transformer-code`,
      options: {
        name: `examples`,
      },
    },
  ],
}

Where the source folder ./path/to/examples contains the example files.

Options

name - required, should be the same with the one from gatsby-source-filesystem.
extensions - optional, only files with supported extensions will be transformed, default to ['js', 'jsx'].
test - optional, regexp identifies which files should be transformed, if provided, extensions will be ignored.

How to query

You can query the nodes using GraphQL, like from the GraphiQL browser: localhost:8000/___graphql.

Regardless of whether you choose to structure your data in arrays of objects or single objects, you'd be able to query your letters like:

{
  allRawCode {
    edges {
      node {
        name
        content
        extension
        instanceName
      }
    }
  }
}