pomber / gatsby-remark-import-code

Gatsby remark plugin to import code from a file into code blocks

gatsby-remark-import-code

Install

$ npm install gatsby-remark-import-code

Use

Use it together with gatsby-plugin-mdx. In gatsby-config.js:

module.exports = {
  plugins: [
    {
      resolve: `gatsby-plugin-mdx`,
      options: {
        gatsbyRemarkPlugins: [`gatsby-remark-import-code`]
      }
    }
  ]
};

It transforms md/mdx code blocks from this:

```js file=./hello-world.js
```

into:

```js
function helloWorld() {
  return "hello world";
}
```

Related

• gatsby-remark-embed-snippet

gatsby-remark-import-code's Issues

No Syntax Highlighting

When using this plugin the syntax highlight doesn't work, because the meta tag includes the language i.e. jsx and the filename.
For example the following markdown:

### Components

We will create all of the components in the following `src/components` folder.
First, let's create the `Input.jsx` component for the text input, which looks something like this:

```jsx file=./source_code/src/components/Input.jsx
\```

becomes this:

<div class="gatsby-highlight" data-language="jsxfile=./source_code/src/components/input.jsx"><pre class="language-jsxfile=./source_code/src/components/input.jsx"><code class="language-jsxfile=./source_code/src/components/input.jsx">import React from "react"
import tw from "twin.macro"

const Input = React.forwardRef(
  ({ className, label, onChange, placeholder = "", value }, ref) =&gt; (
    &lt;TextInput
      ref={ref}
      aria-label={label}
      className={`bg-background text-header placeholder-main ${className}`}
      onChange={onChange}
      placeholder={placeholder}
      type="text"
      value={value}
    /&gt;
  )
)

const TextInput = tw.input`inline px-2 h-full w-full text-left inline text-lg transition duration-300`

export default Input</code></pre></div>

The data-language="jsxfile=./source_code/src/components/input.jsx" stops prismjs from being able to highlight properly. You also get this error in Gatsby when building the site warn unable to find prism language 'jsxfile=./source_code/src/components/input.jsx' for highlighting. applying generic code block.

I think it's an easy fix just set the node.meta tag to empty if it includes a file. Is there another way around this?

Thanks