gatsby-remark-vscode
gatsby-remark-vscode copied to clipboard
andrewbranch
Passing arbitrary props directly with code fence options
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!
Hey @andrewbranch
Is there any method to resolve this issue?
Thanks again for your time and for actively maintaining this project!
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 https://github.com/andrewbranch/gatsby-remark-vscode/issues/19, though this won’t get you exactly what you’re asking for.
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!