How to add custom plugin/component having html data using milkdown.dev?

[saksham9312]

I'm new to milkdown.dev, though I have gone through the doc, but not able to understand how to add a custom component.

Here are the details:

I want to render a component having structure like this (basically a code snippet component with html data):

<WalkThruSnippet path="/controllers/helper_functions/whatsapp.js" line="8">
```javascript
const sendMessage = async function(message, senderIDsd){
    try{
        await twilio.messages.create({
            to: senderID,
            body: message,
            target: false,
            from: 'whatsapp:+1415523908886'
        })
    }catch(err){
        console.log("Error in sending message on whatsapp", err);
    }
}
</WalkThruSnippet>

And it should render the snippet in milkdown editor like this:

Please give a step by step answer as I'm new to it and maybe resources that I can look into it.

Thanks for your help!

[solos]

You can use the code block plugin. https://milkdown.dev/docs/api/component-code-block