Skip to content
👭 Transforms TypeScript code blocks to JavaScript and inserts them into the page
TypeScript JavaScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github/workflows
src
.eslintrc
.gitignore
.npmignore
LICENSE
README.md
example.gif
jest.config.js
package-lock.json
package.json
tsconfig.json

README.md

gatsby-remark-typescript

Build Status

Transforms TypeScript code blocks to JavaScript and inserts them into the page

Installation

npm install gatsby-remark-typescript

Usage

// gatsby-config.js
module.exports = {
  plugins: [
    {
      resolve: 'gatsby-transformer-remark',
      plugins: ['gatsby-remark-typescript']
    }
  ]
};

Options

By default, gatsby-remark-typescript will visit all TypeScript code blocks in your site and insert the transformed and formatted JavaScript after each of them. You can affect this default behaviour and formatting settings using options supplied to this plugin.

prettierOptions

An object of options supplied to prettier.format when formatting the JS output. See Prettier's docs for more information.

// gatsby-config.js
module.exports = {
  plugins: [
    {
      resolve: 'gatsby-transformer-remark',
      options: {
        plugins: [
          {
            resolve: 'gatsby-remark-typescript',
            options: {
              prettierOptions: {
                semi: false,
                singleQuote: false
              }
            }
          }
        ]
      }
    }
  ]
};

wrapperComponent (MDX only)

A string representing the name of the React component used to wrap code blocks that you wish to transform. This feature allows the author to choose which TypeScript code blocks to transform by wrapping them in some JSX.

// gatsby-config.js
module.exports = {
  plugins: [
    {
      resolve: 'gatsby-plugin-mdx',
      options: {
        gatsbyRemarkPlugins: [
          {
            resolve: 'gatsby-remark-typescript',
            options: {
              // configure the JSX component that the plugin should check for
              wrapperComponent: 'CodeBlockWrapper'
            }
          }
        ]
      }
    }
  ]
};

In your MDX file, surround code blocks that you want to be transformed with their own pair of opening and closing JSX tags. The name of the component that you use here must match the wrapperComponent option that you passed along to this plugin.

import {CodeBlockWrapper} from '../components';

<CodeBlockWrapper>

```ts
// this code block will be transformed
```

</CodeBlockWrapper>

```ts
// this one will be ignored
```

Your wrapper component could include some additional logic, like allowing users to switch between the original and transformed code blocks. Check out Apollo's MultiCodeBlock component for an example of how to accomplish this.

Example wrapper component

License

MIT

You can’t perform that action at this time.