Building a Custom Alert

[cgatian]

Can a custom alert type be created with a custom icon and color?

What I need:

> [!UX]  
> Text

I think I'm piecing the README together to achieve this:

1. Create a custom option:

const myOptions: IOptions = {
    alerts: [
        {
            keyword: 'UX',
            icon: '<svg width="16" height="16" viewBox="0 0 16 16"/></svg>',
            title: 'Design Recommendation',
        },
    ],
}

2. To customize the color I would need to do something like this:

const myGithubAlertBuild = (alertOptions, originalChildren) => {
    const alert = {
        type: 'element',
        tagName: 'div',
        properties: {
            className: [
                `markdown-alert-${alertOptions.keyword.toLowerCase()}`,
            ],
        },
        children: [
            ...originalChildren
        ],
    }

    return alert
}

3. Finally, update my CSS to include the appropriate styles.

Sound about right?

[chrisweb]

Yes, both are possible

I did not run your code, but it looks right, I assume you use the markdown-alert-ux class to change the color

[chrisweb]

this is what I do on my blog:

https://github.com/chrisweb/chris.lu/blob/main/next.config.ts#L85

[cgatian]

Awesome thanks