Can we support rendering of pug templates?

hamishwillee commented 2 years ago

Summary

There are some pug template code blocks in https://developer.mozilla.org/en-US/docs/Learn/Server-side/Express_Nodejs/Displaying_data/LocalLibrary_base_template that are marked as plain because yari doesn't support pug syntax highlighting.

If it were easy and not "costly" to support pug as well that would be good. I am not sure it would be easy/I think it is not supported, but just checking.

This came out of https://github.com/mdn/content/pull/18744

URL

https://developer.mozilla.org/en-US/docs/Learn/Server-side/Express_Nodejs/Displaying_data/LocalLibrary_base_template

Reproduction steps

Open a page, use ```pug to highlight some pug text. Url above is good. It renders as plain.

Expected behavior

Would be nice to render pug if we can

Actual behavior

We can't :-)

Device

Desktop

Browser

Chrome

Browser version

Stable

Operating system

Windows

Screenshot

No response

Anything else?

No response

Validations

[X] I have read the Community Participation Guidelines.
[X] I have verified that there isn't already an issue that reports the same bug to avoid creating a duplicate.
[X] I have checked that this is a concrete bug. For Q&A open a GitHub Discussion.

Josh-Cena commented 2 years ago

w.r.t. Prism highlighting support. Prism has a component for virtually every non-esoteric language, so the only blocker is whether we want to include that in our bundle or not. I wish there's a better workflow to assess the tradeoffs of adding each language. My stance is that we should add every language that ought to be added (e.g. we should have diff, svelte, jsx, etc. as well).

Even better—I wonder if we can code-split by Prism components, so we don't have to worry about bundle size too much.

hamishwillee commented 2 years ago

Ah, you're right it's there: https://prismjs.com/#supported-languages

So let's find out the cost. But honestly, we're talking very few pages of relatively easy to read and parse text with pug. So if the cost is at all significant it isn't worth paying.

Josh-Cena commented 2 years ago

node_modules/prismjs/components/prism-pug.min.js is 2882 characters long—that's 2.8KB, roughly the same size as markup (which html maps to) and 60% of js. I don't know what the bundle size of Yari is—comparatively speaking pug is definitely a big chunk.

Still, from a semantic point of view, I'd say marking code blocks as languages Yari doesn't support is strictly better than marking it as plain or marking it as some random language. It means we don't have to update it again if Yari updates it some time in the future—also, in VSCode, if you supply the right language key, you get the right highlighting: