Support Dart syntax higlighting

continuedev / continue

⏩ Continue is the leading open-source AI code assistant. You can connect any models and any context to build custom autocomplete and chat experiences inside VS Code and JetBrains

https://docs.continue.dev/

Apache License 2.0

13.23k stars 916 forks source link

Support Dart syntax higlighting #1478

Open JaredEzz opened 3 weeks ago

JaredEzz commented 3 weeks ago

Validations

[X] I believe this is a way to improve. I'll try to join the Continue Discord for questions
[X] I'm not able to find an open issue that requests the same enhancement

Problem

Other languages have syntax highlighting in the Continue response that make reading and using the response much more helpful.

Dart (and I'm sure other languages) do not have this support

The expected code highlighting would look something like this

Solution

Add support for Dart and other languages for syntax highlighting in the response

sestinj commented 3 weeks ago

@JaredEzz We use react-markdown to render code blocks and other markdown with comes with built-in highlight-js. Highlight-js has a default set of included languages which apparently must not include Dart.

One possible solution would be to default to a similar language that is included, by making an override map here: https://github.com/continuedev/continue/blob/preview/gui/src/components/markdown/StyledMarkdownPreview.tsx#L141-L145

JaredEzz commented 3 weeks ago

@sestinj thanks. Dart is included in the highlight.js supported languages here.. why would it require an override map? https://github.com/highlightjs/highlight.js/blob/main/SUPPORTED_LANGUAGES.md

JaredEzz commented 3 weeks ago

If continue is using the default minified web build, it could require extra work. I'll start there

Note: The languages available will depend on how you've built or are included the library in your app. For example our default minified web build includes only ~40 popular languages. See Getting the Library and Importing the Library in the README for examples of how to load additional/specific languages.

JaredEzz commented 3 weeks ago

continuedev/continue/gui/src/components/markdown/StyledCode.tsx seems to be the culprit, since there's no direct highlight.js imports but instead using react-syntax-highlighter which supports languages like Dart. Not sure what the issue is here, could use some help.

JaredEzz commented 3 weeks ago

@sestinj

JaredEzz commented 3 weeks ago

@conorhastings you might have some input here too, to see if the usage is incorrect

sestinj commented 3 weeks ago

Yes you're right, I forgot that I switched to react-syntax-highlighter. But not clear yet why Dart wouldn't be working, it's supported by prism (https://prismjs.com/#supported-languages), though maybe it's another case of a minified build