Support Dart syntax higlighting

[JaredEzz]

Validations

• I believe this is a way to improve. I'll try to join the Continue Discord for questions
• 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]

@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]

@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]

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]

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]

@sestinj

[JaredEzz]

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

[sestinj]

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

[castletaste]

It seems that not all languages are included in the default Prism configuration. You may need to explicitly import Dart support

I think syntax highlighting for Dart code would greatly help many Flutter developers in their daily work 🚀🙏

[JaredEzz]

Agreed. I don't have the time at the moment to work on this fix, but I still would love to see it as continue is still my chosen LLM tool during development.

[jjbubudi]

@JaredEzz Here is a workaround I am using right now, it is not exactly what you need but much better than having zero highlights :)
Add a system prompt to your model or use .continuerules

Here is my system prompt:

<important>
This is extremely important: When writing Dart code, ALWAYS format it as TypeScript and format the markdown as TypeScript.

Here is a bad exmaple, never do this:
```dart
```

Here is a good example:
```typescript
```
</important>

Basically the trick is to force the LLM to format Dart code using TypeScript markdown. They have a lot of similar syntax so the highlights look quite good.

Screenshot

Tested on Gemma 2 9B IT and Llama 3.1 8B Instruct.
It is working very consistently. In the rare occasion where it doesn't, just remind the LLM.