andrewbranch / gatsby-remark-vscode

Gatsby plugin to provide VS Code’s syntax highlighting to Markdown code fences
MIT License
296 stars 27 forks source link

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

Open mendes5 opened 4 years ago

mendes5 commented 4 years ago

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.

andrewbranch commented 4 years ago

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.