How do I add support for typescript syntax highlighting?

[martinfjant]

So, I really do not get how I am supposed to extend the languages Prism can highlight. Where and how do I add say typescript if I want it to be able to highlight that?

[zachleat]

https://prismjs.com/#languages-list

Language examples are documented here for Markdown, Liquid, and Nunjucks: https://www.11ty.dev/docs/plugins/syntaxhighlight/#markdown-highlighter Most of the examples use js but you can use typescript or ts per the prism doc link above.

[martinfjant]

The problem is, that ts is not instanciated per default (only markup, javascript and clike are). So, when I try to add it as per the documentation, and use it but using ts rather than js in my code fences , I get errors:

[eleventy:default] Language does not exist ts
[eleventy:default] Problem writing Eleventy templates: (more in DEBUG output)
[eleventy:default] > Having trouble rendering liquid (and markdown) template ./src/blog/track.md (TemplateContentRenderError)
[eleventy:default] > Cannot read property 'rest' of undefined (TypeError):

[martinfjant]

Okay, so I changed it to say typescript rather than ts, and it worked. I'm not sure this is a bug with Prism (that lists both ts and typescript as supported) or the plugin. Sorry for taking up time, but this might help someone else in the future perhaps! Thanks for the really fast feedback, by the way! ❤️

[zachleat]

Ah hmm, I believe you did uncover a bug here. I don’t think aliases are quite resolving correctly with the Prism loader

Related:
PrismJS/prism#593
PrismJS/prism#768
PrismJS/prism#972

[zachleat]

Pushed a fix to this, it’ll go up with 3.0.1