Clear tutorial or documentation how to add new language about gatsby-remark-vscode

[garlen-javier]

Ok I tried to follow base on what the ReadMe says.

1. First I install the extension in my gatsby project via:
   npm install mathiasfrohlich/vscode-kotlin

2. Add it in my gatsby-config.js

  {
            resolve: `gatsby-remark-vscode`,
            options: {
              theme: 'Default Dark+', // Or install your favorite theme from GitHub
              extensions: ['Kotlin']  //This is from the name in package.json
            }
  },

Then made a simple script with kotlin as lanugage inside my markdown file:

```kotlin
//Test Script
fun fibonacci(num){
  var a = 1, b = 0, temp;

  while (num >= 0){
    temp = a;
    a = a + b;
    b = temp;
    num--;
  }

  return b;
}

Still the language not detected, am I missing something?

[andrewbranch]

Ah, ok, I guess there is a bug here. The problem is that extension registers both kotlin and koltinscript under the same scope name, which I thought was impossible. Language registrations are stored in a dictionary keyed by scope name, and so kotlinscript is overwriting kotlin. In the meantime, ```kotlinscript or ```kts works. As far as I know, it should work identically since they’re registering under the exact same configuration.

[andrewbranch]

You’re right, the README needs an update. To answer your question though, all it should take is to install the extension and list it in the extensions array. Then any languages that extension contributes should Just Work™ with whatever code fence tags they register (e.g. ```dart or ```kotlin).

[garlen-javier]

I'm confuse where to register these "code fence tags" to be detected by the gatsby-remark-vscode? It is something via alias in gatsby-config or automatically made from the extension developer?

[andrewbranch]

It’s from the extension developer, e.g. here. I do think it’s unfortunate that it’s not easier to find out what the possible strings are, which is why I have #90 on the backlog.

[garlen-javier]

Cool thanks it is working now!!

[andrewbranch]

README still needs some work 😄

[rifqimfahmi]

Thanks @garlen-javier @andrewbranch, was looking for kotlin syntax support for a while. you save my time!

[yehezkiell]

Hi @andrewbranch Im working with gatsby 4 and remark vscode 3.3.1, this still not work in my kotlin code. Im using mdx for blog type

  {
      resolve: `gatsby-plugin-mdx`,
      options: {
        extensions: [".mdx", ".md"],
        remarkPlugins: [
          require("gatsby-remark-vscode").remarkPlugin,
          {
            theme: "Default Dark+",
            extensions: ["Kotlin"],
          },
        ],

```kotlinscript
fun fibonacci(num){
  var a = 1, b = 0, temp;

  while (num >= 0){
    temp = a;
    a = a + b;
    b = temp;
    num--;
  }

  return b;

[simplenotezy]

I also tried adding support for Dart, which unfortunately does not seem to work:

        remarkPlugins: [
          [
            require('gatsby-remark-vscode').remarkPlugin,
            {
              theme: {
                default: 'Material Theme',
                // dark: '',
              },
              inlineCode: {
                marker: '•',
                theme: {
                  default: 'Material Theme',
                  // dark: 'Default Dark+',
                },
              },
              extensions: [`${__dirname}/vendor/material-theme.vsix`, 'Dart'],
            },
          ],

Also tried simply:

  remarkPlugins: [
    [
      require('gatsby-remark-vscode').remarkPlugin,
      {
        extensions: ['Dart'],
      },
    ],
  ]

But it bugs out with error:

Error: Cannot find module 'Dart/package.json'

Using ^3.3.0

[simplenotezy]

@andrewbranch would you have any suggestions? Stumbled upon #69 - not sure if it's related