ChatInterface - Syntax identification is not working in deployment, but works in local

In the local version of my chatbot, when I ask the bot to generate code, the code it generates is colored:

But this is how it displays in the deployed version (in AWS Kubernetes cluster, if that’s relevant):

Any ideas on why this is happening, and what could I do enable or turn on syntax based colouring of generated code in panel apps in deployment?

I’ve seen this related issue, but the poster did not post the resolution, hence this post.

A workaround is using pn.widgets.CodeEditor(disabled=True)

Tried it, it had no change in both the local and deployed versions - the local version continued displaying coloured code, and the deployed version continued displaying monochromatic code.

Perhaps you can raise an issue on Panel if there isn’t already one.

This does not seem like a panel issue, but something to do with the deployment or the environment you are deploying into. The other issue raised seemed to verify this, as the same code not working on one cloud provider worked fine on the other.

Have you checked the Javascript console to see if there are any clues there? Are you running the dockerized version locally that you are deploing to AWS kubernetes?

It could be a version difference in code hilite.

Yes, I ran the docker image locally and the syntax highlighting works there. I have not tried the JS console, could you please give an example of how and where I could do that?

In my Chrome, it is under More Tools->Developer tools and there is a tab called Console. Both Safari and Firefox have very similar tools.

The fact that you are running it in a container and this is happening is interesting, becasue this is exactly the type of problem one hopes to avoid using containers. Diff’ing the docker log files from your local vs deployed might also help find the problem.

Ah, ok, I did inspect element and this is what I see:

In the deployed version, the whole code is under a single class:

Whereas in my local, the code is displayed with each word under a different class.

Maybe that’s where the coloring happens?

Turns out, we need to install the package Pygments explicitly for code highlighting to work in deployment. So, including Pygments==2.15.1 in requirements.txt solved the issue.