How pass custom props to code blocks?

[allangrds]

I'm trying to pass some properties to the code, to treat it visually when rendered. I'm using a lib mdx-bundler wich uses mdx(https://github.com/kentcdodds/mdx-bundler/pull/152/files#).

When I try to get filename from node - creating a remark plugin - I don't find this field anywhere.

index.mdx

'''js filename=index.js
var num1, num2, sum
num1 = prompt('Enter first number')
num2 = prompt('Enter second number')
sum = parseInt(num1) + parseInt(num2) // "+" means "add"
alert('Sum = ' + sum) // "+" means combine into a string "+" means combine into a string "+" means combine into a string
'''

Element tree:

{
  type: 'element',
  tagName: 'code',
  data: {
    hName: 'code',
    hProperties: { className: 'language-js' },
    hChildren: [
      [Object], [Object], [Object], [Object],
      [Object], [Object], [Object], [Object],
      [Object], [Object], [Object], [Object],
      [Object], [Object], [Object], [Object],
      [Object], [Object], [Object], [Object],
      [Object], [Object], [Object], [Object],
      [Object], [Object], [Object], [Object],
      [Object], [Object], [Object], [Object],
      [Object], [Object], [Object], [Object],
      [Object], [Object], [Object], [Object],
      [Object], [Object], [Object], [Object],
      [Object], [Object]
    ]
  },
  properties: { className: 'language-js' },
  children: [{...some children}]

[wooorm]

If you have elements, you are not making a remark plugin, but a rehype plugin.
If there are h* fields on elements in rehype, something is going horribly wrong. Those fields should be available on mdast (markdown, remark) nodes, they should be gone on hast (HTML, rehype) nodes.

If you want to parse the meta string on fenced code as if it were JSX attributes, then there is already a plugin for that: https://github.com/remcohaszing/remark-mdx-code-meta.

You seem to be making your own plugin to do syntax highlighting.
A good reference for that is: https://github.com/wooorm/starry-night#example-integrate-with-unified-remark-and-rehype.
In hast, when coming from markdown, <code> element have node.data.meta, which contains the meta string. In this example, that would be the node in the head variable.