Get rid of 'pre.language-*`

We have a lot of CSS in the main bundle just for pre.language-*. In fact, look at the first 46 lines of https://gist.github.com/peterbe/735c93ff7b16eaefd463d36fb2a5147a which is a Prettier formatting of today’s main CSS bundle.

We don’t use class=language-* anywhere in the core Yari product. If you should be using class="brush: * instead.

The language-* is something you get from Markdown I think. Fenched code snippets with a block becomes <pre class="language-javascript"> or something like that.

However, we have a lot of cases where the language-* still comes up in our HTML. On https://developer.mozilla.org/en-US/docs/Learn/Accessibility/HTML for example, source has this:

<pre class="brush: html example-good line-numbers language-html">&lt;h1&gt;My heading&lt;/h1&gt;
&lt;p&gt;This is the first section of my document.&lt;/p&gt;
...

In this case, the language-html is actually preventing the example-good to work.

I think we should remove all the CSS that precludes to language-* from the SCSS. And any HTML that’s still in the raw HTML sources should get cleaned up.

[peterbe]

Yeah, I see it now. It’s in /node_modules/prismjs/themes/prism.css I’ll investigate what if any new actually need from prism/themes/*.css and how it coincides with our own overrides.

[schalkneethling]

@peterbe there is this one minimalist https://github.com/mdn/mdn-minimalist/blob/2198bb250990b847c5eccd81b505117b56a295f3/sass/atoms/_primsjs.scss

That is to override some colors in Prismjs to improve the a11y of the colors used. I doubt that is what you are referring to her so, perhaps all the CSS you are seeing comes directly from Prismjs’ stylesheet?