Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Clear tutorial or documentation how to add new language #130

Open
garlen-javier opened this issue Dec 9, 2020 · 11 comments
Open

Clear tutorial or documentation how to add new language #130

garlen-javier opened this issue Dec 9, 2020 · 11 comments

Comments

@garlen-javier
Copy link

garlen-javier commented Dec 9, 2020

The ReadMe or tutorials only tells how to add new themes but there is no clear tutorials how to add new languages, not to mention in only support 55 language compare to prism which is around 250. I would like to add Kotlin and Dart to the languages but I’m not sure how will I map multiple languages to the extension without removing my custom theme.

@andrewbranch
Copy link
Owner

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
Copy link
Author

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
Copy link
Owner

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
Copy link
Author

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
Copy link
Owner

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.

@garlen-javier
Copy link
Author

Cool thanks it is working now!!

@andrewbranch
Copy link
Owner

README still needs some work 😄

@andrewbranch andrewbranch reopened this Dec 11, 2020
@rifqimfahmi
Copy link

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

@yehezkiell
Copy link

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
Copy link

simplenotezy commented Nov 28, 2022

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
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

5 participants