Add divs around individual tags and give them css classes specific to the tag used

[lriggle-strib]

Search Terms

CSS classes, tag specific css, styles, css, themes

Problem

When building/customizing styling in documentation, there may be tags that you want to style differently than others because of the kinds of info they represent. This allows a team to customize to their styles to achieve their documentation goals, rather than building a custom theme to achieve similar effects.

For example, let's say a team decides to utilize a custom tag like @todo in their documentation, indicating an action that is still waiting to be accomplished. Being able to single out tags labeled as todo with distinct styling gives the team an opportunity to increase/decrease visibility on this information without having to do more than add a custom stylesheet to the config.

Additionally, wrapping individual tags in a div groups content together in a way that would allow a team to utilize pseudo classes like :nth-child or :first-of-type, giving more flexibility in styling pages.

Suggested Solution

There may be additional places where this can be utilized, but the one that is working best for my team is in themes/default/partials/comment.tsx, update the tag.map return from:

return (
    <>
        <h4 class="tsd-anchor-link">
            <a id={anchor} class="tsd-anchor"></a>
            {name}
            {anchorIcon(context, anchor)}
        </h4>
        <Raw html={context.markdown(item.content)} />
    </>
);

to something like this:

return (
    <>
        <div class={`tsd-tag-${name.toLowerCase()}`}>
            <h4 class="tsd-anchor-link">
                <a id={anchor} class="tsd-anchor"></a>
                {name}
                {anchorIcon(context, anchor)}
            </h4>
            <Raw html={context.markdown(item.content)} />
        </div>
    </>
);

The h4 and markdown info has been wrapped in a div tag with a css class derived from the tag being processed. If no styling is defined for that specific tag, then it just renders like any other.

[Gerrit0]

I like this idea, I don't think I'd want to lowercase the tag name, but otherwise am happy to adopt it as is. PR welcome!