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
\```
<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) => (
<TextInput
ref={ref}
aria-label={label}
className={`bg-background text-header placeholder-main ${className}`}
onChange={onChange}
placeholder={placeholder}
type="text"
value={value}
/>
)
)
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>