search

andrewbranch / gatsby-remark-vscode

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

Passing arbitrary props directly with code fence options #149

Open kelvindecosta opened 3 years ago

kelvindecosta commented 3 years ago

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 commented 3 years ago

Hey @andrewbranch

Is there any method to resolve this issue?

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

andrewbranch commented 3 years ago

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.

kelvindecosta commented 3 years ago

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 commented 3 years ago

For reference: mdx-js/mdx#702