Add support for more languages in syntax highlighting

[soupglasses]

Describe the problem

In short, the recently added syntax highlighting of codeblocks in Cinny is rather limited. Missing languages such as Elixir and Nix from some quick testing.

Describe the solution you'd like

A more exhaustive list of supported languages.

Alternatives considered

Not having syntax highlighting for some languages, which seems like an odd choice when others do.

Additional context

Related: #324

[aceArt-GmbH]

See

cinny/src/app/plugins/react-prism/ReactPrism.tsx

Lines 5 to 16 in 3a95d0d

	import 'prismjs/components/prism-json';
	import 'prismjs/components/prism-javascript';
	import 'prismjs/components/prism-typescript';
	import 'prismjs/components/prism-css';
	import 'prismjs/components/prism-sass';
	import 'prismjs/components/prism-swift';
	import 'prismjs/components/prism-rust';
	import 'prismjs/components/prism-go';
	import 'prismjs/components/prism-c';
	import 'prismjs/components/prism-cpp';
	import 'prismjs/components/prism-java';
	import 'prismjs/components/prism-python';

for currently included languages.
You can add more with their supported name

[soupglasses]

Is there a reason why we cannot do something akin to the following?

const loadLanguages = require('prismjs/components/');
loadLanguages();

Since Cinny will technically be applicable to use all of the created languages, as its user data in a messager app, and we cannot know what languages users would want to use? For example, i would love to have Elixir, Erlang, Csharp, cmake, and Nix.

[aceArt-GmbH]

Is there a reason why we cannot do something akin to the following?

sounds like a good idea.
And as prism is lazy loaded on demand anyway, it wouldn't event hurt bundle size much.
But the suggested solution seems to be broken with vite+prismjs currently (using import instead of require)

Uncaught TypeError: __require.resolve is not a function

[pwab]

Is require still not usable in this case? I just made a quick test by changing the import statements to the code block in @soupglasses's comment, ran npm run build and got no error messages - but highlighting wasn't working then 😅. I also tried dynamic imports but vite gave a warning and it still didn't work. The only way I was able to import more languages was by adding more import statements. But this would mean writing almost 300 import statements.

According to the prism docs there seems to be that the only way to load all languages is to use the loadLanguages() function. It seems to be possible to use the babel-plugin for package configuration but not sure if this would help here.

Just FYI the initial discussion for the language-loader was in PrismJS/prism#972. Not sure how development of v2 has changed anything in this regard.