Usage for shortcodes

[hrishikesh-k]

Hi!

I'm excited to try Iles for my project and I'm trying to wrap my head around Shortcodes. I'm most likely not doing it right, but I don't see a correct way to do this either.

I'm referring to: https://iles.pages.dev/guide/markdown#override-components-globally. I wish to provide a custom component for the <pre> tag.

I've this in my app.ts:

import {defineApp} from 'iles'
import CustomPre from '~/components/CustomPre.vue'
export default defineApp({
  mdxComponents: {
    pre: CustomPre
  }
})

Now my question is, how do I access the content of the <pre> inside this component? Basically, I am trying to find a way to use the code written in code fences inside the MDX file in the Vue template. How could I go about it?

The documentation mentions we can use custom components, but doesn't mention how to actually access the data. I tried referring to: #33, but props didn't seem to be the correct thing for <pre> at least (there's a high chance I might have done something wrong).

[ElMassimo]

Hi Hrishikesh!

Have you seen this example in the docs site?

The registered Vue components are able to access props, $attrs, and $slots as usual.

If you want the content, try useSlots in scripts setup, <slot>, or $slots in the template.

[hrishikesh-k]

Sorry, I should have checked that.

After spending another hour at this, now I realised that the HTML attribute name is itself the prop name.

So for <pre>, unfortunately there are no attributes. To get the language, I instead had to get the class from its child <code> tag which would have language-* as the class.

[hrishikesh-k]

For future explorers, I was able to get the text inside the <pre> tag like:

<script
  setup>
  import {useSlots} from 'vue'
  const code = useSlots().default()[0].children.match(/<code[^>]*>([\s\S]*?)<\/code>/)[1]
</script>

[ElMassimo]

Thanks for sharing 😃

[lucperkins]

@hrishikesh-k I ran into this same issue and found a nice solution: https://www.npmjs.com/package/remark-mdx-code-meta. You can add this to your remarkPlugins and that exposes all the "meta" material as an object. Here's an example code block:

```js showLineNumbers filename="index.js"

This code block, when used with that Remark plugin, exposes these props:

{
  "showLineNumbers": true,
  "filename": "index.js"
}

So that means you can use props like this and it will work like expected in a Vue component:

defineProps<{
  showLineNumbers?: boolean;
  filename?: string;
}>();

[ElMassimo]

Thanks for sharing 😃

[lucperkins]

One downside I'm now seeing, though, is that this plugin does not expose the language, so the useSlots approach you came up with is still necessary 😦

(to be clear, this is not an issue with îles, which delegates all of this to other tools)