Syntax highlighting breaks Formal Syntax for CSSSyntax

[fiji-flo]

<pre class="brush: css notranslate">{{CSSSyntax}}</pre>

Our syntax highlighting breaks the CSSSyntax macro. It strips the links and explanations. Easiest fix would be fixing the content as this is not highlighted anyhow.

[peterbe]

So the correct fix is to turn that into:

-<pre class="brush: css notranslate">{{CSSSyntax}}</pre>
+{{CSSSyntax}}

?
Do you have a good URL we can test and confirm against?

[fiji-flo]

Yes.
https://developer.mozilla.org/en-US/docs/Web/CSS/max()#formal_syntax

[peterbe]

MOZILLA/MDN/content  main ✔
▶ rg CSSSyntax | wc -l
      78

If it's a simple matter of a bunch of search-and-replace (78 to be exact), let's just do that in the mdn/content and never have to think about it :)

[peterbe]

Note-to-Florian; you can do it to the translated-content repo too now :)

[SebastianZ]

Tried Peter's suggested change locally and it works.

Unfortunately, that also removes the code layout. Therefore it still needs to be wrapped in a <pre> (without the class attribute) to get a proper display.

Sebastian

[SebastianZ]

mdn/content#3163 is meant to fix this issue.

@peterbe There are far more pages affected (exactly 536) because most of them embed the macro using its name in lowercase.

Sebastian

[peterbe]

@fiji-flo Took care of it. He timed a mass-edit of the content with an edit of the KS macro. So now, the KS macro is responsible for doing its own <pre> tag.

I think we can close this once we're certain it made it to prod as expected.

At the time of writing, it's about 1h until the Prod build builds and also at the time of writing, GitHub is having problems with Actions.

[fiji-flo]

#3244 resolves this. Thank you @SebastianZ, weird timing, we fixed it the same day.

[SebastianZ]

#3244 resolves this. Thank you @SebastianZ, weird timing, we fixed it the same day.

Yeah, what a coincidence! But don't worry! It's great this is got fixed now! Thank you!

Sebastian