Can we support rendering of pug templates?

[hamishwillee]

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 mdn/content#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

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

[Josh-Cena]

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]

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]

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:

I don't know if that's what mdn/content#18744 was talking about.

[hamishwillee]

Also see

• Fix or add code block language marking content#19259 which wants nginx and apache
• Marking up code blocks for unsupported languages mdn-community#170 kicked off discussion of how we handle this
• Supported language sets are: https://github.com/mdn/yari/blob/main/build/syntax-highlight.js#L15

I'm not sure how far we can progress things without knowing if languages are a per-page or every-page cost.

[caugner]

Fixed by #6831.