Extensions not working (maybe)

[Dajamante]

Hi! I feel really rude to open an issue, I just have a question! The importation of extensions does not seem to work (for me):

  {
            resolve: `gatsby-remark-vscode`,
            ... some default options ...
              extensions: [
                {
                  identifier: "aaron-bond.better-comments",
                  version: "2.0.5",
                },
                {
                  identifier: "oderwat.indent-rainbow",
                  version: "7.4.0",
                },

              ]            
            ... some default options ...
          },

Is it something I am doing wrong?

[totsteps]

I think you are using this as a standalone plugin which is wrong. Instead this plugin should be used with for example gatsby-transformer-remark like so.

In case I am wrong please post your gatsby-config.js file's content.

[Dajamante]

Thank you very much for your reply ! ❤️ I use it in there:

 extensions: [],         // Extensions to download from the marketplace to provide more languages and themes

Here is my config. Maybe it should be in another place?

const path = require("path")

module.exports = {
  siteMetadata: {
    title: `Wrong Answer`,
    author: `me`,
    description: `A personal blog with programming puzzles`,
    siteUrl: `https://nifty-boxer-dog.netlify.com/`,
    social: {
      twitter: `bestcataccount`,
      facebook: `obertkollare`,
    },
  },
  plugins: [
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `src`,
        path: `${__dirname}/src/`,
      },
    },
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        path: `${__dirname}/content/blog`,
        name: `blog`,
      },
    },
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        path: `${__dirname}/content/assets`,
        name: `assets`,
      },
    },
    {
      resolve: `gatsby-transformer-remark`,
      options: {
        plugins: [
          {
            resolve: `gatsby-remark-images`,
            options: {
              maxWidth: 590,
            },
          },
          {
            resolve: `gatsby-remark-responsive-iframe`,
            options: {
              wrapperStyle: `margin-bottom: 1.0725rem`,
            },
          },
          {
            resolve: `gatsby-remark-vscode`,
            // All options are optional. Defaults shown here.
            options: {
              colorTheme: "Monokai", // Read on for list of included themes. Also accepts object and function forms.
              wrapperClassName: "pre", // Additional class put on 'pre' tag
              injectStyles: true, // Injects (minimal) additional CSS for layout and scrolling
              extensions: [
                {
                  identifier: "aaron-bond.better-comments",
                  version: "2.0.5",
                },
                {
                  identifier: "oderwat.indent-rainbow",
                  version: "7.4.0",
                },
              ], // Extensions to download from the marketplace to provide more languages and themes
              languageAliases: {}, // Map of custom/unknown language codes to standard/known language codes
              replaceColor: x => x, // Function allowing replacement of a theme color with another. Useful for replacing hex colors with CSS variables.
              getLineClassName: ({
                // Function allowing dynamic setting of additional class names on individual lines
                content, //   - the string content of the line
                index, //   - the zero-based index of the line within the code fence
                language, //   - the language specified for the code fence
                codeFenceOptions, //   - any options set on the code fence alongside the language (more on this later)
              }) => "",
              // Absolute path to the directory where extensions will be downloaded. Defaults to inside node_modules.
              extensionDataDirectory: path.resolve("extensions"),
              logLevel: "error", // Set to 'warn' to debug if something looks wrong
            },
          },
          {
            resolve: "gatsby-remark-emojis",
            options: {
              // Deactivate the plugin globally (default: true)
              active: true,
              // Add a custom css class
              class: "emoji-icon",
              // Select the size (available size: 16, 24, 32, 64)
              size: 64,
              // Add custom styles
              styles: {
                display: "inline",
                margin: "0",
                "margin-top": "1px",
                position: "relative",
                top: "5px",
                width: "25px",
              },
            },
          },
          `gatsby-remark-copy-linked-files`,
          `gatsby-remark-smartypants`,
        ],
      },
    },
    `gatsby-transformer-sharp`,
    `gatsby-plugin-sharp`,
    {
      resolve: `gatsby-plugin-google-analytics`,
      options: {
        //trackingId: `ADD YOUR TRACKING ID HERE`,
      },
    },
    `gatsby-plugin-feed`,
    {
      resolve: `gatsby-plugin-manifest`,
      options: {
        name: `Gatsby Starter Blog`,
        short_name: `GatsbyJS`,
        start_url: `/`,
        background_color: `#ffffff`,
        theme_color: `#663399`,
        display: `minimal-ui`,
        icon: `content/assets/gatsby-icon.png`,
      },
    },
    `gatsby-plugin-offline`,
    `gatsby-plugin-sitemap`,
    `gatsby-plugin-react-helmet`,
    {
      resolve: `gatsby-plugin-typography`,
      options: {
        pathToConfigModule: `src/utils/typography`,
      },
    },
  ],
}
//might use in the future `gatsby-plugin-google-fonts`

[totsteps]

I am sorry I misunderstood your question. Your gatsby-config looks fine. It may be the case that you get an error because of rate limit. If that's the case you need to wait until the server stops blocking download requests.

[Dajamante]

Is there anything I should do to limit the rate limit?

[totsteps]

Is there anything I should do to limit the rate limit?

There's nothing you can do about the rate limit because that's handled by the server.

Since most VSCode themes are open-source you can clone the repo and build it and copy the build over to extensions directory(in your case).

Here are the links to both the repo's: better-comments and vscode-indent-rainbow

I think you can close this issue.

[andrewbranch]

I feel really rude to open an issue, I just have a question!

Questions are welcome! 😄

First, you should delete all the options you’re not using. It looks like you’ve copied and pasted all of them from the README.

It may be the case that you get an error because of rate limit.

If rate limiting prevented the successful install of an extension, the build would fail. You haven’t told us what the symptoms of your problem are. Are builds failing, or are you just not seeing the syntax highlighting you expect?

---

Edit: the real answer, it seems, is that neither of these VS Code extensions are syntax themes, despite their functionality of adding color to the editor. This is expected behavior.

[Dajamante]

Hi! ! Yes, the build works. But if it is expected behavior, is there a way to implement those options?

[andrewbranch]

This plugin isn’t interested in supporting extensions that aren’t themes. You could probably implement a similar effect yourself with the getLineClassName option.

[Dajamante]

Ok, I get it. Is it a way to make the language for the code snippets visible, on the top of the code? Like they do in Gatsby?

[andrewbranch]

Yep, I know @janosh has done that: https://janosh.io/blog/use-dark-mode

[Dajamante]

That's so neat! But how?

[janosh]

@Dajamante Take a look here.

[Dajamante]

@janosh @andrewbranch you are two stars!

[Dajamante]

@janosh a last question: (I started react 2/3 weeks ago so it's a steeeeeep curve): ~where do I create global styles.js ? Maybe I only need to import const languageTags into the vscode options? ~

Edit: I see it's in utils in src. I will try and hope I won't have many errors :D! Thank you a lot!

[janosh]

I'm using styled-components' createGlobalStyle API. This creates a React component which I import in Global.js which is the layout component that functions as a template for all my site's pages. You don't need to adopt styled-components in particular if you're not familiar with it yet but some CSS-in-JS library is probably necessary if you want to adopt the way I'm adding these language tags.

[Dajamante]

First, thank you very much, I really appreciate that you take the time to explain! I have been trying to solve that for the whole time I was implementing the site. So ideally I should be able to create a .css file for my template blog-post.js (since this is there I have the template for blog posts)? Would it work as a css in js?

[janosh]

Would it work as a css in js?

Certainly, although you'd have a .js rather than a .css file in that case.

If you want to use bare-bones CSS you should probably take a look at how Gatsby implements these language tags. Last time I checked, they were using CSS only. I think Lekoarts is also using just CSS and the code for his site is probably easier to search than Gatsby's.

[Dajamante]

Sorry, I expressed myself wrongly. I mean: would it work as a .css connected to a .js file, for example the template page for blog posts? Or shall I need to make a global .css file? But I think you understood since you recommended Lekoarts's site. Looks like he is using TypeScript if I am not mistaken. Also, shall I choose another mean of communication instead of flooding that thread which is closed (I don't know the protocols :)!)

[janosh]

Also, shall I choose another mean of communication instead of flooding that thread which is closed (I don't know the protocols :)!)

Yes, I was going to mention that this is perhaps getting a little off-topic. But you can of course open an issue with questions against whichever repo you end up going with.

But I think you understood since you recommended Lekoarts's site. Looks like he is using TypeScript if I am not mistaken.

Yes, he is writing much of his code in TypeScript these days although his portfolio site is still written in pure JavaScript. I was wrong about the CSS only though, he's now using an approach that's more akin to mine and based on styled-components as well.

And here's Gatsby's more verbose implementation (also JS).

[LekoArts]

I got contacted by email and lead the discussion to here, as it would be unrelated here: https://github.com/gatsbyjs/gatsby/issues/17439