Changing syntax highlighting language

[andrewsemchism]

I am using Sandpack React on my site. From my understanding, the syntax highlighting is based off the file extension.
For example if I pass in:

files={{ "/App.js": code }}

Then the code will be highlighted using javascript syntax highlighting. On my site, I have several plaintext code blocks. When I use a .txt extension, the code is still being highlighted using javascript syntax highlighting (the sp-javascript class is being applied). However, when I use a .html file it works perfectly, and the sp-html class is being applied.

Why is the .txt extension not working? Is there a list of languages or file extensions that are supported? Is there another method of choosing the syntax highlighting language? I haven't been able to find anything in the docs about this. Thank you!

[danilowoz]

Hey, I just added support for markdown files on #535, which will pretty work for plain text/txt files.

Hope it solves your problem

[andrewsemchism]

Thank you so much for doing that. Do you think it would just as easy to add support for shell script syntax highlighting? That is the last thing I need for my use case.

[andrewsemchism]

I'm afraid this will not be possible because I don't see a @codemirror/lang-shell package available.

[danilowoz]

Yeah, unfortunately, CodeMirror hasn't added syntax highlight for shell files support yet. I'm afraid you still need to use plain text for shell scripts.

[DeMoorJasper]

You can actually support this using the legacy syntax highlighter which uses a less advanced way to do syntax highlighting (using regexes instead of a AST - which is also what vscode and most other editors use, so it's not that bad) https://github.com/codemirror/legacy-modes

It also includes shell and pretty much every other language you can imagine