Passing arbitrary props directly with code fence options

[kelvindecosta]

Hey!

I would like to pass arbitrary props directly to the pre components.

```python { title: "main.py" }
print("Hello, world")
```

In the above example, the pre component would have the title prop set to "main.py".
This simple use case provides a tooltip for the generated code block.

Is this possible with the current version of the plugin?

Any help is appreciated!
Thank you!

[kelvindecosta]

Hey @andrewbranch

Is there any method to resolve this issue?

Thanks again for your time and for actively maintaining this project!

[andrewbranch]

Sorry for missing the first notification. It’s not easy to do right now. I’ve just learned that I can probably switch from stringified HTML nodes to an embedded HTML AST, which would make this sort of thing much easier, though it will be a bit of a refactor, and as you’ve noticed, I don’t have the bandwidth to do anything major on this plugin at the moment. One workaround would be to use the yet-undocumented GraphQL API to render the code blocks yourself, though this is probably way overkill for your scenario. There’s an example here: https://github.com/andrewbranch/gatsby-remark-vscode/blob/master/examples/example-site/src/templates/react-blog-post.js

Another idea would be to use another plugin before gatsby-remark-vscode, as discussed in #19, though this won’t get you exactly what you’re asking for.

[kelvindecosta]

Thanks for the response!

I am already using gatsby-plugin-mdx and passing a customized CodeBlock component, which wraps the result of gatsby-remark-vscode.
Like you suggested, I think I could use the GraphQL API to render the blocks and derive custom props (like title) by doing so.

Before discovering this project, I tried rendering code blocks using highlightjs and refractor.
Those implementations produced results that weren't as polished as the ones produced by remark-vscode.

Thanks again for your response!

[kelvindecosta]

For reference: mdx-js/mdx#702