search

cinnyapp / cinny

Yet another matrix client
https://cinny.in
GNU Affero General Public License v3.0
1.86k stars 239 forks source link

Add support for more languages in syntax highlighting #1589

Open soupglasses opened 8 months ago

soupglasses commented 8 months ago

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 commented 8 months ago

See https://github.com/cinnyapp/cinny/blob/3a95d0da01c5c69d16fda6421188e1576ddae90b/src/app/plugins/react-prism/ReactPrism.tsx#L5-L16 for currently included languages. You can add more with their supported name

soupglasses commented 8 months ago

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 commented 8 months ago

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 commented 6 months ago

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 https://github.com/PrismJS/prism/issues/972. Not sure how development of v2 has changed anything in this regard.