Fix: code blocks in mdx + issues/868

[muditjuneja]

This PR fixes the following -

• Show more button in Code blocks
• Added a prop to enable/disable Show more button in Code blocls
• Added text wrap to avoid horizontal scroll
• Added a new package that is traversing hast and adding a new property named metaData which is being passed as a prop

Should close - https://github.com/carbon-design-system/gatsby-theme-carbon/issues/868

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
gatsby-theme-carbon	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Mar 2, 2024 10:36pm

[muditjuneja]

Hi @eng618 can you review this PR?

[netlify[bot]]

✅ Deploy Preview for gatsby-theme-carbon ready!

Name	Link
🔨 Latest commit	9ce6a1e29382f1a0f3981c67c9bf252f4887a9d9
🔍 Latest deploy log	https://app.netlify.com/sites/gatsby-theme-carbon/deploys/65e3a93a0e4b5e0009a7cc93
😎 Deploy Preview	https://deploy-preview-1422--gatsby-theme-carbon.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[eng618]

Also take a look at https://gatsby.carbondesignsystem.com/components/code-blocks this is the behavior we should see. Seems like instead of have horizontal scrolling we are automatically wrapping the lines.

Then for the folding one we should have the example of non folding and folding vertically.

[eng618]

Lets add some padding to the show more button so it doesn’t overlap the content.

[muditjuneja]

Lets add some padding to the show more button so it doesn’t overlap the content.

I will do that in another follow up PR. Merging this one now.

[muditjuneja]

Lets add some padding to the show more button so it doesn’t overlap the content.

I will do that in another follow up PR. Merging this one now.

I guess I can't merge. I will make that small change.