andrewbranch / gatsby-remark-vscode

Gatsby plugin to provide VS Code’s syntax highlighting to Markdown code fences

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Feature request: Option to not use gatsby-remark-vscode for specifc code blocks

mendes5 opened this issue · comments

Currently, I need a way to tell the plugin to not render the VSCode code block in some specific blocks. Is there any way to do this?
If not we could implement something using code fence options plus a function on the gatsby-config object, something like this:

```js{useVSCode: false}
console.log('A')
plugins: [{
        resolve: `gatsby-remark-vscode`,
        options: {
           shouldRenderVSCodeForBlock: ({ useVSCode = true }) => useVSCode;
        }
      }]

I'm open to implementing this if you think it is feasible in the current architecture.

Hey! This is a great idea, and I actually meant to include an option like this now that I have the plugin hooked up to GraphQL (some people might want to query for GraphQL data but not bother with rendering any HTML).

If you’re open to making a PR for this that would be awesome! I think the API should look like something this:

// types.d.ts

interface PluginOptions {
  // ...
  renderCodeBlocks?: boolean | (data: CodeFenceData) => boolean;
}

where if you pass a boolean:

plugins: [{
  resolve: `gatsby-remark-vscode`,
  options: {
    renderCodeBlocks: false
  }
}]

it applies to all code blocks, but if you pass a function:

plugins: [{
  resolve: `gatsby-remark-vscode`,
  options: {
    renderCodeBlocks: ({ parsedOptions }) => !!parsedOptions.useVSCode
  }
}]

it gets run for each block, as in your example. Only difference is the name of the option, and what gets passed as an argument should reuse the CodeFenceData type, which is:

interface CodeFenceData {
  language: string;
  markdownNode: MarkdownNode;
  codeFenceNode: any;
  parsedOptions: any;
}

so the user can access the language and the AST nodes.