GithubHelp home page GithubHelp logo

pomber / gatsby-remark-import-code Goto Github PK

View Code? Open in Web Editor NEW
23.0 2.0 1.0 5 KB

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

License: MIT License

JavaScript 100.00%
remark remark-plugin remarkjs markdown mdx code import gatsby gatsby-plugin-mdx

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

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.