gatsby-remark-prismjs: How to extend languages?

[atomiks]

Summary

I like to extend Prism with more tokens to allow for more granular highlighting (like VS Code's TextMate grammars). Can this be done with Gatsby?

Basic example

import Prism from 'prismjs'

Prism.languages.insertBefore('javascript', 'punctuation', {
  definition: {
    pattern: /[a-z]\w*(?=:)/i,
    lookbehind: true,
    alias: 'property',
  },
  access: {
    pattern: /(\.\s*)[a-z_$][\w$]*/i,
    lookbehind: true,
    alias: 'property',
  },
  dom: {
    pattern: /\b(?:window|document|navigator|performance|localStorage)\b/,
    alias: 'variable',
  },
  console: /\bconsole\b/,
  'class-name': {
    pattern: /\b[A-Z][A-Za-z0-9_$]+\b/,
    alias: 'variable',
  },
})

[sidharthachatterjee]

Hey @atomiks

If you're using gatsby-remark-prismjs then it looks like it doesn't expose access to the internal instance of Prism and therefore this won't be possible with it.

You could fork from gatsby-remark-prismjs if you're interested and add the code above in https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby-remark-prismjs/src/load-prism-language.js

[jakallergis]

@sidharthachatterjee Do you know if there are any plans for exposing access to the internal Instance of Prism? Thanks.

[gatsbot[bot]]

Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 30 days of inactivity. It’s been at least 20 days since the last update here.

If we missed this issue or if you want to keep it open, please reply here. You can also add the label "not stale" to keep this issue open!

Thanks for being a part of the Gatsby community! 💪💜

[david-nossebro]

I am working on a pull-request.

[david-nossebro]

I have made a pull-request #11932. The approach is not to expose the Prism instance, but give the opportunity to configure 'gatsby-remark-prismjs' in the 'gatsby-config.js' file. My pull-request also only let the user add, change or extend the language definition. There is no way of defining input to the 'insertBefore' method, but that could be added if needed.

What is the exact function you try to achieve @atomiks ?

[atomiks]

@david-nossebro I want to add more tokens to add more granular syntax highlighting so it's close to my VS Code theme:

I am monkey-patching the file in node_modules for now:

• Gets run before dev: https://github.com/atomiks/tippyjs/blob/59c2cdde16275ef624cccbc4e1246d954b07f0fd/website/src/monkey-patch.js
• The code which gets appended to the end of the prism.js file in node_modules: https://github.com/atomiks/tippyjs/blob/59c2cdde16275ef624cccbc4e1246d954b07f0fd/website/src/prism-extensions.js

[gatsbot[bot]]

Hey again!

It’s been 30 days since anything happened on this issue, so our friendly neighborhood robot (that’s me!) is going to close it.

Please keep in mind that I’m only a robot, so if I’ve closed this issue in error, I’m HUMAN_EMOTION_SORRY. Please feel free to reopen this issue or create a new one if you need anything else.

Thanks again for being part of the Gatsby community!

[david-nossebro]

@atomiks my pull request is now merged. I have included the possibility to define the insertBefore method as well, so it should solve your problem.