[Feature Request] Add ability to change padding on langtag

[samhsabin]

Right now the default padding for langtag is massive, making it more of a full corner div than a "tag". Would be nice if we could adjust the padding and distance from the top right so we could make it appear like a tag.

[metonym]

What is your current workaround?

[samhsabin]

I just to not style it at all because I couldn't create something I was happy with

[metonym]

A workaround is to use global CSS to override the style. I'll look into adding a style prop to make this customization easier.

<style>
  :global([data-language="css"]:after) {
    padding: 0.5rem !important;
  }
</style>

[samhsabin]

Thank you for looking into it 🙏

[metonym]

@samhsabin v7.5.0 now supports the --langtag-padding prop. You can try using that to override the default padding value.

<HighlightAuto
  {code}
  langtag
  --langtag-padding="0.5rem"
/>

[samhsabin]

Thanks! You're a legend for adding that so quickly! I'll give it a test run

[samhsabin]

It works perfectly! I guess I didn’t think things through completely, but in order to make it look like a tag I would need to be able to add margin to the langtag as well, so that I can move it away from the edge, while also maintaining the background. Is there any way you could add a —langtag-margin property as well? If not, I completely understand. Either way, thanks for all your support so far.

[metonym]

@samhsabin I hear you. I exposed the --langtag-top and --langtag-right style props, which controls the positioning of the tag.

Available in v7.6.0.

---

<HighlightAuto
  {code}
  langtag
  --langtag-top="0.5rem"
  --langtag-right="0.5rem"
/>

[samhsabin]

Thanks so much, I’m quite pleased with this! Really love creating such beautiful code highlights.

Here’s my new favorite using this new feature you just released:

<div style="width: 800px; border-radius: 8px; overflow: hidden; margin: 0px; background-color: red;">
    <Highlight language={typescript} {code} langtag 
    --langtag-color={"#798291;"}
    --langtag-background={"#1b1d21;"}
    --langtag-border-radius={"8px;"}
    --langtag-padding={"5px 10px;"}
    --langtag-top={"12px;"}
    --langtag-right={"12px;"} />
</div>

<style>
    :global(pre) {
        margin: 0px;
        padding: 0px;
    }
</style>