feature (content): Using Shiki Transformers

[rishi-raj-jain]

Currently, Shiki is integrated into the system (which is awesome), but highlighting a particular line as insertion and deletion with specific colors is missing. It's a good to have.

[rishi-raj-jain]

Being addressed in #1724.

[rishi-raj-jain]

JS: https://github.com/neondatabase/website/pull/1724/files#diff-09b768860037e61d5b8f3b59dffc714d602d84d23886eeb513e520c45aae274d
CSS: https://github.com/neondatabase/website/pull/1724/files#diff-24af49ca5abe8cb68bafd6b913d714250978eec3978bb9fa35a2f9c097eaaf91

[saimonkat]

@rishi-raj-jain JS implementation looks good and according the shiki transformers docs 👏

Regarding CSS I'd like to:

• move it up to the @layer components
• adjust scss classes
• add before items as + and —
• update colors for dark theme support

.has-diff code .line {
  @apply pl-6;

  &.diff {
    &.add {
      @apply bg-code-green-1/10 before:absolute before:left-2 before:text-code-green-1 before:content-['+'];
    }
    &.remove {
      @apply bg-code-red-1/10 before:absolute before:left-2 before:text-code-red-1/50 before:content-['—'];
    }
  }
}

[saimonkat]

@rishi-raj-jain I also noticed that we need to update our copy button with styles and functionality in case of transformers.

Styles

It's good for dark theme

But has a lack of background for light theme

Functionality
According the functionality on original shiki transformers page, copy button shouldn't copy removed lines of code. I guess we need to improve it in the same way

If you want me, I can help you with this, uploading my commit

[rishi-raj-jain]

@saimonkat

Appreciate your detailed review.

Yes, it'd be great to have help from you!

[rishi-raj-jain]

Would you be open to committing the changes as you suggested earlier as well? I'm happy to as well.

[saimonkat]

@rishi-raj-jain ok sure, I'll commit my updates now.

Copy button would take extra time by the way, but I'll work on this too.

[rishi-raj-jain]

Thank you, @saimonkat!

[saimonkat]

@rishi-raj-jain updated styles for highlighting and fix for copy button in #1724.

There is only one bug left, removed line of code provides empty line in result of copying:

Hope you could help me to take a look at this commit 8b55b94

[rishi-raj-jain]

Taking a look now!

[rishi-raj-jain]

Added a fix, please review @saimonkat.

[saimonkat]

@rishi-raj-jain Thanks! I'm not home now, but overall looks like a good fix overall by the code 🔥 I'll review closer when I'm back home

[saimonkat]

Hey @rishi-raj-jain your fix looks really good and works good as well, thank you!

I just optimized it a little bit and I think we're ready!

[rishi-raj-jain]

@saimonkat Thank you!

I've simplified it even further: 92f6c2e.

Feel free to drop an approving review for it.