[wesbite] Remove duplicate MarkdownElement component

[danilo-leal]

• I have followed (at least) the PR section of the contributing guide.

This PR is a continuation of #42022.

• removed the duplicate MarkdownElement component, whose sole purpose was to strip away the "block" design from the code block so it worked properly within the marketing pages showcase section
• regardless, we still need something to toggle the styles on and off, so I added a plainStyle prop to the HighlightedCode component, which now controls how the pre element is rendered. That concentrates these different design options in a single component, thus not having two MarkdownElement components with essentially the same purpose

This has been explored in #42011 and it seemed to make sense there!

[mui-bot]

Netlify deploy preview

https://deploy-preview-42028--material-ui.netlify.app/

Bundle size report

No bundle size changes (Toolpad)
No bundle size changes

Generated by 🚫 dangerJS against 2e71ae3

[Janpot]

Looks good, same comment as in #42011 (comment)

The highlight seems to deal badly with horizontal overflow:

And this is probably not in scope for this PR, but I noticed some layout shifts on the homepage when switching between examples, once to go to the loading state, and a second time when rendering the example:

Screen.Recording.2024-04-29.at.11.34.21.mov

[danilo-leal]

I can maybe tackle these on a separate PR? There's another PR #38604 tackling the homepage product suite section that might tackle the layout shift a bit. And the code highlight there might be trickier to tackle, I imagine it'll require wrapping the code lines using Prism, somehow.

[Janpot]

And the code highlight there might be trickier to tackle, I imagine it'll require wrapping the code lines using Prism, somehow.

Perhaps we can use a plugin for that?

[danilo-leal]

That sounds like a good idea! And it'd tackle a docs-infra issue (#41509) I had opened a while ago, too :)

[danilo-leal]

However, I assume the bad thing about going with the "native Prism" option is losing the animation. Either way, let me know if this PR is in good shape to be merged, and then we can continue discussing these follow-up improvements elsewhere! 😬

[Janpot]

Looks good 👍

[Janpot]

However, I assume the bad thing about going with the "native Prism" option is losing the animation.

Personally, I wouldn't mind. The way the plugin does highlighting is more familiar to how code editors highlight, and the smooth scroll when scrolling it into view would be enough visual feedback for me. In any case, even if we want to keep the animation, building this as a prisma plugin could give us access to the internals we need for a stable implementation.

[michaldudak]

I can see that the no-breaking-changes-in-shared-packages principle will be pretty hard to enforce...
@Janpot, @mnajdova