fix(code-block): custom MDX code block without layout shift

[Preetiaarya]

This PR fixes the broken styling for code blocks in MDX-rendered blog pages #558

✅ Removed dependency on react-code-blocks
✅ Implemented a custom

 block renderer

✅ Fixed layout shift and preserved scrollable lines

✅ Ensured consistent font, padding, background for code blocks

Screenshort:

[Preetiaarya]

Hello @maanasb01 sir,
I’ve made the changes — please take a look and share any feedback.
Thanks!

[maanasb01]

Hey @Preetiaarya, the changes look good! Can you also try to stylize the code blocks? Please try to keep the style associated with the Uli website's theme. You can take the inspiration from the Tattle's website if you want. Example of a blog page with code blocks: https://tattle.co.in/blog/2025-04-01-feluda-semantic-versioning/.
You can also check out the Theme in the components/atoms/UliCore.jsx to explore the Uli theme.

CC: @aatmanvaidya

[Preetiaarya]

Thanks for the feedback! I’ll style the code blocks to match the Uli theme. Will refer to the Tattle blog and UliCore.jsx for consistency. Will share updates soon!

[Preetiaarya]

Added code block styling matching Uli theme.

Please review and share feedback!

[maanasb01]

Hey @Preetiaarya, in your changes, the CustomCodeBlock that you tried to implement doesn't work. The style you see is due only to the CSS change you made in global.css. With the correct implementation of CustomCodeBlock, it should look something like this:

The key issue is that the syntax on every blog page is incorrect according to the updated Gatsby version.

Instead of doing this in a blog mdx file (current implementation):

import ContentPageShell from "../../components/molecules/ContentPageShell.jsx"

<ContentPageShell>
//Blog content
</ContentPageShell>

We have to change it to this:

import ContentPageShell from "../../components/molecules/ContentPageShell.jsx"

export default function Layout({ children }) {
  return <ContentPageShell>{children}</ContentPageShell>;
}

// Blog content

I had made a change in getting-started-with-aws-copilot.mdx for your reference and pushed it recently in this PR itself. Can you take a reference of that and do that for all the blog pages?

Thanks!

[Preetiaarya]

Hello @maanasb01 ,Thanks for the clarification. I checked the getting-started-with-aws-copilot.mdx example, and I’ll update all the other blog pages with the same implementation.

[Preetiaarya]

Hello @maanasb01, I have updated all the blog pages as per the suggested changes.
Instead of directly wrapping the content with , I have added the Layout function with children just like it was done in getting-started-with-aws-copilot.mdx.
Please review and let me know if any further modifications are required.

[maanasb01]

@Preetiaarya, I think you have not pushed your changes yet. Can you please push them?

[Preetiaarya]

Hello @maanasb01, Earlier my commits were not showing up because the Husky pre-commit hook was failing, so my changes never actually got committed and pushed. I have now committed all the fixes (code snippet handling + blog conflict resolutions) and pushed them to the branch fix/code-block-style. Could you please review the changes now and share your feedback?

[Preetiaarya]

Hello @maanasb01, On the blog page, I replaced the heading with bold text because the heading was breaking the line spacing and didn’t look bold, so it didn’t feel like a proper heading.

[maanasb01]

Hey @Preetiaarya, can you undo your last commit where you have replaced headings with bold text? The headings should resemble headings; currently, with this change, they appear as normal bold text.

[Preetiaarya]

Sure, I’ll revert the last commit and make sure the headings are restored properly.