fix: landing pages syntax highlighting [internal]

[webrdaniel]

reported here: https://apify.slack.com/archives/C0L33UM7Z/p1726736971578239

I've found out that it started with this commit #1176

The issue was with package-lock, so I've tried to use the previous package-lock in the current master and update it with npm i. Looks like it is fixed but there are quite a lot of changes, so I hope it didn't break anything.

We decided to use the native Docosaurus CodeBlock component. It looks quite different than our component, so it needs some restyling to make it look more similar.

[github-actions]

⚠️ Pull Request Tookit has failed!

Pull request is neither linked to an issue or epic nor labeled as adhoc!

[B4nan]

reverting dependency updates like this is not really a fix, this will get broken again quite easily. if something, you should find what dependency caused this and pin its version instead of altering lockfile by hand. even better, find a way to make it work with the latest versions of our dependencies - that is the proper fix to me.

[barjin]

The new changes are reusing the CodeBlock from the Docusaurus theme that has the code highlight working. The design is slightly different.

before	after

The reason for the broken highlight is still unknown; this also broke the ReactSyntaxHighlighter in the search modal preview panel (right side).

[webrdaniel]

@barjin Thanks for looking into it
@hanatsai Is it OK if we use the Docusaurus CodeBlock that has a different design (demonstrated in the "after" screenshot), to make the highlight work?

[B4nan]

Is it OK if we use the Docusaurus CodeBlock that has a different design (demonstrated in the "after" screenshot), to make the highlight work?

We agreed with Jindra that we will try to make it look the same. But we have a better question - do we want all the other code blocks (outside of such landing pages, so in the actual docs content) to look the same as those? Since we will be restyling it to look the same on the landing page, we can as well do it globally for all the codeblocks.

[hanatsai]

Hi, would be nice to make it look the same globally, if you are facing some codeblock that our design system doesn't support or doesn't have an explanation from here, please ask the design team or me, we'll update the design! Thank you :)

[B4nan]

Ok good, I also thought it would be nice to have it unified (and in such case it makes a lot of sense to just restyle the native docusaurus component instead of using a custom one).

[jbartadev]

@B4nan Cool, our team can take care of the unification of the native docusaurus component with the shared one if you need to - you have a lot of your agenda already ✌️

[webrdaniel]

We will try to apply some styling to the native component to make it look more similar to ours in the next sprint.

[webrdaniel]

Added themes that are close to the ones that we use in the console and on the web. (The light one is the default Prism theme, and it was missing in the prism-react-renderer, so I had to define it manually. The dark one is night-owl with an edited background color).
Also updated the styles of the code block to be similar to the one we have. Although there are still some differences, it's difficult to change those only by rewriting CSS.

[hanatsai]

Looks perfect!!!!

[B4nan]

i wonder if this actually works on a production build, probably not

[webrdaniel]

Good catch. It's hard to select the classes but this should do the trick.