apify-docs
apify-docs copied to clipboard
apify
fix: landing pages syntax highlighting [internal]
reported here: https://apify.slack.com/archives/C0L33UM7Z/p1726736971578239
I've found out that it started with this commit https://github.com/apify/apify-docs/pull/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.
If you have an idea of how to fix this more gently please go ahead and try it or suggest it here.
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).
@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?
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.
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 :)
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).
@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 ✌️
We will try to apply some styling to the native component to make it look more similar to ours in the next sprint.
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.